Version 1.4.1

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/copilot-instructions.md

@@ -1,109 +0,0 @@
----
-description: Instructions for using the JMESPath Testing Tool repository.
-applyTo: "**/*.md,**/.js"
----
-# AI Agent Instructions for JMESPath Testing Tool
-
-The tool in this repository is designed to help users validate and test JMESPath expressions against JSON data. It is a React-based web application that provides an interactive interface for entering JMESPath queries and viewing the results.
-
-The main application page is divided into three sections:
-
-- Top section: Title and description of the tool.
-  - Theme control buttons (auto/light/dark)
-  - Key-lock button that switches to the second application page.
-- Middle section:
-  - The label "JMESPath Expression" with a right allinged row of action buttons:
-    - Load an Object
-    - Load a Log File
-    - Load Sample
-    - Format JSON
-    - Clear All
-  - Input area for JMESPath expressions
-  - Message area for errors related to JMESPath expression syntax
-- Lower Middle left section: Input area for JSON data
-- Lower Middle right section: Output are for JMESPath query results
-- Bottom section: Footer with author and license information
-
-The Middle section also contains a toolbar with buttons to load data from disk, load sample data, format JSON input, and clear all inputs.
-
-The second page of the application contains:
-
-- Top section: that is the same as the main page
-- Middle section:
-  - API key display area with a button to regenerate the API key. The API key is 32 characters long cryptograghically secure random string.
-  - Instructions on how to use the API to upload sample data remotely with a code block displaying example curl command.
-- Bottom section: Footer with author and license information.
-
-The sample code block:
-
-```bash
-curl -s -X POST \
-    -H "Content-Type: application/json" \
-    -H "Accept: application/json" \
-    -H "X-API-Key: {{API_KEY}}" \
-    --data @{{JSON_FILE_NAME}} \
-    "{{API_URL}}/api/v1/upload"
-```
-
-Placeholders `{{API_KEY}}` and `{{API_URL}}` should be replaced with the actual API key and the URL of the deployed application respectively. The `{{JSON_FILE_NAME}}` placeholder should be shown as is to indicate the file containing the JSON data to be uploaded.
-
-The server code is only used as a bridge between the UI app and the external tools that may upload the sample data. The server does not perform any JMESPath evaluation or JSON parsing; all such logic is handled in the React application.
-
-The server exposes a REST API to allow external tools to upload sample data that users can load into the application. The API key is required to upload sample data.
-
-The API key is used for:
-
-- encrypting the sample data
-- authenticating download requests
-
-Session id is a hash of the API key.
-
-The server keeps two pieces of information in memory for each session:
-
-1. The sample data itself.
-2. A state variable (a GUID) that changes whenever new sample data is uploaded.
-
-The maximum number of sessions to keep in memory set at the server startup using `MAX_SESSIONS` environment variable that defaults to 100. The maximum size of the sample data is set using `MAX_SAMPLE_SIZE` environment variable that defaults to 1 MB. Maximum session age is controlled using `MAX_SESSION_TTL` environment variable that defaults to 1 hour. After reaching the maximum number of sessions, the server rejects new uploads until some sessions expire. Sessions older than the maximum session age are automatically purged.
-
-The UI generates an API key at startup then load the sample data at startup and periodically checks the state variable to see if new sample data is available. If state variable changes, the React app displays a button beneath the expression input area to reload the sample data. The reload is performed only when the user clicks the button.
-
----
-
-The main components of the application are located in the `src` directory and target Node 24 LTS environment.
-
-Framework to be used:
-
-- React for building the user interface.
-- JavaScript (ES6+) for scripting.
-- Bootstrap for styling and layout.
-- Express.js for serving the application and handling API requests.
-
-### API
-
-The application exposes a REST API for remotly uploading sample data. The API endpoints are as follows:
-
-- `POST /api/v1/upload`: The sample data is sent in the request body as JSON. The request must include an `x-api-key` header with the API key. If the upload is successful, the server responds with status 200 OK.
-
-  The server stores the sample data in memory and generates a new value for its state variable (a guid).
-
-- `GET /api/v1/sample`: Returns the currently stored sample data as JSON. The request must include an `x-api-key` header with the API key. If the API key is invalid or the header is missing, the server responds with status 403 Forbidden.
-
-- `GET /api/v1/state`: Returns the current value of the state variable (a guid) as a string. The request must include an `x-api-key` header with the API key. If the API key is invalid or the header is missing, the server responds with status 403 Forbidden.
-
-## Containerization
-
-The application should be prepared for deployment using containerization. It should extend minimal Node 24 LTS container image.
-
-## Updates
-
-Always use `scripts/new-version.js` script to make a new release.
-
-Correct procedure to make a new release:
-
-- Review the code changes and ensure everything is working.
-- Run `npm run build` to build the React application.
-- Run `npm test` to execute the test suite and ensure all tests pass.
-- Prepare a commit message describing the changes made.
-- Use `scripts/new-version.js` to create a new version and commit the changes. Use `--force` option if repository is not clean.
-- Don't push the changes without approval.
-- Don't build docker image without approval.

.gitignore

@@ -31,4 +31,7 @@ yarn-error.log*
 
 # OS
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+# Don't store AGENTS.md in git
+AGENTS.md

README.md

@@ -4,7 +4,7 @@ A React-based web application for testing and validating JMESPath expressions ag
 
 ![JMESPath Testing Tool](https://img.shields.io/badge/React-18.2.0-blue?style=flat-square&logo=react)
 ![Node.js](https://img.shields.io/badge/Node.js-24%20LTS-green?style=flat-square&logo=node.js)
-![Bootstrap](https://img.shields.io/badge/Bootstrap-5.3.2-purple?style=flat-square&logo=bootstrap)
+![Material UI](https://img.shields.io/badge/Material--UI-v7-007FFF?style=flat-square&logo=mui)
 
 ## Features
 
@@ -71,8 +71,8 @@ container run -p 3000:3000 jmespath-playground
 
 1. **Enter a JMESPath expression** in the top input field (e.g., `people[*].name`)
 2. **Add JSON data** using one of these methods:
-   - **Load an Object**: Click "📄 Load an Object" to upload standard JSON files (.json)
+   - **Load an Object**: Click "Load an Object" to upload standard JSON files (.json)
-   - **Load a Log File**: Click "📋 Load a Log File" to upload JSON Lines files (.log) - each line converted to array
+   - **Load a Log File**: Click "Load a Log File" to upload JSON Lines files (.log) - each line converted to array
    - **Paste or type**: Enter JSON data directly in the bottom-left textarea
    - **Load sample**: Use the "Load Sample" button for quick testing
 3. **View the results** in the bottom-right output area
@@ -87,7 +87,7 @@ container run -p 3000:3000 jmespath-playground
 
 The application includes a REST API for uploading sample data remotely:
 
-1. **Access API Key**: Click the key-lock button (🔒) to view your unique API key
+1. **Access API Key**: Click the key-lock button to view your unique API key
 2. **Upload Data**: Use curl or any HTTP client to upload JSON data:
    ```bash
    curl -X POST \
@@ -127,7 +127,7 @@ MAX_SESSIONS=200 MAX_SAMPLE_SIZE=2097152 LISTEN_PORT=8080 node server.js
 ## Technology Stack
 
 - **React 18.2.0**: Frontend framework with modern hooks and components
-- **Bootstrap 5.3.2**: CSS framework with dark/light theme support
+- **Material UI v7**: Modern React component library following Material 3 Design principles.
 - **JMESPath 0.16.0**: JMESPath expression evaluation library
 - **Express.js 4.19.2**: Backend API server with session management
 - **Node.js 24 LTS**: Runtime environment

package.json

@@ -1,30 +1,34 @@
 {
   "name": "jmespath-playground",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "A React-based web application for testing JMESPath expressions against JSON data",
   "main": "index.js",
   "scripts": {
     "start": "vite",
-    "prebuild": "node scripts/version-check.js",
+    "prebuild": "node scripts/version.mjs",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest",
     "server": "node server.js --dev",
-    "dev": "concurrently \"npm start\" \"npm run server\"",
+    "dev": "concurrently \"npm start\" \"node --watch server.js --dev\"",
-    "build-image": "node scripts/build-image.js"
+    "build-image": "vite build && node scripts/build-image.mjs"
   },
   "engines": {
     "node": ">=24.0.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.1",
-    "bootstrap": "^5.3.2",
     "express": "^4.19.2",
     "jmespath": "^0.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "semver": "^7.7.3",
     "uuid": "^9.0.0"
   },
   "browserslist": {

scripts/build-image.mjs

@@ -1,8 +1,13 @@
 #!/usr/bin/env node
 
-const { execSync } = require('child_process');
+import { execSync } from 'node:child_process';
-const fs = require('fs');
+import fs from 'node:fs';
-const { parseArgs } = require('util');
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { parseArgs } from 'node:util';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 function execCommand(command, description) {
     try {
@@ -31,20 +36,27 @@ function getContainerTool() {
     }
 }
 
-function getVersion() {
+async function generateVersionFile() {
-    try {
+    const versionModuleUrl = pathToFileURL(path.join(__dirname, 'version.mjs')).href;
-        // Try to get version from git tag
+    const { generateVersionFile: generate } = await import(versionModuleUrl);
-        const gitTag = execSync('git tag --points-at HEAD', { encoding: 'utf8' }).trim();
+    const versionFilePath = path.join(__dirname, '..', 'src', 'version.js');
-        if (gitTag) {
+    generate(versionFilePath);
-            return { version: gitTag.replace(/^v/, ''), isRelease: true };
+    return versionFilePath;
-        }
+}
-    } catch (error) {
+
-        // Git command failed, ignore
+function readVersionFile(versionFilePath) {
+    const contents = fs.readFileSync(versionFilePath, 'utf8');
+    const versionMatch = contents.match(/export const VERSION = '([^']+)';/);
+    const releaseMatch = contents.match(/export const IS_RELEASE = (true|false);/);
+
+    if (!versionMatch || !releaseMatch) {
+        throw new Error(`Could not parse version file at ${versionFilePath}`);
     }
 
-    // Development build - use package.json version with -dev suffix
+    return {
-    const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+        version: versionMatch[1],
-    return { version: `${packageJson.version}-dev`, isRelease: false };
+        isRelease: releaseMatch[1] === 'true'
+    };
 }
 
 function getHostArchitecture() {
@@ -62,7 +74,7 @@ function showHelp() {
     console.log(`Build multi-architecture container images for JMESPath Playground
 
 Usage:
-  build-image.js [OPTIONS]
+  build-image.mjs [OPTIONS]
 
 Options:
   --all-arch       Build for both arm64 and amd64 (default: build for host architecture only)
@@ -70,14 +82,14 @@ Options:
   --help, -h       Show this help message and exit
 
 Examples:
-  build-image.js                            # Builds for ${hostArch} only (host architecture)
+  build-image.mjs                            # Builds for ${hostArch} only (host architecture)
-  build-image.js --all-arch                 # Builds for both arm64 and amd64
+  build-image.mjs --all-arch                 # Builds for both arm64 and amd64
-  build-image.js --arch arm64               # Builds for arm64 only
+  build-image.mjs --arch arm64               # Builds for arm64 only
-  build-image.js --arch arm64 --arch amd64  # Explicitly specify both
+  build-image.mjs --arch arm64 --arch amd64  # Explicitly specify both
-  build-image.js -h                         # Show help`);
+  build-image.mjs -h                         # Show help`);
 }
 
-function main() {
+async function main() {
     const { values } = parseArgs({
         options: {
             help: {
@@ -105,8 +117,9 @@ function main() {
     }
 
     const containerTool = getContainerTool();
-    const { version, isRelease } = getVersion();
+    const versionFilePath = await generateVersionFile();
-    
+    const { version, isRelease } = readVersionFile(versionFilePath);
+
     let architectures;
     if (values['all-arch']) {
         architectures = ['arm64', 'amd64'];
@@ -140,10 +153,10 @@ function main() {
 
     // Show usage instructions
     console.log(`\nUsage examples:`);
-    console.log(`  build-image.js                            # Builds for host architecture only`);
+    console.log(`  build-image.mjs                            # Builds for host architecture only`);
-    console.log(`  build-image.js --all-arch                 # Builds for both arm64 and amd64`);
+    console.log(`  build-image.mjs --all-arch                 # Builds for both arm64 and amd64`);
-    console.log(`  build-image.js --arch arm64               # Builds for arm64 only`);
+    console.log(`  build-image.mjs --arch arm64               # Builds for arm64 only`);
-    console.log(`  build-image.js --arch arm64 --arch amd64  # Explicitly specify both`);
+    console.log(`  build-image.mjs --arch arm64 --arch amd64  # Explicitly specify both`);
 
     if (isRelease) {
         console.log(`\nTo run the container:`);
@@ -159,6 +172,12 @@ function main() {
     }
 }
 
-if (require.main === module) {
+const isDirectRun = process.argv[1]
-    main();
+    && fileURLToPath(import.meta.url) === path.resolve(process.argv[1]);
-}
+
+if (isDirectRun) {
+    main().catch((error) => {
+        console.error(`Error: ${error.message}`);
+        process.exit(1);
+    });
+}

scripts/new-version.mjs

@@ -1,13 +1,46 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
+import { execSync } from 'node:child_process';
-const { execSync } = require('child_process');
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import semver from 'semver';
+
+function tagMatchesVersion(tag, version) {
+    if (!tag) {
+        return false;
+    }
+    if (tag === version) {
+        return true;
+    }
+    if (tag.startsWith('v')) {
+        return tag.slice(1) === version;
+    }
+    return false;
+}
+
+function hasMatchingTag(tagsOutput, version) {
+    return tagsOutput
+        .split('\n')
+        .map(tag => tag.trim())
+        .filter(Boolean)
+        .some(tag => tagMatchesVersion(tag, version));
+}
+
+function findMatchingTag(tagsOutput, version) {
+    return tagsOutput
+        .split('\n')
+        .map(tag => tag.trim())
+        .filter(Boolean)
+        .find(tag => tagMatchesVersion(tag, version)) || null;
+}
 
 function showUsage() {
-    console.log('Usage: node scripts/new-version.js <version> [--force] [-m|--message "commit message"]');
+    console.log('Usage: node scripts/new-version.mjs <version> [--force] [-m|--message "commit message"]');
-    console.log('       node scripts/new-version.js --check <version>');
+    console.log('       node scripts/new-version.mjs --check <version>');
     console.log('');
     console.log('Creates a new version by tagging the current commit.');
+    console.log('Version must be valid semver (e.g., 1.2.3).');
     console.log('');
     console.log('Options:');
     console.log('  --force              Force version creation even with dirty repo or package.json mismatch');
@@ -15,14 +48,14 @@ function showUsage() {
     console.log('  -m, --message TEXT   Custom commit message (only used when commit is needed)');
     console.log('');
     console.log('Example:');
-    console.log('  node scripts/new-version.js 1.2.0');
+    console.log('  node scripts/new-version.mjs 1.2.0');
-    console.log('  node scripts/new-version.js 1.2.0 --force');
+    console.log('  node scripts/new-version.mjs 1.2.0 --force');
-    console.log('  node scripts/new-version.js 1.2.0 -m "Add new feature XYZ"');
+    console.log('  node scripts/new-version.mjs 1.2.0 -m "Add new feature XYZ"');
-    console.log('  node scripts/new-version.js --check 1.3.0');
+    console.log('  node scripts/new-version.mjs --check 1.3.0');
 }
 
 function performCheck(targetVersion) {
-    console.log('🔍 Repository Analysis Report');
+    console.log('Repository Analysis Report');
     console.log('============================');
 
     try {
@@ -31,7 +64,7 @@ function performCheck(targetVersion) {
         const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
         const currentVersion = pkg.version;
 
-        console.log(`📦 Package.json version: ${currentVersion}`);
+        console.log(`Package.json version: ${currentVersion}`);
 
         // Check repository status
         let isRepoDirty = false;
@@ -41,71 +74,71 @@ function performCheck(targetVersion) {
             isRepoDirty = status.trim() !== '';
             dirtyFiles = status.trim();
         } catch (error) {
-            console.log('⚠️  Cannot determine git status');
+            console.log('Warning: Cannot determine git status');
         }
 
         if (isRepoDirty) {
-            console.log('🔄 Repository status: DIRTY');
+            console.log('Repository status: DIRTY');
             console.log('   Uncommitted changes:');
             dirtyFiles.split('\n').forEach(line => {
                 if (line.trim()) console.log(`   ${line}`);
             });
         } else {
-            console.log('✅ Repository status: CLEAN');
+            console.log('Repository status: CLEAN');
         }
 
         // Check current commit info
         try {
             const currentCommit = execSync('git rev-parse HEAD', { encoding: 'utf8' }).trim();
             const currentBranch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf8' }).trim();
-            console.log(`🌟 Current commit: ${currentCommit.substring(0, 7)} (${currentBranch})`);
+            console.log(`Current commit: ${currentCommit.substring(0, 7)} (${currentBranch})`);
 
             // Check if current commit is tagged
             const tagsOnHead = execSync('git tag --points-at HEAD', { encoding: 'utf8' }).trim();
             if (tagsOnHead) {
-                console.log(`🏷️  Current commit tags: ${tagsOnHead.split('\n').join(', ')}`);
+                console.log(`Current commit tags: ${tagsOnHead.split('\n').join(', ')}`);
             } else {
-                console.log('🏷️  Current commit: No tags');
+                console.log('Current commit: No tags');
             }
         } catch (error) {
-            console.log('⚠️  Cannot determine commit info');
+            console.log('Warning: Cannot determine commit info');
         }
 
         // List recent tags
         try {
             const recentTags = execSync('git tag --sort=-version:refname | head -5', { encoding: 'utf8' }).trim();
             if (recentTags) {
-                console.log('📋 Recent tags:');
+                console.log('Recent tags:');
                 recentTags.split('\n').forEach(tag => {
                     if (tag.trim()) console.log(`   ${tag}`);
                 });
             } else {
-                console.log('📋 No tags found in repository');
+                console.log('No tags found in repository');
             }
         } catch (error) {
-            console.log('⚠️  Cannot list tags');
+            console.log('Warning: Cannot list tags');
         }
 
         console.log('');
 
         // Analysis for target version (if provided)
         if (targetVersion) {
-            const tagName = `v${targetVersion}`;
+            const tagName = targetVersion;
-            console.log(`🎯 Analysis for version ${targetVersion}:`);
+            console.log(`Analysis for version ${targetVersion}:`);
             console.log('=====================================');
 
             // Check if target tag exists
             try {
                 const existingTags = execSync('git tag -l', { encoding: 'utf8' });
-                const tagExists = existingTags.split('\n').includes(tagName);
+                const matchingTag = findMatchingTag(existingTags, targetVersion);
 
-                if (tagExists) {
+                if (matchingTag) {
-                    console.log(`❌ Tag '${tagName}' already exists - CANNOT CREATE`);
+                    console.log(`Error: Tag '${matchingTag}' already exists - CANNOT CREATE`);
                     return;
                 }
-                console.log(`✅ Tag '${tagName}' available`);
+                console.log(`Tag '${tagName}' available`);
             } catch (error) {
-                console.log('⚠️  Cannot check tag availability');
+                console.log('Warning: Cannot check tag availability');
                 return;
             }
 
@@ -114,46 +147,46 @@ function performCheck(targetVersion) {
             const needsPackageUpdate = !packageJsonMatches;
             const needsCommit = isRepoDirty || needsPackageUpdate;
 
-            console.log(`📝 Package.json: ${packageJsonMatches ? 'MATCHES' : `NEEDS UPDATE (${currentVersion} → ${targetVersion})`}`);
+            console.log(`Package.json: ${packageJsonMatches ? 'MATCHES' : `NEEDS UPDATE (${currentVersion} -> ${targetVersion})`}`);
 
             if (needsCommit) {
-                console.log('⚡ Actions needed:');
+                console.log('Actions needed:');
                 if (needsPackageUpdate) {
-                    console.log('   • Update package.json');
+                    console.log('   - Update package.json');
                 }
                 if (isRepoDirty) {
-                    console.log('   • Stage uncommitted changes');
+                    console.log('   - Stage uncommitted changes');
                 }
-                console.log('   • Create commit');
+                console.log('   - Create commit');
-                console.log(`   • Create tag ${tagName}`);
+                console.log(`   - Create tag ${tagName}`);
                 console.log('');
-                console.log('📋 Commands that would work:');
+                console.log('Commands that would work:');
                 if (isRepoDirty || needsPackageUpdate) {
-                    console.log(`   node scripts/new-version.js ${targetVersion} --force`);
+                    console.log(`   node scripts/new-version.mjs ${targetVersion} --force`);
                 } else {
-                    console.log(`   node scripts/new-version.js ${targetVersion}`);
+                    console.log(`   node scripts/new-version.mjs ${targetVersion}`);
-                    console.log(`   node scripts/new-version.js ${targetVersion} --force`);
+                    console.log(`   node scripts/new-version.mjs ${targetVersion} --force`);
                 }
             } else {
-                console.log('⚡ Actions needed:');
+                console.log('Actions needed:');
-                console.log(`   • Create tag ${tagName} (no commit needed)`);
+                console.log(`   - Create tag ${tagName} (no commit needed)`);
                 console.log('');
-                console.log('📋 Commands that would work:');
+                console.log('Commands that would work:');
-                console.log(`   node scripts/new-version.js ${targetVersion}`);
+                console.log(`   node scripts/new-version.mjs ${targetVersion}`);
-                console.log(`   node scripts/new-version.js ${targetVersion} --force`);
+                console.log(`   node scripts/new-version.mjs ${targetVersion} --force`);
             }
 
             console.log('');
-            console.log('🚦 Default mode requirements:');
+            console.log('Default mode requirements:');
             if (isRepoDirty) {
-                console.log('   ❌ Repository must be clean (currently dirty)');
+                console.log('   Repository must be clean (currently dirty)');
             } else {
-                console.log('   ✅ Repository is clean');
+                console.log('   Repository is clean');
             }
             if (!packageJsonMatches) {
-                console.log(`   ❌ Package.json must match version (currently ${currentVersion})`);
+                console.log(`   Package.json must match version (currently ${currentVersion})`);
             } else {
-                console.log('   ✅ Package.json version matches');
+                console.log('   Package.json version matches');
             }
 
         } else {
@@ -163,7 +196,7 @@ function performCheck(targetVersion) {
         }
 
     } catch (error) {
-        console.error('❌ Error during analysis:', error.message);
+        console.error('Error during analysis:', error.message);
         process.exit(1);
     }
 }
@@ -200,28 +233,43 @@ function main() {
         // For normal operation, version is required
         newVersion = args.find(arg => !arg.startsWith('--') && arg !== '-m' && arg !== customMessage);
         if (!newVersion) {
+            console.error('Error: Version argument required');
+            showUsage();
+            process.exit(1);
         }
     }
 
+    if (newVersion && newVersion.startsWith('v')) {
+        console.error('Error: Version must not start with "v". Use plain semver like 1.2.3.');
+        process.exit(1);
+    }
+
+    const normalizedVersion = newVersion;
+    if (!semver.valid(normalizedVersion)) {
+        console.error('Error: Version must be valid semver (e.g., 1.2.3)');
+        process.exit(1);
+    }
+
     if (isCheck) {
-        performCheck(newVersion);
+        performCheck(normalizedVersion);
         return;
     }
 
-    const tagName = `v${newVersion}`;
+    const tagName = normalizedVersion;
 
-    console.log(`🏷️  Creating new version: ${newVersion}${isForce ? ' (forced)' : ''}`);
+    console.log(`Creating new version: ${normalizedVersion}${isForce ? ' (forced)' : ''}`);
 
     try {
         // 1. Check if tag already exists - Always ERROR
         try {
             const existingTags = execSync('git tag -l', { encoding: 'utf8' });
-            if (existingTags.split('\n').includes(tagName)) {
+            const matchingTag = findMatchingTag(existingTags, normalizedVersion);
-                console.error(`❌ Error: Tag '${tagName}' already exists`);
+            if (matchingTag) {
+                console.error(`Error: Tag '${matchingTag}' already exists`);
                 process.exit(1);
             }
         } catch (error) {
-            console.error('❌ Error: Failed to check existing tags');
+            console.error('Error: Failed to check existing tags');
             process.exit(1);
         }
 
@@ -231,7 +279,7 @@ function main() {
             const status = execSync('git status --porcelain', { encoding: 'utf8' });
             isRepoDirty = status.trim() !== '';
         } catch (error) {
-            console.error('❌ Error: Failed to check git status');
+            console.error('Error: Failed to check git status');
             process.exit(1);
         }
 
@@ -239,7 +287,7 @@ function main() {
         const packagePath = './package.json';
         const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
         const currentVersion = pkg.version;
-        const packageJsonMatches = currentVersion === newVersion;
+        const packageJsonMatches = currentVersion === normalizedVersion;
 
         // 4. Determine what action is needed
         const needsPackageUpdate = !packageJsonMatches;
@@ -248,12 +296,12 @@ function main() {
         // 5. Check if force is required
         if (!isForce) {
             if (isRepoDirty) {
-                console.error('❌ Error: Working directory has uncommitted changes');
+                console.error('Error: Working directory has uncommitted changes');
                 console.error('Please commit your changes first or use --force');
                 process.exit(1);
             }
             if (needsPackageUpdate) {
-                console.error(`❌ Error: Package.json version is ${currentVersion}, requested ${newVersion}`);
+                console.error(`Error: Package.json version is ${currentVersion}, requested ${normalizedVersion}`);
                 console.error('Use --force to update package.json');
                 process.exit(1);
             }
@@ -261,40 +309,45 @@ function main() {
 
         // 6. Execute the versioning
         if (needsCommit) {
-            console.log(`📦 Needs commit: ${needsPackageUpdate ? 'package.json update' : ''}${needsPackageUpdate && isRepoDirty ? ' + ' : ''}${isRepoDirty ? 'uncommitted changes' : ''}`);
+            console.log(`Needs commit: ${needsPackageUpdate ? 'package.json update' : ''}${needsPackageUpdate && isRepoDirty ? ' + ' : ''}${isRepoDirty ? 'uncommitted changes' : ''}`);
 
             // Update package.json if needed
             if (needsPackageUpdate) {
-                pkg.version = newVersion;
+                pkg.version = normalizedVersion;
                 fs.writeFileSync(packagePath, JSON.stringify(pkg, null, 2) + '\n');
-                console.log(`📝 Updated package.json: ${currentVersion} → ${newVersion}`);
+                console.log(`Updated package.json: ${currentVersion} -> ${normalizedVersion}`);
             }
 
             // Stage all changes
             execSync('git add .', { stdio: 'inherit' });
 
             // Commit
-            const commitMessage = customMessage || (needsPackageUpdate ? `Version ${newVersion}` : `Prepare for version ${newVersion}`);
+            const commitMessage = customMessage || (needsPackageUpdate ? `Version ${normalizedVersion}` : `Prepare for version ${normalizedVersion}`);
             execSync(`git commit -m "${commitMessage}"`, { stdio: 'inherit' });
-            console.log(`✅ Committed changes`);
+            console.log('Committed changes');
         } else {
-            console.log(`✅ Repository clean, package.json matches - tagging current commit`);
+            console.log('Repository clean, package.json matches - tagging current commit');
         }
 
         // 7. Tag the commit
         execSync(`git tag ${tagName}`, { stdio: 'inherit' });
-        console.log(`🏷️  Created tag: ${tagName}`);
+        console.log(`Created tag: ${tagName}`);
 
         console.log('');
-        console.log('🎉 Version created successfully!');
+        console.log('Version created successfully!');
         console.log('');
         console.log('Next steps:');
         console.log(`  git push origin main --tags  # Push the commit and tag`);
 
     } catch (error) {
-        console.error('❌ Error during version creation:', error.message);
+        console.error('Error during version creation:', error.message);
         process.exit(1);
     }
 }
 
-main();
+const isDirectRun = process.argv[1]
+    && fileURLToPath(import.meta.url) === path.resolve(process.argv[1]);
+
+if (isDirectRun) {
+    main();
+}

scripts/sample-data.json

@@ -1,30 +0,0 @@
-{
-  "users": [
-    {
-      "id": 1,
-      "name": "Alice Johnson",
-      "email": "alice@example.com",
-      "role": "admin",
-      "skills": ["JavaScript", "Python", "SQL"]
-    },
-    {
-      "id": 2,
-      "name": "Bob Wilson",
-      "email": "bob@example.com", 
-      "role": "developer",
-      "skills": ["Java", "Spring", "React"]
-    },
-    {
-      "id": 3,
-      "name": "Carol Davis",
-      "email": "carol@example.com",
-      "role": "designer",
-      "skills": ["Figma", "Photoshop", "CSS"]
-    }
-  ],
-  "metadata": {
-    "total": 3,
-    "created": "2026-01-21",
-    "version": "1.0"
-  }
-}

scripts/upload.js

@@ -1,172 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * JMESPath Playground Upload Script (JavaScript)
- * Usage: node upload.js [-u URL] [-k API_KEY] "json_file.json"
- */
-
-const fs = require('fs');
-const path = require('path');
-const https = require('https');
-const http = require('http');
-const { URL } = require('url');
-const { parseArgs } = require('util');
-
-function showUsage() {
-    const scriptName = path.basename(process.argv[1]);
-    console.log(`Usage: node ${scriptName} [-u|--url URL] [-k|--key API_KEY] <json_file>`);
-    console.log('');
-    console.log('Options:');
-    console.log('  -u, --url URL        API URL (default: http://localhost:3000)');
-    console.log('  -k, --key API_KEY    API key (not required for localhost)');
-    console.log('  -h, --help           Show this help message');
-    console.log('');
-    console.log('Examples:');
-    console.log(`  node ${scriptName} data.json`);
-    console.log(`  node ${scriptName} -u http://example.com:3000 -k your-api-key data.json`);
-}
-
-function getArguments() {
-    const { values, positionals } = parseArgs({
-        args: process.argv.slice(2),
-        options: {
-            url: { type: 'string', short: 'u', default: 'http://localhost:3000' },
-            key: { type: 'string', short: 'k' },
-            help: { type: 'boolean', short: 'h' }
-        },
-        allowPositionals: true
-    });
-
-    if (values.help) {
-        showUsage();
-        process.exit(0);
-    }
-
-    if (positionals.length !== 1) {
-        console.error('Error: JSON file required');
-        showUsage();
-        process.exit(1);
-    }
-
-    return {
-        apiUrl: values.url,
-        apiKey: values.key || '',
-        jsonFile: positionals[0]
-    };
-}
-
-async function validateJsonFile(jsonFile) {
-    // Check if file exists
-    if (!fs.existsSync(jsonFile)) {
-        console.error(`Error: JSON file '${jsonFile}' not found`);
-        process.exit(1);
-    }
-
-    // Validate JSON content
-    try {
-        const content = fs.readFileSync(jsonFile, 'utf8');
-        JSON.parse(content);
-        return content;
-    } catch (error) {
-        console.error(`Error: '${jsonFile}' contains invalid JSON`);
-        console.error(error.message);
-        process.exit(1);
-    }
-}
-
-function isLocalhost(url) {
-    try {
-        const parsed = new URL(url);
-        const hostname = parsed.hostname;
-        return hostname === 'localhost' ||
-               hostname === '127.0.0.1' ||
-               hostname.startsWith('127.') ||
-               hostname === '::1';
-    } catch {
-        return false;
-    }
-}
-
-function makeRequest(url, options) {
-    return new Promise((resolve, reject) => {
-        const parsedUrl = new URL(url);
-        const isHttps = parsedUrl.protocol === 'https:';
-        const client = isHttps ? https : http;
-
-        const requestOptions = {
-            hostname: parsedUrl.hostname,
-            port: parsedUrl.port,
-            path: parsedUrl.pathname,
-            method: options.method || 'GET',
-            headers: options.headers || {}
-        };
-
-        const req = client.request(requestOptions, (res) => {
-            let data = '';
-            res.on('data', chunk => data += chunk);
-            res.on('end', () => {
-                resolve({
-                    ok: res.statusCode >= 200 && res.statusCode < 300,
-                    status: res.statusCode,
-                    json: () => Promise.resolve(JSON.parse(data))
-                });
-            });
-        });
-
-        req.on('error', reject);
-
-        if (options.body) {
-            req.write(options.body);
-        }
-
-        req.end();
-    });
-}
-
-async function uploadData(apiUrl, apiKey, jsonFile, jsonData) {
-    try {
-        const headers = {
-            'Content-Type': 'application/json',
-        };
-
-        // Only send API key for non-localhost requests
-        const isLocal = isLocalhost(apiUrl);
-        if (!isLocal && apiKey) {
-            headers['X-API-Key'] = apiKey;
-        } else if (!isLocal && !apiKey) {
-            console.error('Error: API key required for non-localhost URLs');
-            console.error('Use -k/--key option to specify API key');
-            process.exit(1);
-        }
-
-        const response = await makeRequest(`${apiUrl}/api/v1/upload`, {
-            method: 'POST',
-            headers: headers,
-            body: jsonData
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(`HTTP ${response.status}: ${errorData.error || 'Upload failed'}`);
-        }
-
-        const result = await response.json();
-        console.log(JSON.stringify(result));
-
-    } catch (error) {
-        console.error('Error uploading data:', error.message);
-        process.exit(1);
-    }
-}
-
-async function main() {
-    const { apiUrl, apiKey, jsonFile } = getArguments();
-    const jsonData = await validateJsonFile(jsonFile);
-    await uploadData(apiUrl, apiKey, jsonFile, jsonData);
-}
-
-// Run the script
-main().catch((error) => {
-    console.error('Unexpected error:', error);
-    process.exit(1);
-});

scripts/version-check.js

@@ -1,48 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Read package.json for base version
-const packagePath = './package.json';
-const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
-
-let version = pkg.version;
-let isRelease = false;
-
-try {
-  // Check if current commit is tagged
-  const gitTag = execSync('git tag --points-at HEAD', { encoding: 'utf8' }).trim();
-
-  if (gitTag) {
-    // We're at a tagged commit - extract version from tag
-    const tagVersion = gitTag.replace(/^v/, ''); // Remove 'v' prefix if present
-    version = tagVersion;
-    console.log(`✅ Building release version ${version} (tagged: ${gitTag})`);
-    isRelease = true;
-  } else {
-    // We're not at a tagged commit - use unknown version
-    version = 'unknown';
-    console.log(`📦 Building development version with unknown version`);
-    isRelease = false;
-  }
-} catch (error) {
-  // Git command failed (maybe not in a git repo)
-  version = 'unknown';
-  console.log(`⚠️  Cannot determine git status, using unknown version`);
-  isRelease = false;
-}
-
-// Generate version.js file
-const versionFile = path.join('./src', 'version.js');
-const versionContent = `// Auto-generated version file - do not edit manually
-// Generated at: ${new Date().toISOString()}
-
-export const VERSION = '${version}';
-export const IS_RELEASE = ${isRelease};
-export const BUILD_TIME = '${new Date().toISOString()}';
-`;
-
-fs.writeFileSync(versionFile, versionContent);
-console.log(`📝 Generated ${versionFile} with version ${version}`);

scripts/version.mjs

@@ -0,0 +1,69 @@
+import { readFileSync, write, writeFileSync } from "fs";
+import { execSync } from "child_process";
+import semver from "semver";
+
+export function getGitVersion() {
+  let rawGitVersion;
+  let gitVersion;
+
+  try {
+    rawGitVersion = execSync("git describe --tags --dirty").toString().trim();
+    gitVersion = semver.coerce(rawGitVersion) || semver.coerce("0.0.0");
+  } catch (e) {
+    return "0.0.0";
+  }
+
+  // Git describe may return versions like v1.2.3-4-gabcdef
+  // or v1.2.3-dirty or v1.2.3 or v1.2.3-4-gabcdef-dirty.
+  // We need to return either a clean version or
+  // append -dev for modified versions and
+  // -dirty for dirty working tree.
+  if (rawGitVersion.endsWith("-dirty")) {
+    return gitVersion.version + "-dirty";
+  } else if (rawGitVersion.includes("-")) {
+    return gitVersion.version + "-dev";
+  } else {
+    return gitVersion.version || "0.0.0";
+  }
+}
+
+export function generateVersionFile(versionFilePath) {
+  // Read package.json version
+  const packageVersion = JSON.parse(
+    readFileSync("package.json", { encoding: "utf-8" }),
+  ).version;
+  // Get version from git repository
+  const gitVersion = getGitVersion();
+  const gitBaseVersion = semver.coerce(gitVersion)?.version;
+
+  // if git returned malformed version, throw error
+  if (!gitBaseVersion || gitBaseVersion === "0.0.0") {
+    throw new Error(
+      "Cannot determine git version. Make sure the script is run in a git repository with tags.",
+    );
+  }
+
+  // Compare git version with package.json version
+  if (semver.neq(gitBaseVersion, packageVersion)) {
+    throw new Error(
+      `Version mismatch: package.json version is ${packageVersion}, but git version is ${gitBaseVersion}`,
+    );
+  }
+
+  // Generate version file
+  const buildDate = new Date().toISOString();
+  writeFileSync(
+    versionFilePath,
+    `// Auto-generated version file - do not edit manually
+// Generated at: ${buildDate}
+
+export const VERSION = '${packageVersion}';
+export const IS_RELEASE = ${gitVersion === packageVersion};
+export const BUILD_TIME = '${buildDate}';
+`,
+  );
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  generateVersionFile("src/version.js");
+}

server.js

@@ -29,7 +29,7 @@ function encrypt(data, key) {
       tag: authTag.toString("hex"),
     };
   } catch (error) {
-    console.error("⚠️ Encryption exception:", {
+    console.error("Encryption exception:", {
       message: error.message,
       algorithm: "aes-256-gcm",
       keyLength: key ? key.length : "undefined",
@@ -56,7 +56,7 @@ function decrypt(encryptedObj, key) {
 
     return JSON.parse(decrypted);
   } catch (error) {
-    console.error("⚠️ Decryption exception:", {
+    console.error("Decryption exception:", {
       message: error.message,
       algorithm: "aes-256-gcm",
       keyLength: key ? key.length : "undefined",
@@ -100,7 +100,7 @@ function createApp(devMode = false) {
   if (devMode) {
     app.use((req, res, next) => {
       const timestamp = new Date().toISOString();
-      console.log(`📨 [${timestamp}] ${req.method} ${req.path}`);
+      console.log(`[${timestamp}] ${req.method} ${req.path}`);
       if (req.method !== "GET" && Object.keys(req.body).length > 0) {
         const bodySize = Buffer.byteLength(JSON.stringify(req.body), "utf8");
         console.log(`   Request body size: ${(bodySize / 1024).toFixed(2)}KB`);
@@ -108,7 +108,7 @@ function createApp(devMode = false) {
 
       const originalJson = res.json;
       res.json = function (data) {
-        console.log(`   ✓ Response: ${res.statusCode}`);
+        console.log(`   Response: ${res.statusCode}`);
         return originalJson.call(this, data);
       };
       next();
@@ -125,7 +125,7 @@ function createApp(devMode = false) {
       if (now - session.createdAt > MAX_SESSION_TTL) {
         sessions.delete(sessionId);
         console.log(
-          `🧹 Cleaned up expired session: ${sessionId.substring(0, 8)}...`,
+          `Cleaned up expired session: ${sessionId.substring(0, 8)}...`,
         );
       }
     }
@@ -192,16 +192,12 @@ function createApp(devMode = false) {
       });
 
       console.log(
-        `📁 Session created: ${sessionId.substring(0, 8)}... (${sessions.size}/${MAX_SESSIONS})`,
+        `Session created: ${sessionId.substring(0, 8)}... (${sessions.size}/${MAX_SESSIONS})`,
       );
 
-      res.json({
+      res.json({  message: "OK" });
-        message: "Sample data uploaded successfully",
-        state: stateGuid,
-        sessionId: sessionId.substring(0, 8) + "...",
-      });
     } catch (error) {
-      console.error("⚠️ Upload endpoint exception occurred:", {
+      console.error("Upload endpoint exception occurred:", {
         message: error.message,
         stack: error.stack,
         sessionCount: sessions.size,
@@ -261,12 +257,12 @@ function createApp(devMode = false) {
       // Remove session after first access (one-time use)
       sessions.delete(sessionId);
       console.log(
-        `📤 Sample data retrieved and session cleared: ${sessionId.substring(0, 8)}...`,
+        `Sample data retrieved and session cleared: ${sessionId.substring(0, 8)}...`,
       );
 
       res.json(decryptedData);
     } catch (error) {
-      console.error("⚠️ Sample retrieval exception occurred:", {
+      console.error("Sample retrieval exception occurred:", {
         message: error.message,
         stack: error.stack,
         sessionCount: sessions.size,
@@ -322,7 +318,7 @@ function createApp(devMode = false) {
 
       res.json({ state: session.state });
     } catch (error) {
-      console.error("⚠️ State retrieval exception occurred:", {
+      console.error("State retrieval exception occurred:", {
         message: error.message,
         stack: error.stack,
         sessionCount: sessions.size,
@@ -406,7 +402,7 @@ if (require.main === module) {
   app.listen(PORT, HOST, () => {
     console.log(`JMESPath Playground Server running`);
     if (DEV_MODE) {
-      console.log(`   🔧 Development Mode Enabled`);
+      console.log("   Development Mode Enabled");
     }
 
     // Show actual accessible URLs

src/App.css

@@ -1,318 +1,46 @@
-/* JMESPath Testing Tool Custom Styles */
+/* JMESPath Testing Tool - Minimal Styles */
 
 :root {
-  /* Common variables */
+  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-  --accent-color: #007bff;
+    "Helvetica Neue", sans-serif;
-  
+  --font-mono: "JetBrains Mono", "Fira Code", "Noto Sans Mono", "Consolas", "Monaco", "Courier New", monospace;
-  /* Brand colors */
-  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --brand-white: #ffffff;
-  --brand-dark: #212529;
-  --brand-warning: #ffc107;
-  
-  /* Brand opacity levels */
-  --brand-white-60: rgba(255, 255, 255, 0.6);
-  --brand-white-10: rgba(255, 255, 255, 0.1);
-  --brand-warning-50: rgba(255, 193, 7, 0.5);
-  --brand-warning-10: rgba(255, 193, 7, 0.1);
-
-  /* Elevation and overlays */
-  --shadow-light: rgba(0, 0, 0, 0.1);
-  --focus-ring: rgba(0, 123, 255, 0.25);
-
-  /* Button variants */
-  --btn-success: #28a745;
-  --btn-info: #17a2b8;
-  --btn-primary: #007bff;
-  --btn-danger: #dc3545;
-  --btn-secondary: #6c757d;
-
-  /* Common transitions */
-  --transition-fast: 0.2s ease;
-  --transition-normal: 0.3s ease;
-
-  /* Font families */
-  --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --font-mono: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
 }
 
-/* Base font family */
 body {
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transition: background-color var(--transition-normal), color var(--transition-normal);
+  margin: 0;
-}
-
-/* Layout structure */
-.vh-100 {
-  height: 100vh;
-}
-
-/* Header section styling - more compact */
-.header-section {
-  background: var(--brand-gradient);
-  color: var(--brand-white);
-  padding: 1.2rem 0;
-  margin-bottom: 1rem;
   transition: background-color 0.3s ease;
 }
 
-.header-section h2 {
+#root {
-  color: var(--brand-white);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
-/* Ensure buttons in header are clearly visible against gradient */
+/* Scrollbar styling for a cleaner look */
-.header-section .btn-light.active {
+::-webkit-scrollbar {
-  background-color: var(--brand-white);
+  width: 8px;
-  color: var(--brand-dark) !important; /* Deep dark text for selected states */
+  height: 8px;
-  border-color: var(--brand-white);
 }
 
-.header-section .btn-outline-light {
+::-webkit-scrollbar-track {
-  color: var(--brand-white);
+  background: transparent;
-  border-color: var(--brand-white-60);
 }
 
-.header-section .btn-outline-light:hover {
+::-webkit-scrollbar-thumb {
-  background-color: var(--brand-white-10);
+  background: rgba(0, 0, 0, 0.1);
-  color: var(--brand-white);
+  border-radius: 4px;
 }
 
-.header-section .btn-outline-warning {
+[data-mui-color-scheme="dark"] ::-webkit-scrollbar-thumb {
-  color: var(--brand-warning);
+  background: rgba(255, 255, 255, 0.1);
-  border-color: var(--brand-warning-50);
 }
 
-.header-section .btn-outline-warning:hover {
+::-webkit-scrollbar-thumb:hover {
-  background-color: var(--brand-warning-10);
+  background: rgba(0, 0, 0, 0.2);
-  color: var(--brand-warning);
-}
-
-/* Custom card styling */
-.card {
-  border: none;
-  box-shadow: 0 2px 8px var(--shadow-light);
-  border-radius: 8px;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card-header {
-  background-color: var(--bg-secondary);
-  border-bottom: 2px solid var(--border);
-  font-weight: 600;
-  color: var(--text-primary);
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
-}
-
-/* Input and textarea styling */
-.jmespath-input, .json-input, .result-output {
-  font-family: var(--font-mono);
-  font-weight: 400;
-  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
-}
-
-.jmespath-input {
-  font-size: 14px;
-  padding: 10px;
-}
-
-.json-input, .result-output {
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-/* Button styling */
-.btn {
-  transition: all var(--transition-fast);
-}
-
-.btn:hover {
-  transform: translateY(-1px);
-}
-
-/* Footer styling */
-footer {
-  flex-shrink: 0;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .header-section {
-    padding: 1.5rem 0 !important;
-  }
-
-  .display-4 {
-    font-size: 2rem;
-  }
-
-  .lead {
-    font-size: 1rem;
-  }
-
-  .btn-sm {
-    font-size: 0.8rem;
-    padding: 0.25rem 0.5rem;
-  }
-
-  .card-body textarea {
-    min-height: 300px !important;
-  }
-}
-
-/* Bootstrap theme integration */
-[data-bs-theme="light"] {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8f9fa;
-  --text-primary: #212529;
-  --text-secondary: #495057;
-  --text-muted: #6c757d;
-  --border: #dee2e6;
-  --border-input: #ced4da;
-  
-  --success-bg: #d4edda;
-  --success-border: #c3e6cb;
-  --success-text: #155724;
-  
-  --error-bg: #f8d7da;
-  --error-border: #f5c6cb;
-  --error-text: #721c24;
-}
-
-[data-bs-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2d2d2d;
-  --bg-card: #323232;
-  --text-primary: #ffffff;
-  --text-secondary: #e9ecef;
-  --text-muted: #adb5bd;
-  --border: #495057;
-  --border-input: #6c757d;
-  
-  --success-bg: #1e4a1e;
-  --success-border: #2c6d2c;
-  --success-text: #d4edda;
-  
-  --error-bg: #4a1e1e;
-  --error-border: #6d2c2c;
-  --error-text: #f8d7da;
-}
-
-/* Apply theme colors */
-body {
-  background-color: var(--bg-primary);
-  color: var(--text-secondary);
-}
-
-.card {
-  background-color: var(--bg-primary);
-  border-color: var(--border);
-  color: var(--text-primary);
-}
-
-.card-header {
-  background-color: var(--bg-secondary);
-  border-bottom-color: var(--border);
-  color: var(--text-primary);
-}
-
-.jmespath-input {
-  background-color: var(--bg-primary);
-  border-color: var(--border-input);
-  color: var(--text-secondary);
-}
-
-.json-input, .result-output {
-  background-color: var(--bg-secondary);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
-
-footer {
-  background-color: var(--bg-secondary);
-  color: var(--text-secondary);
-}
-
-footer.bg-light {
-  background-color: var(--bg-secondary) !important;
-}
-
-footer a {
-  color: var(--text-muted);
-}
-
-footer a:hover {
-  color: var(--text-secondary);
-}
-
-/* State styles */
-.jmespath-input.success {
-  background-color: var(--success-bg) !important;
-  border-color: var(--success-border) !important;
-  color: var(--success-text) !important;
-}
-
-.jmespath-input.error {
-  background-color: var(--error-bg) !important;
-  border-color: var(--error-border) !important;
-  color: var(--error-text) !important;
-}
-
-.json-input.success {
-  background-color: var(--success-bg) !important;
-  border-color: var(--success-border) !important;
-  color: var(--success-text) !important;
-}
-
-.json-input.error {
-  background-color: var(--error-bg) !important;
-  border-color: var(--error-border) !important;
-  color: var(--error-text) !important;
-}
-
-/* Focus states */
-.jmespath-input:focus {
-  border-color: var(--accent-color, #007bff);
-  box-shadow: 0 0 0 0.2rem var(--focus-ring);
-}
-
-.json-input:focus,
-.result-output:focus {
-  background-color: var(--bg-primary);
-  border-color: var(--accent-color, #007bff);
-  color: var(--text-secondary);
-  box-shadow: 0 0 0 0.2rem var(--focus-ring);
-}
-
-/* Placeholder colors */
-.jmespath-input::placeholder,
-.json-input::placeholder,
-.result-output::placeholder {
-  color: var(--text-muted);
-}
-
-/* Alert styles */
-.alert-danger {
-  background-color: var(--error-bg);
-  border-color: var(--error-border);
-  color: var(--error-text);
-}
-
-.alert-success {
-  background-color: var(--success-bg);
-  border-color: var(--success-border);
-  color: var(--success-text);
-}
-
-/* Code block styles */
-pre.bg-light {
-  background-color: var(--bg-secondary) !important;
-  color: var(--text-secondary) !important;
-  border-color: var(--border) !important;
-}
-
-code {
-  color: var(--text-secondary);
 }
 

src/App.jsx

@@ -1,4 +1,9 @@
 import React, { useState, useEffect } from "react";
+import {
+  CssBaseline,
+  Box,
+  useColorScheme,
+} from "@mui/material";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MainPage from "./components/MainPage";
@@ -65,41 +70,19 @@ function App() {
     return newKey;
   });
 
-  // Theme management
+  const getApiHeaders = () => ({
-  useEffect(() => {
+    "Accept": "application/json",
-    const applyTheme = (selectedTheme) => {
+    "x-api-key": apiKey,
-      const effectiveTheme =
+  });
-        selectedTheme === "auto"
-          ? window.matchMedia &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light"
-          : selectedTheme;
 
-      document.documentElement.setAttribute("data-bs-theme", effectiveTheme);
+  const { setMode } = useColorScheme();
-    };
-
-    applyTheme(theme);
-
-    // Save theme preference
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  // Shell type management
-  useEffect(() => {
-    localStorage.setItem("jmespath-shell-type", shellType);
-  }, [shellType]);
-
-  // Get headers for API requests
-  const getApiHeaders = () => {
-    return {
-      Accept: "application/json",
-      "X-API-Key": apiKey,
-    };
-  };
 
   // Load sample data from API on startup and setup periodic state checking
   useEffect(() => {
+    // Sync initial theme from localStorage with MUI color scheme
+    const initialMode = theme === 'auto' ? 'system' : theme;
+    setMode(initialMode);
+    
     loadSampleData();
 
     // Check for state changes every 5 seconds
@@ -165,48 +148,73 @@ function App() {
 
   const handleThemeChange = (newTheme) => {
     setTheme(newTheme);
+    const muiMode = newTheme === "auto" ? "system" : newTheme;
+    setMode(muiMode);
+    localStorage.setItem("theme", newTheme);
   };
 
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
   };
 
+  const handleShellTypeChange = (newShellType) => {
+    setShellType(newShellType);
+    localStorage.setItem("jmespath-shell-type", newShellType);
+  };
+
   return (
-    <div className="vh-100 d-flex flex-column">
+    <>
-      <Header
+      <CssBaseline />
-        theme={theme}
+      <Box
-        onThemeChange={handleThemeChange}
+        sx={{
-        currentPage={currentPage}
+          display: "flex",
-        onPageChange={handlePageChange}
+          flexDirection: "column",
-      />
+          height: "100vh",
-
+          overflow: "hidden",
-      {/* Main Content Section - flex-grow to fill space */}
+          bgcolor: "background.default",
-      <div
+        }}
-        className="container-fluid flex-grow-1 d-flex flex-column"
-        style={{ minHeight: 0 }}
       >
-        {currentPage === "main" ? (
+        <Header
-          <MainPage
+          theme={theme}
-            apiKey={apiKey}
+          onThemeChange={handleThemeChange}
-            showReloadButton={showReloadButton}
+          currentPage={currentPage}
-            onReloadSampleData={loadSampleData}
+          onPageChange={handlePageChange}
-            jmespathExpression={jmespathExpression}
+        />
-            setJmespathExpression={setJmespathExpression}
-            jsonData={jsonData}
-            setJsonData={setJsonData}
-          />
-        ) : (
-          <ApiKeyPage
-            apiKey={apiKey}
-            onRegenerateApiKey={regenerateApiKey}
-            shellType={shellType}
-            onShellTypeChange={setShellType}
-          />
-        )}
-      </div>
 
-      <Footer />
+        {/* Main Content Section - flex-grow to fill space */}
-    </div>
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            height: "100%", // Force height for children
+          }}
+        >
+          {currentPage === "main" ? (
+            <MainPage
+              apiKey={apiKey}
+              showReloadButton={showReloadButton}
+              onReloadSampleData={loadSampleData}
+              jmespathExpression={jmespathExpression}
+              setJmespathExpression={setJmespathExpression}
+              jsonData={jsonData}
+              setJsonData={setJsonData}
+            />
+          ) : (
+            <ApiKeyPage
+              apiKey={apiKey}
+              onRegenerateApiKey={regenerateApiKey}
+              shellType={shellType}
+              onShellTypeChange={handleShellTypeChange}
+            />
+          )}
+        </Box>
+
+        <Footer />
+      </Box>
+    </>
   );
 }
 

src/App.test.jsx

@@ -49,7 +49,7 @@ describe('App Component', () => {
   describe('Basic Rendering', () => {
     test('renders JMESPath Testing Tool title', () => {
       render(<App />);
-      const titleElement = screen.getByRole('heading', { name: /JMESPath Testing Tool/i });
+      const titleElement = screen.getByText(/JMESPath Playground/i);
       expect(titleElement).toBeInTheDocument();
     });
 
@@ -90,11 +90,11 @@ describe('App Component', () => {
 
     test('renders all toolbar buttons', () => {
       render(<App />);
-      expect(screen.getByTitle('Load JSON object from file')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Load from Disk/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Load JSON Lines log file')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Load Logs/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Load sample data')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Load Sample/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Format JSON')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Format/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Clear all inputs')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Clear all inputs/i })).toBeInTheDocument();
     });
   });
 
@@ -108,7 +108,7 @@ describe('App Component', () => {
       const resultArea = screen.getByPlaceholderText(/Results will appear here/i);
 
       // Clear all inputs first to start fresh
-      const clearButton = screen.getByTitle('Clear all inputs');
+      const clearButton = screen.getByRole('button', { name: /Clear all inputs/i });
       await user.click(clearButton);
 
       // Set JSON data directly after clearing
@@ -153,7 +153,7 @@ describe('App Component', () => {
       const jsonInput = screen.getByPlaceholderText(/Enter JSON data here/i);
 
       // Clear all inputs first
-      const clearButton = screen.getByTitle('Clear all inputs');
+      const clearButton = screen.getByRole('button', { name: /Clear all inputs/i });
       await user.click(clearButton);
 
       // Set invalid JSON directly
@@ -187,31 +187,55 @@ describe('App Component', () => {
     test('renders theme switcher buttons', () => {
       render(<App />);
 
-      expect(screen.getByTitle('Auto (follow system)')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Auto/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Light theme')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Light/i })).toBeInTheDocument();
-      expect(screen.getByTitle('Dark theme')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Dark/i })).toBeInTheDocument();
     });
 
     test('switches to light theme when clicked', async () => {
       const user = userEvent.setup();
       render(<App />);
 
-      const lightButton = screen.getByTitle('Light theme');
+      const lightButton = screen.getByRole('button', { name: /Light/i });
       await user.click(lightButton);
 
       // Check if button becomes active
-      expect(lightButton).toHaveClass('btn-primary');
+      expect(lightButton).toHaveClass('Mui-selected');
     });
 
     test('switches to dark theme when clicked', async () => {
       const user = userEvent.setup();
       render(<App />);
 
-      const darkButton = screen.getByTitle('Dark theme');
+      const darkButton = screen.getByRole('button', { name: /Dark/i });
       await user.click(darkButton);
 
       // Check if button becomes active
-      expect(darkButton).toHaveClass('btn-primary');
+      expect(darkButton).toHaveClass('Mui-selected');
+    });
+  });
+
+  describe('Navigation', () => {
+    test('switches to API Keys page and back', async () => {
+      const user = userEvent.setup();
+      render(<App />);
+
+      // Find and click API Keys button in Header
+      // MUI Tooltip might set aria-label to title "API Key Management"
+      const apiKeyButton = screen.getByRole('button', { name: /API Key Management/i });
+      await user.click(apiKeyButton);
+
+      // Check if API Key Management title is visible
+      expect(screen.getByText(/API Key Management/i)).toBeInTheDocument();
+      expect(screen.getByText(/YOUR API KEY/i)).toBeInTheDocument();
+
+      // Find and click Home button to go back
+      // MUI Tooltip title "Back to Testing" becomes the accessible name
+      const homeButton = screen.getByRole('button', { name: /Back to Testing/i });
+      await user.click(homeButton);
+
+      // Check if we are back on main page
+      expect(screen.getByRole('heading', { name: /JMESPath Expression/i })).toBeInTheDocument();
     });
   });
 
@@ -222,7 +246,7 @@ describe('App Component', () => {
 
       const jmespathInput = screen.getByPlaceholderText(/Enter JMESPath expression/i);
       const jsonInput = screen.getByPlaceholderText(/Enter JSON data here/i);
-      const clearButton = screen.getByTitle('Clear all inputs');
+      const clearButton = screen.getByRole('button', { name: /Clear all inputs/i });
 
       // Add some content
       await user.type(jmespathInput, 'test.expression');
@@ -241,7 +265,7 @@ describe('App Component', () => {
       render(<App />);
 
       const jsonInput = screen.getByPlaceholderText(/Enter JSON data here/i);
-      const formatButton = screen.getByTitle('Format JSON');
+      const formatButton = screen.getByRole('button', { name: "Format" });
 
       // Add minified JSON directly
       fireEvent.change(jsonInput, { target: { value: '{"name":"Alice","age":30,"skills":["React","Node"]}' } });
@@ -260,7 +284,7 @@ describe('App Component', () => {
       const user = userEvent.setup();
       render(<App />);
 
-      const loadSampleButton = screen.getByTitle('Load sample data');
+      const loadSampleButton = screen.getByRole('button', { name: "Load Sample" });
       const jsonInput = screen.getByPlaceholderText(/Enter JSON data here/i);
       const jmespathInput = screen.getByPlaceholderText(/Enter JMESPath expression/i);
 
@@ -331,7 +355,7 @@ describe('App Component', () => {
       const user = userEvent.setup();
       render(<App />);
 
-      const loadObjectButton = screen.getByTitle('Load JSON object from file');
+      const loadObjectButton = screen.getByRole('button', { name: "Load from Disk" });
 
       // Create a mock file
       const file = new File(['{"test": "file data"}'], 'test.json', {

src/components/ApiKeyPage.jsx

@@ -1,4 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  Paper,
+  TextField,
+  Button,
+  Grid,
+  Tooltip,
+  IconButton,
+  ToggleButtonGroup,
+  ToggleButton,
+  Divider,
+} from "@mui/material";
+import {
+  ContentCopy as ContentCopyIcon,
+  Autorenew as AutorenewIcon,
+  Check as CheckIcon,
+  Key as KeyIcon,
+} from "@mui/icons-material";
 
 function CodeBlock({ code }) {
   const [copySuccess, setCopySuccess] = useState(false);
@@ -9,28 +28,56 @@ function CodeBlock({ code }) {
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
     } catch (err) {
-      console.error('Failed to copy to clipboard:', err);
+      console.error("Failed to copy to clipboard:", err);
     }
   };
 
   return (
-    <div className="position-relative">
+    <Box sx={{ position: "relative", my: 2 }}>
-      <pre className="bg-light p-3 pe-5 rounded border shadow-sm">
+      <Paper
-        <code className="d-block" style={{ whiteSpace: 'pre-wrap' }}>{code}</code>
+        variant="outlined"
-      </pre>
+        sx={{
-      <button
+          p: 2,
-        className={`btn btn-sm ${copySuccess ? 'btn-success' : 'btn-outline-secondary'} position-absolute top-0 end-0 m-2`}
+          pr: 6,
-        onClick={handleCopy}
+          bgcolor: "action.hover",
-        title="Copy code to clipboard"
+          fontFamily: "'Noto Sans Mono', monospace",
-        style={{ opacity: 0.8 }}
+          fontSize: "0.85rem",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          position: "relative",
+          borderColor: "divider",
+        }}
       >
-        {copySuccess ? '✓' : '📋'}
+        <code>{code}</code>
-      </button>
+        <Tooltip title={copySuccess ? "Copied!" : "Copy code"}>
-    </div>
+          <IconButton
+            size="small"
+            onClick={handleCopy}
+            sx={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              color: copySuccess ? "success.main" : "primary.main",
+            }}
+          >
+            {copySuccess ? (
+              <CheckIcon fontSize="small" />
+            ) : (
+              <ContentCopyIcon fontSize="small" />
+            )}
+          </IconButton>
+        </Tooltip>
+      </Paper>
+    </Box>
   );
 }
 
-function ApiKeyPage({ apiKey, onRegenerateApiKey, shellType, onShellTypeChange }) {
+function ApiKeyPage({
+  apiKey,
+  onRegenerateApiKey,
+  shellType,
+  onShellTypeChange,
+}) {
   const [copySuccess, setCopySuccess] = useState(false);
 
   const handleCopyToClipboard = async () => {
@@ -39,108 +86,120 @@ function ApiKeyPage({ apiKey, onRegenerateApiKey, shellType, onShellTypeChange }
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
     } catch (err) {
-      console.error('Failed to copy to clipboard:', err);
+      console.error("Failed to copy to clipboard:", err);
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = apiKey;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-      setCopySuccess(true);
-      setTimeout(() => setCopySuccess(false), 2000);
     }
   };
 
   return (
-    <div className="row justify-content-center">
+    <Box sx={{ flexGrow: 1, py: 4, px: 2 }}>
-      <div className="col-md-8">
+      <Grid container justifyContent="center">
-        <div className="card">
+        <Grid size={{ xs: 12, md: 10, lg: 8 }}>
-          <div className="card-header">
+          <Paper elevation={1} sx={{ p: { xs: 3, md: 5 }, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>
-            <h5 className="mb-0">🔐 API Key Management</h5>
+            <Typography variant="h5" gutterBottom sx={{ mb: 4, fontWeight: 700, display: "flex", alignItems: "center", gap: 1.5, color: "text.primary" }}>
-          </div>
+              <KeyIcon color="primary" /> API Key Management
-          <div className="card-body">
+            </Typography>
-            <div className="mb-4">
+
-              <label className="form-label fw-bold">Your API Key:</label>
+            <Box sx={{ mb: 6 }}>
-              <div className="input-group">
+              <Typography variant="subtitle2" gutterBottom color="text.secondary">
-                <input
+                YOUR API KEY
-                  type="text"
+              </Typography>
-                  className="form-control font-monospace"
+              <Box sx={{ display: "flex", gap: 1.5, alignItems: "center" }}>
-                  value={apiKey}
+                <TextField
-                  readOnly
+                  fullWidth
-                />
+                  value={apiKey}
-                <button
+                  slotProps={{
-                  className={`btn ${copySuccess ? 'btn-success' : 'btn-outline-secondary'}`}
+                    input: {
-                  onClick={handleCopyToClipboard}
+                      readOnly: true,
-                  title="Copy API key to clipboard"
+                      style: { fontFamily: "'Noto Sans Mono', monospace", fontSize: "0.9rem" },
-                >
+                    },
-                  {copySuccess ? '✓ Copied!' : '📋 Copy'}
+                  }}
-                </button>
+                  variant="outlined"
-                <button
+                  sx={{ "& .MuiOutlinedInput-root": { bgcolor: "background.paper" } }}
-                  className="btn btn-outline-primary"
+                />
-                  onClick={onRegenerateApiKey}
+                <Tooltip title="Copy API Key">
-                  title="Generate new API key"
+                  <IconButton
-                >
+                    onClick={handleCopyToClipboard}
-                  🔄 Regenerate
+                    color={copySuccess ? "success" : "primary"}
-                </button>
+                    size="medium"
-              </div>
+                    sx={{ border: 1, borderColor: "divider" }}
-              <div className="form-text">
+                  >
-                This API key is used to encrypt and authenticate data uploads.
+                    {copySuccess ? <CheckIcon /> : <ContentCopyIcon />}
-              </div>
+                  </IconButton>
-            </div>
+                </Tooltip>
+                <Tooltip title="Regenerate Key">
+                  <IconButton
+                    onClick={onRegenerateApiKey}
+                    color="primary"
+                    size="medium"
+                    sx={{ border: 1, borderColor: "divider" }}
+                  >
+                    <AutorenewIcon />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <Typography variant="caption" color="text.secondary" sx={{ mt: 1.5, display: "block" }}>
+                This key is stored locally in your browser. Use it to authenticate remote data uploads.
+              </Typography>
+            </Box>
+
+            <Divider sx={{ my: 4, borderColor: "divider" }} />
+
+            <Box sx={{ mb: 4 }}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 3,
+                  flexWrap: "wrap",
+                  gap: 2,
+                }}
+              >
+                <Typography variant="h6" fontWeight="600" color="text.primary">Remote Upload API</Typography>
+
+                <ToggleButtonGroup
+                  size="small"
+                  value={shellType}
+                  exclusive
+                  onChange={(e, value) => value && onShellTypeChange(value)}
+                  aria-label="shell type"
+                  sx={{ "& .MuiToggleButton-root": { px: 2, py: 0.5 } }}
+                >
+                  <ToggleButton value="bash">UNIX (Bash)</ToggleButton>
+                  <ToggleButton value="powershell">Windows (PS)</ToggleButton>
+                </ToggleButtonGroup>
+              </Box>
+
+              <Typography variant="body2" color="text.secondary" paragraph>
+                Use this endpoint to upload data from external scripts. Set these environment variables:
+              </Typography>
 
-            <div className="mb-4">
-              <div className="d-flex justify-content-between align-items-center mb-2">
-                <h6 className="mb-0">📡 Remote Data Upload API</h6>
-                <div className="btn-group btn-group-sm" role="group" aria-label="Shell type selector">
-                  <input
-                    type="radio"
-                    className="btn-check"
-                    name="shellType"
-                    id="shellBash"
-                    autoComplete="off"
-                    checked={shellType === 'bash'}
-                    onChange={() => onShellTypeChange('bash')}
-                  />
-                  <label className="btn btn-outline-secondary" htmlFor="shellBash">UNIX (Bash)</label>
-                  <input
-                    type="radio"
-                    className="btn-check"
-                    name="shellType"
-                    id="shellPowerShell"
-                    autoComplete="off"
-                    checked={shellType === 'powershell'}
-                    onChange={() => onShellTypeChange('powershell')}
-                  />
-                  <label className="btn btn-outline-secondary" htmlFor="shellPowerShell">Windows (PowerShell)</label>
-                </div>
-              </div>
-              <p className="text-muted">
-                External tools can upload sample data remotely using the REST API.
-                The API key is required for authentication. Define two
-                environment variables in your {shellType === 'bash' ? <code>.bashrc</code> : <code>PowerShell profile</code>}.
-              </p>
               <CodeBlock
-                code={shellType === 'bash'
+                code={
-                  ? `export JMESPATH_PLAYGROUND_API_URL=${window.location.origin}\nexport JMESPATH_PLAYGROUND_API_KEY=${apiKey}`
+                  shellType === "bash"
-                  : `$env:JMESPATH_PLAYGROUND_API_URL = "${window.location.origin}"\n$env:JMESPATH_PLAYGROUND_API_KEY = "${apiKey}"`}
+                    ? `export JMESPATH_PLAYGROUND_API_URL="${window.location.origin}"\nexport JMESPATH_PLAYGROUND_API_KEY="${apiKey}"`
+                    : `$env:JMESPATH_PLAYGROUND_API_URL = "${window.location.origin}"\n$env:JMESPATH_PLAYGROUND_API_KEY = "${apiKey}"`
+                }
               />
-              <p className="text-muted">Then, use the following {shellType === 'bash' ? <code>curl</code> : <code>PowerShell</code>} command to upload your data:</p>
+
               <CodeBlock
-                code={shellType === 'bash'
+                code={
-                  ? `curl -s -X POST \\\n    -H "Content-Type: application/json" \\\n    -H "Accept: application/json" \\\n    -H "X-API-Key: $JMESPATH_PLAYGROUND_API_KEY" \\\n    --data @__JSON_FILE_NAME__ \\\n    "$JMESPATH_PLAYGROUND_API_URL/api/v1/upload"`
+                  shellType === "bash"
-                  : `Invoke-RestMethod -Uri "$env:JMESPATH_PLAYGROUND_API_URL/api/v1/upload" \\\n    -Method Post \\\n    -ContentType "application/json" \\\n    -Headers @{\n        "X-API-Key" = $env:JMESPATH_PLAYGROUND_API_KEY\n        "Accept" = "application/json"\n    } \\\n    -InFile __JSON_FILE_NAME__`}
+                    ? `curl -X POST "$JMESPATH_PLAYGROUND_API_URL/api/v1/upload" \\
+    -H "Accept: application/json" \\
+    -H "x-api-key: $JMESPATH_PLAYGROUND_API_KEY" \\
+    -d '{ "users": [ { "id": 1, "name": "Remote User" } ] }'`
+                    : `Invoke-RestMethod -Method Post -Uri "$env:JMESPATH_PLAYGROUND_API_URL/api/v1/upload" \`
+    -Headers @{ "Accept" = "application/json"; "x-api-key" = $env:JMESPATH_PLAYGROUND_API_KEY } \`
+    -Body '{ "users": [ { "id": 1, "name": "Remote User" } ] }'`
+                }
               />
-              <div className="form-text">
+            </Box>
-                Replace <code>{"__JSON_FILE_NAME__"}</code> with the path to your
+          </Paper>
-                JSON file containing the sample data. {shellType === 'bash' && <span>or use <code>-</code> to read from standard input.</span>}
+        </Grid>
-              </div>
+      </Grid>
-            </div>
+    </Box>
-          </div>
-        </div>
-      </div>
-    </div>
   );
 }
 
-export default ApiKeyPage;
+export default ApiKeyPage;

src/components/Footer.jsx

@@ -1,28 +1,58 @@
-import React from 'react';
+import React from "react";
-import { VERSION } from '../version';
+import { Box, Typography, Container, Link, Grid } from "@mui/material";
+import { IS_RELEASE, VERSION } from "../version";
 
 function Footer() {
   return (
-    <footer className="bg-light border-top mt-2 py-2 flex-shrink-0">
+    <Box
-      <div className="container">
+      component="footer"
-        <div className="row">
+      sx={{
-          <div className="col-md-6">
+        py: 1,
-            <p className="mb-0 text-muted small">
+        borderTop: 1,
-              <strong>JMESPath Testing Tool</strong> {VERSION === 'unknown' ? VERSION : `v${VERSION}`} - Created for testing and validating JMESPath expressions
+        borderColor: "divider",
-            </p>
+        bgcolor: "background.paper",
-          </div>
+        flexShrink: 0,
-          <div className="col-md-6 text-md-end">
+      }}
-            <p className="mb-0 text-muted small">
+    >
-              Licensed under <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer" className="text-decoration-none">MIT License</a> |
+      <Container maxWidth="xl">
-              <a href="https://jmespath.org/" target="_blank" rel="noopener noreferrer" className="text-decoration-none ms-2">
+        <Grid container spacing={2} alignItems="center">
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Typography variant="body2" color="text.secondary">
+              <strong>JMESPath Testing Tool</strong>{" "}
+              {IS_RELEASE ? VERSION : `${VERSION}-dev`} - Created for
+              testing and validating JMESPath expressions
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12, md: 6 }} sx={{ textAlign: { md: "right" } }}>
+            <Typography variant="body2" color="text.secondary">
+              Licensed under{" "}
+              <Link
+                href="https://opensource.org/licenses/MIT"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="primary"
+                underline="hover"
+                sx={{ fontWeight: 500 }}
+              >
+                MIT License
+              </Link>{" "}
+              |{" "}
+              <Link
+                href="https://jmespath.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="primary"
+                underline="hover"
+                sx={{ ml: 1, fontWeight: 500 }}
+              >
                 Learn JMESPath
-              </a>
+              </Link>
-            </p>
+            </Typography>
-          </div>
+          </Grid>
-        </div>
+        </Grid>
-      </div>
+      </Container>
-    </footer>
+    </Box>
   );
 }
 
-export default Footer;
+export default Footer;

src/components/Header.jsx

@@ -1,72 +1,89 @@
-import React from 'react';
+import React from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  AppBar,
+  Toolbar,
+  Container,
+  Divider,
+} from "@mui/material";
+import KeyIcon from "@mui/icons-material/Key";
+import HomeIcon from "@mui/icons-material/Home";
+import BrightnessAutoIcon from "@mui/icons-material/BrightnessAuto";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
 
 function Header({ theme, onThemeChange, currentPage, onPageChange }) {
   return (
-    <div className="header-section">
+    <AppBar position="static" color="default" elevation={1} sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <div className="container-fluid px-4">
+      <Container maxWidth="xl">
-        <div className="row align-items-center">
+        <Toolbar disableGutters sx={{ display: "flex", justifyContent: "space-between", height: 64 }}>
-          <div className="col-12 text-center position-relative">
+          {/* Brand/Title */}
-            <h2 className="mb-1">JMESPath Testing Tool</h2>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
-            {/* Right side controls - better positioning */}
+            <Typography
-            <div className="position-absolute top-50 end-0 translate-middle-y d-flex align-items-center gap-2 me-4">
+              variant="h5"
-              {/* API Key Management Button - more prominent */}
+              noWrap
-              <button
+              component="div"
-                type="button"
+              sx={{
-                className={`btn btn-sm ${
+                fontWeight: 700,
-                  currentPage === 'apikey' 
+                color: "primary.main",
-                    ? 'btn-warning fw-bold text-dark' 
+                letterSpacing: ".05rem",
-                    : 'btn-outline-warning'
+              }}
-                }`}
+            >
-                onClick={() => onPageChange(currentPage === 'main' ? 'apikey' : 'main')}
+              JMESPath Playground
-                title="API Key Management"
+            </Typography>
+          </Box>
+
+          {/* Right side controls */}
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            {/* API Key Management Button */}
+            <Tooltip title={currentPage === "main" ? "API Key Management" : "Back to Testing"}>
+              <Button
+                variant={currentPage === "apikey" ? "contained" : "text"}
+                color={currentPage === "apikey" ? "primary" : "primary"}
+                size="medium"
+                startIcon={currentPage === "main" ? <KeyIcon /> : <HomeIcon />}
+                onClick={() => onPageChange(currentPage === "main" ? "apikey" : "main")}
               >
-                🔐 API Keys
+                {currentPage === "main" ? "API Keys" : "Home"}
-              </button>
+              </Button>
-              {/* Theme switcher with theme-aware classes */}
+            </Tooltip>
-              <div className="btn-group btn-group-sm" role="group" aria-label="Theme switcher">
+
-                <button
+            <Divider orientation="vertical" flexItem sx={{ my: 2, mx: 1 }} />
-                  type="button"
+
-                  className={`btn ${
+            {/* Theme switcher */}
-                    theme === 'auto' 
+            <ToggleButtonGroup
-                      ? 'btn-light active' 
+              value={theme}
-                      : 'btn-outline-light'
+              exclusive
-                  }`}
+              onChange={(e, nextTheme) => nextTheme && onThemeChange(nextTheme)}
-                  onClick={() => onThemeChange('auto')}
+              aria-label="theme switcher"
-                  title="Auto (follow system)"
+              size="small"
-                >
+            >
-                  🌓 Auto
+              <Tooltip title="Follow system theme">
-                </button>
+                <ToggleButton value="auto" aria-label="Auto">
-                <button
+                  <BrightnessAutoIcon sx={{ fontSize: "1.2rem" }} />
-                  type="button"
+                </ToggleButton>
-                  className={`btn ${
+              </Tooltip>
-                    theme === 'light' 
+              <Tooltip title="Light mode">
-                      ? 'btn-light active' 
+                <ToggleButton value="light" aria-label="Light">
-                      : 'btn-outline-light'
+                  <LightModeIcon sx={{ fontSize: "1.2rem" }} />
-                  }`}
+                </ToggleButton>
-                  onClick={() => onThemeChange('light')}
+              </Tooltip>
-                  title="Light theme"
+              <Tooltip title="Dark mode">
-                >
+                <ToggleButton value="dark" aria-label="Dark">
-                  ☀️ Light
+                  <DarkModeIcon sx={{ fontSize: "1.2rem" }} />
-                </button>
+                </ToggleButton>
-                <button
+              </Tooltip>
-                  type="button"
+            </ToggleButtonGroup>
-                  className={`btn ${
+          </Box>
-                    theme === 'dark' 
+        </Toolbar>
-                      ? 'btn-light active' 
+      </Container>
-                      : 'btn-outline-light'
+    </AppBar>
-                  }`}
-                  onClick={() => onThemeChange('dark')}
-                  title="Dark theme"
-                >
-                  🌙 Dark
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   );
 }
 
-export default Header;
+export default Header;

src/components/MainPage.jsx

@@ -1,4 +1,31 @@
 import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Typography,
+  Paper,
+  TextField,
+  Button,
+  Tooltip,
+  IconButton,
+  Alert,
+  Stack,
+  Divider,
+} from "@mui/material";
+import {
+  Search as SearchIcon,
+  DataObject as DataObjectIcon,
+  Output as OutputIcon,
+  UploadFile as UploadFileIcon,
+  FileOpen as FileOpenIcon,
+  Restore as RestoreIcon,
+  FormatAlignLeft as FormatAlignLeftIcon,
+  Clear as ClearIcon,
+  ContentCopy as ContentCopyIcon,
+  Download as DownloadIcon,
+  Check as CheckIcon,
+  Refresh as RefreshIcon,
+} from "@mui/icons-material";
+import Grid from "@mui/material/Grid";
 import jmespath from "jmespath";
 
 function MainPage({
@@ -160,173 +187,347 @@ function MainPage({
   };
 
   return (
-    <>
+    <Box
-      {/* Description paragraph */}
+      sx={{
-      <div className="row mb-2">
+        flexGrow: 1,
-        <div className="col-12">
+        pt: 1,
-          <p className="text-muted text-center mb-2 small">
+        pb: 3,
-            Validate and test JMESPath expressions against JSON data in
+        px: { xs: 2, md: 4 },
-            real-time. Enter your JMESPath query and JSON data below to see the
+        display: "flex",
-            results instantly.
+        flexDirection: "column",
-          </p>
+        minHeight: 0,
-        </div>
+        overflow: "hidden",
-      </div>
+      }}
+    >
+      <Box sx={{ mb: 2, flexShrink: 0 }}>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          align="left"
+          mt="1rem"
+        >
+          Validate and test JMESPath expressions against JSON data in real-time.
+          Enter your JMESPath query and JSON data below to see the results
+          instantly.
+        </Typography>
+      </Box>
 
-      {/* Middle Section: JMESPath Expression Input */}
+      <Paper
-      <div className="row mb-2">
+        sx={{
-        <div className="col-12">
+          flexShrink: 0,
-          <div className="card">
+          bgcolor: "background.paper",
-            <div className="card-header py-2">
+          border: 1,
-              <h6 className="mb-0">
+          borderColor: "divider",
-                <i className="bi bi-search me-2"></i>
+          overflow: "hidden",
-                JMESPath Expression
+          mb: 2
-              </h6>
+        }}
-            </div>
+      >
-            <div className="card-body">
+        <Box
-              <input
+          sx={{
-                type="text"
+            px: 2,
-                className={`form-control jmespath-input ${error ? "error" : "success"}`}
+            py: 1,
-                value={jmespathExpression}
+            bgcolor: "action.hover",
-                onChange={handleJmespathChange}
+            borderBottom: 1,
-                placeholder="Enter JMESPath expression (e.g., people[*].name)"
+            borderColor: "divider",
-              />
+            display: "flex",
-              <div
+            alignItems: "center",
-                className={`alert mt-2 mb-0 d-flex justify-content-between align-items-center ${error ? "alert-danger" : "alert-success"}`}
+            justifyContent: "space-between",
-              >
+          }}
-                <small className="mb-0">
+        >
-                  {error || "Expression is correct"}
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                </small>
+            <SearchIcon sx={{ fontSize: 20 }} color="primary" />
-                {showReloadButton && (
+            <Typography variant="subtitle2" color="text.primary">
-                  <button
+              JMESPath Expression
-                    className="btn btn-light btn-sm ms-2 border"
+            </Typography>
-                    onClick={() => {
+          </Box>
-                      onReloadSampleData();
+        </Box>
-                    }}
+        <Box sx={{ p: 1.5, mt: 0.5 }}>
-                    title="New sample data is available"
+          <TextField
-                  >
+            fullWidth
-                    <i className="bi bi-arrow-clockwise me-1"></i>
+            size="small"
-                    Reload Sample Data
+            placeholder="Enter JMESPath expression (e.g., people[*].name)"
-                  </button>
+            value={jmespathExpression}
-                )}
+            onChange={handleJmespathChange}
-              </div>
+            error={!!error}
-            </div>
+            helperText={error || " "}
-          </div>
+            sx={{
-        </div>
+              "& .MuiInputBase-root": {
-      </div>
+                fontFamily: "'Noto Sans Mono', monospace",
+                fontSize: "0.9rem",
+              },
+              "& .MuiFormHelperText-root": {
+                mt: 0.75,
+                mb: -0.5,
+              },
+            }}
+          />
+        </Box>
+      </Paper>
 
-      {/* Lower Middle Section: Input and Output Areas */}
+      <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>
-      <div className="row flex-grow-1" style={{ minHeight: 0 }}>
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
-        {/* Left Panel: JSON Data Input */}
+          <Paper
-        <div className="col-md-6">
+            sx={{
-          <div className="card h-100 d-flex flex-column">
+              flexGrow: 1,
-            <div className="card-header d-flex justify-content-between align-items-center py-2">
+              display: "flex",
-              <h6 className="mb-0">
+              flexDirection: "column",
-                <i className="bi bi-file-earmark-code me-2"></i>
+              overflow: "hidden",
-                JSON Data
+              bgcolor: "background.paper",
-              </h6>
+              border: 1,
-              <div>
+              borderColor: "divider",
-                <button
+              minHeight: 0,
-                  className="btn btn-outline-success btn-sm me-2"
+            }}
-                  onClick={loadFromDisk}
+          >
-                  title="Load JSON object from file"
+            <Box
-                >
+              sx={{
-                  📄 Load an Object
+                px: 2,
-                </button>
+                py: 1,
-                <button
+                bgcolor: "action.hover",
-                  className="btn btn-outline-info btn-sm me-2"
+                borderBottom: 1,
-                  onClick={loadLogFile}
+                borderColor: "divider",
-                  title="Load JSON Lines log file"
+                display: "flex",
-                >
+                justifyContent: "space-between",
-                  📋 Load a Log File
+                alignItems: "center",
-                </button>
+              }}
-                <button
-                  className="btn btn-outline-primary btn-sm me-2"
-                  onClick={loadSample}
-                  title="Load sample data"
-                >
-                  Load Sample
-                </button>
-                <button
-                  className="btn btn-outline-secondary btn-sm me-2"
-                  onClick={formatJson}
-                  title="Format JSON"
-                >
-                  Format JSON
-                </button>
-                <button
-                  className="btn btn-outline-danger btn-sm"
-                  onClick={clearAll}
-                  title="Clear all inputs"
-                >
-                  Clear All
-                </button>
-              </div>
-            </div>
-            <div
-              className="card-body flex-grow-1 d-flex flex-column"
-              style={{ minHeight: 0 }}
             >
-              <textarea
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                className={`form-control json-input flex-grow-1 ${jsonError ? "error" : "success"}`}
+                <DataObjectIcon sx={{ fontSize: 20 }} color="primary" />
+                <Typography variant="subtitle2" color="text.primary">
+                  JSON Input
+                </Typography>
+                {showReloadButton && (
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    onClick={onReloadSampleData}
+                    startIcon={<RefreshIcon fontSize="inherit" />}
+                    size="small"
+                    sx={{
+                      ml: 1,
+                      px: 1,
+                      py: 0.25,
+                      fontSize: "0.65rem",
+                      textTransform: "none",
+                      whiteSpace: "nowrap",
+                      minWidth: "auto",
+                    }}
+                  >
+                    Reload data
+                  </Button>
+                )}
+              </Box>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Tooltip title="Load from Disk">
+                  <IconButton
+                    size="small"
+                    onClick={loadFromDisk}
+                    color="primary"
+                    aria-label="Load from Disk"
+                  >
+                    <FileOpenIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Load Logs">
+                  <IconButton
+                    size="small"
+                    onClick={loadLogFile}
+                    color="primary"
+                    aria-label="Load Logs"
+                  >
+                    <UploadFileIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Load Sample">
+                  <IconButton
+                    size="small"
+                    onClick={loadSample}
+                    color="primary"
+                    aria-label="Load Sample"
+                  >
+                    <RestoreIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Format">
+                  <IconButton
+                    size="small"
+                    onClick={formatJson}
+                    color="primary"
+                    aria-label="Format"
+                  >
+                    <FormatAlignLeftIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+                <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+                <Tooltip title="Clear all inputs">
+                  <IconButton
+                    size="small"
+                    onClick={clearAll}
+                    color="secondary"
+                    aria-label="Clear all inputs"
+                  >
+                    <ClearIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Stack>
+            </Box>
+            <Box sx={{ p: 2, flex: "1 1 0", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
+              <TextField
+                multiline
+                fullWidth
                 value={jsonData}
                 onChange={handleJsonChange}
                 placeholder="Enter JSON data here..."
-                style={{ minHeight: 0, resize: "none" }}
+                variant="standard"
+                slotProps={{
+                  input: {
+                    disableUnderline: true,
+                    style: {
+                      fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                      fontSize: "0.85rem",
+                      lineHeight: 1.5,
+                      height: "100%",
+                      boxSizing: "border-box",
+                    },
+                  },
+                }}
+                sx={{
+                  flex: "1 1 0",
+                  display: "flex",
+                  flexDirection: "column",
+                  height: 0,
+                  minHeight: 0,
+                  "& .MuiInputBase-root": {
+                    flex: "1 1 0",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    height: "100%",
+                    minHeight: 0,
+                  },
+                  "& .MuiInputBase-input": {
+                    flexGrow: 1,
+                    overflow: "auto !important",
+                    height: "100% !important",
+                    resize: "none",
+                    padding: 0,
+                  },
+                }}
               />
               {jsonError && (
-                <div className="alert alert-danger mt-2 mb-0">
+                <Alert severity="error" sx={{ mt: 1, flexShrink: 0 }} variant="filled">
-                  <small>{jsonError}</small>
+                  {jsonError}
-                </div>
+                </Alert>
               )}
-            </div>
+            </Box>
-          </div>
+          </Paper>
-        </div>
+        </Grid>
 
-        {/* Right Panel: Results */}
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
-        <div className="col-md-6">
+          <Paper
-          <div className="card h-100 d-flex flex-column">
+            sx={{
-            <div className="card-header py-2 d-flex justify-content-between align-items-center">
+              flexGrow: 1,
-              <h6 className="mb-0">
+              display: "flex",
-                <i className="bi bi-output me-2"></i>
+              flexDirection: "column",
-                Results
+              overflow: "hidden",
-              </h6>
+              bgcolor: "background.paper",
-              <div>
+              border: 1,
-                <button
+              borderColor: "divider",
-                  className={`btn btn-sm me-2 ${copySuccess ? "btn-success" : "btn-outline-secondary"}`}
+              minHeight: 0,
-                  onClick={copyToClipboard}
+            }}
-                  disabled={!result || result === "null"}
+          >
-                  title="Copy result to clipboard"
+            <Box
-                >
+              sx={{
-                  <i className={`bi ${copySuccess ? "bi-check-lg" : "bi-clipboard"} me-1`}></i>
+                px: 2,
-                  {copySuccess ? "Copied!" : "Copy"}
+                py: 1,
-                </button>
+                bgcolor: "action.hover",
-                <button
+                borderBottom: 1,
-                  className="btn btn-outline-secondary btn-sm"
+                borderColor: "divider",
-                  onClick={downloadResult}
+                display: "flex",
-                  disabled={!result || result === "null"}
+                justifyContent: "space-between",
-                  title="Download result as JSON file"
+                alignItems: "center",
-                >
+              }}
-                  <i className="bi bi-download me-1"></i>
-                  Download
-                </button>
-              </div>
-            </div>
-            <div
-              className="card-body flex-grow-1 d-flex flex-column"
-              style={{ minHeight: 0 }}
             >
-              <textarea
+              <Box sx={{ display: "flex", alignItems: "center" }}>
-                className="form-control result-output flex-grow-1"
+                <OutputIcon sx={{ mr: 1, fontSize: 20 }} color="primary" />
+                <Typography variant="subtitle2" color="text.primary">
+                  Query Result
+                </Typography>
+              </Box>
+              <Stack direction="row" spacing={1}>
+                <Tooltip title="Copy to Clipboard">
+                  <span>
+                    <IconButton
+                      size="small"
+                      onClick={copyToClipboard}
+                      disabled={!result || result === "null"}
+                      color={copySuccess ? "success" : "primary"}
+                    >
+                      {copySuccess ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
+                    </IconButton>
+                  </span>
+                </Tooltip>
+                <Tooltip title="Download Result">
+                  <span>
+                    <IconButton
+                      size="small"
+                      onClick={downloadResult}
+                      disabled={!result || result === "null"}
+                      color="primary"
+                    >
+                      <DownloadIcon fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </Stack>
+            </Box>
+            <Box sx={{ p: 2, flex: "1 1 0", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
+              <TextField
+                multiline
+                fullWidth
                 value={result}
-                readOnly
+                variant="standard"
                 placeholder="Results will appear here..."
-                style={{ minHeight: 0, resize: "none" }}
+                slotProps={{
+                  input: {
+                    readOnly: true,
+                    disableUnderline: true,
+                    style: {
+                      fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                      fontSize: "0.85rem",
+                      lineHeight: 1.5,
+                      height: "100%",
+                      boxSizing: "border-box",
+                    },
+                  },
+                }}
+                sx={{
+                  flex: "1 1 0",
+                  display: "flex",
+                  flexDirection: "column",
+                  height: 0,
+                  minHeight: 0,
+                  "& .MuiInputBase-root": {
+                    flex: "1 1 0",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    height: "100%",
+                    minHeight: 0,
+                  },
+                  "& .MuiInputBase-input": {
+                    flexGrow: 1,
+                    overflow: "auto !important",
+                    height: "100% !important",
+                    resize: "none",
+                    padding: 0,
+                  },
+                }}
               />
-            </div>
+            </Box>
-          </div>
+          </Paper>
-        </div>
+        </Grid>
-      </div>
+      </Grid>
-    </>
+    </Box>
   );
 }
 

src/index.css

@@ -1,6 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   background-color: #f8f9fa;
+  overflow: hidden;
 }
 
 code {

src/index.jsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import { ThemeProvider } from "@mui/material";
-import './index.css';
+import theme from "./theme";
-import App from './App';
+import "./index.css";
+import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme} defaultMode="system">
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );

src/theme.js

@@ -0,0 +1,13 @@
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'class',
+  },
+  colorSchemes: {
+    light: true,
+    dark: true,
+  },
+});
+
+export default theme;