Switched from Bootstrap to Material UI.

.github/copilot-instructions.md

@@ -71,11 +71,9 @@ The UI generates an API key at startup then load the sample data at startup and
 
 The main components of the application are located in the `src` directory and target Node 24 LTS environment.
 
-Framework to be used:
+- Material UI v7 for building the user interface.
-
+- React for building the component logic.
-- 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
@@ -93,3 +91,17 @@ The application exposes a REST API for remotly uploading sample data. The API en
 ## 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.

DEVELOPMENT.md

@@ -1,84 +0,0 @@
-# Development Guide
-
-## Quick Start Commands
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server (with hot reload)
-npm start
-
-# Build for production
-npm run build
-
-# Run tests
-npm test
-
-# Serve production build locally
-npm run serve
-```
-
-## Docker Commands
-
-```bash
-# Build Docker container
-docker build -t jmespath-playground .
-
-# Run Docker container
-docker run -p 3000:3000 jmespath-playground
-
-# Development with Docker Compose
-docker-compose --profile dev up jmespath-playground-dev
-
-# Production with Docker Compose
-docker-compose up jmespath-playground
-```
-
-## Project Structure Overview
-
-```
-src/
-├── App.js          # Main component with JMESPath logic
-├── App.css         # App-specific styles
-├── App.test.js     # Basic tests
-├── index.js        # React entry point
-├── index.css       # Global styles and Bootstrap overrides
-└── setupTests.js   # Test configuration
-```
-
-## Key Features Implemented
-
-1. **Real-time JMESPath Evaluation**: Uses the `jmespath` library to evaluate expressions as user types
-2. **JSON Validation**: Parses and validates JSON input with error reporting
-3. **Bootstrap UI**: Responsive layout with cards, buttons, and form controls
-4. **Error Handling**: Clear error messages for both JSON and JMESPath syntax issues
-5. **Sample Data**: Pre-loaded examples with "Load Sample" button
-6. **JSON Formatting**: "Format JSON" button to prettify JSON input
-7. **Clear Function**: "Clear All" button to reset all inputs
-
-## Component Architecture
-
-The main `App.js` component manages:
-- State for JMESPath expression, JSON data, results, and errors
-- Auto-evaluation using `useEffect` when inputs change
-- Error handling for both JSON parsing and JMESPath evaluation
-- UI event handlers for buttons and input changes
-
-## Styling
-
-- Bootstrap 5.3.2 for responsive grid and components
-- Custom CSS for enhanced UX (color coding, hover effects)
-- Gradient header with professional appearance
-- Color-coded input areas (yellow for JMESPath, green for JSON, blue for results)
-
-## Browser Compatibility
-
-Built with React 18 and targets:
-- Modern evergreen browsers
-- Node.js 24 LTS compatibility
-- Mobile-responsive design
-
-## License
-
-MIT License - see LICENSE file for details.

Dockerfile

@@ -14,31 +14,16 @@ COPY package*.json ./
 # Install dependencies (production + dev for build)
 RUN npm ci
 
-# Copy source code and build scripts
+# Copy source code and build dependencies
 COPY src/ ./src/
 COPY public/ ./public/
 COPY scripts/ ./scripts/
 COPY server.js ./server.js
+COPY vite.config.js ./vite.config.js
+COPY index.html ./index.html
 
-# Generate version.js if version info provided, otherwise run normal build
+# Build the application
-RUN if [ -n "$VERSION" ]; then \
+RUN npm run build
-      echo "// Auto-generated version file - do not edit manually" > src/version.js && \
-      echo "// Generated at: $(date -Iseconds)" >> src/version.js && \
-      echo "" >> src/version.js && \
-      echo "export const VERSION = '$VERSION';" >> src/version.js && \
-      echo "export const IS_RELEASE = $IS_RELEASE;" >> src/version.js && \
-      echo "export const BUILD_TIME = '$(date -Iseconds)';" >> src/version.js && \
-      echo "📝 Generated version.js with VERSION=$VERSION, IS_RELEASE=$IS_RELEASE"; \
-    fi
-
-# Build the application (skip prebuild if we already generated version.js)
-RUN if [ -n "$VERSION" ]; then \
-      echo "🚀 Building with pre-generated version.js" && \
-      npx react-scripts build; \
-    else \
-      echo "🚀 Building with version-check.js" && \
-      npm run build; \
-    fi
 
 # Production stage
 FROM node:24-alpine AS production
@@ -56,6 +41,10 @@ RUN npm ci --only=production && npm cache clean --force
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/server.js ./server.js
 
+# Copy entrypoint script
+COPY entrypoint.sh ./entrypoint.sh
+RUN chmod +x entrypoint.sh
+
 # Expose port 3000
 EXPOSE 3000
 
@@ -64,4 +53,4 @@ ENV LISTEN_ADDR=0.0.0.0
 ENV LISTEN_PORT=3000
 
 # Start the integrated server
-CMD ["node", "server.js"]
+ENTRYPOINT ["./entrypoint.sh"]

README.md

@@ -4,66 +4,67 @@ 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
 
-- 🎯 **Real-time Evaluation**: JMESPath expressions are evaluated instantly as you type
+- **Real-time Evaluation**: JMESPath expressions are evaluated instantly as you type
-- 📝 **JSON Validation**: Built-in JSON syntax validation and error reporting
+- **File Upload**: Load JSON data directly from local files (supports JSON Lines format for .log files)
-- 📁 **File Upload**: Load JSON data directly from local files (supports JSON Lines format for .log files)
+- **Remote API**: Upload sample data remotely via REST API with encrypted sessions
-- 🎨 **Bootstrap UI**: Clean, responsive interface with Bootstrap styling
+- **Container Ready**: Containerized for easy deployment
-- 🔄 **Sample Data**: Pre-loaded examples to get started quickly
-- 📱 **Responsive Design**: Works on desktop, tablet, and mobile devices
-- 🐳 **Docker Ready**: Containerized for easy deployment
-- ✅ **Error Handling**: Clear error messages for both JSON and JMESPath syntax issues
-
-## Application Layout
-
-The application is divided into three main sections:
-
-1. **Top Section**: Title and description of the tool
-2. **Middle Section**: Input area for JMESPath expressions
-3. **Bottom Sections**: 
-   - **Left**: JSON data input area
-   - **Right**: Query results output area
 
 ## Quick Start
 
 ### Prerequisites
 
 - Node.js 24 LTS or higher
-- npm or yarn package manager
+- npm package manager
 
 ### Local Development
 
 1. **Clone the repository**:
+
    ```bash
    git clone <repository-url>
    cd jmespath-playground
    ```
 
 2. **Install dependencies**:
+
    ```bash
    npm install
    ```
 
 3. **Start the development server**:
+
    ```bash
    npm start
    ```
 
 4. **Open your browser** and navigate to `http://localhost:3000`
 
-### Container Deployment (Optional)
+### Development
 
-You can optionally run the application in a Docker container:
+For development with hot reload on component changes:
 
 ```bash
-# Build the Docker image
+npm run dev
-docker build -t jmespath-playground .
+```
 
-# Run the container
+This runs both the React dev server (with hot reload) and the API server concurrently. The React app will proxy API requests to the backend server.
+
+### Container Deployment
+
+You can optionally run the application in a container:
+
+```bash
+# Build the container image
+npm run build-image
+
+# Run the container (Docker or Apple Container Tools)
 docker run -p 3000:3000 jmespath-playground
+# or
+container run -p 3000:3000 jmespath-playground
 ```
 
 ## Usage
@@ -82,93 +83,56 @@ docker run -p 3000:3000 jmespath-playground
    - Format JSON for better readability
    - Clear all inputs
 
-### Example JMESPath Expressions
+## Remote API Usage
 
-Try these examples with the sample data:
+The application includes a REST API for uploading sample data remotely:
-
-- `people[*].name` - Get all names
-- `people[0]` - Get the first person
-- `people[?age > 30]` - Filter people older than 30
-- `people[*].skills[0]` - Get the first skill of each person
-- `length(people)` - Count the number of people
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in development mode. The page will reload when you make edits.
-
-### `npm test`
-
-Launches the test runner in interactive watch mode.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
-
-### `npm run serve`
-
-Serves the production build locally on port 3000.
-
-### Docker Scripts
-
-### `npm run docker:build`
-
-Builds a Docker container.
-
-### `npm run docker:run`
-
-Runs the Docker container.
-
-## Project Structure
 
+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 \
+       -H "Content-Type: application/json" \
+       -H "X-API-Key: YOUR_API_KEY" \
+       --data @sample-data.json \
+       "http://your-domain.com/api/v1/upload"
    ```
-jmespath-playground/
+3. **Auto-reload**: The running app will detect new data and show a reload button
-├── .github/
+
-│   ├── workflows/
+**API Endpoints:**
-│   │   └── build-container.yml   # CI/CD pipeline
+- `POST /api/v1/upload` - Upload sample data
-│   └── copilot-instructions.md   # AI agent instructions
+- `GET /api/v1/sample` - Retrieve current sample data
-├── public/
+- `GET /api/v1/state` - Get current state ID
-│   ├── index.html
+- `GET /api/v1/health` - Simple health check (returns "OK")
-│   ├── manifest.json
+- `GET /api/v1/status` - Detailed status information (JSON)
-│   └── favicon.ico
+
-├── src/
+## Server Configuration
-│   ├── App.js          # Main application component
+
-│   ├── App.css         # App-specific styles
+The server can be configured using environment variables:
-│   ├── App.test.js     # App tests
+
-│   ├── index.js        # React entry point
+**Network Settings:**
-│   ├── index.css       # Global styles
+- `LISTEN_ADDR` - Server bind address (default: `127.0.0.1`)
-│   ├── setupTests.js   # Test configuration
+- `LISTEN_PORT` - Server port (default: `3000`)
-│   └── reportWebVitals.js
+
-├── scripts/
+**Session Management:**
-│   ├── build.sh        # Build script
+- `MAX_SESSIONS` - Maximum number of concurrent sessions (default: `100`)
-│   └── dev.sh          # Development script
+- `MAX_SAMPLE_SIZE` - Maximum size of uploaded sample data in bytes (default: `1048576` - 1MB)
-├── Dockerfile          # Docker container
+- `MAX_SESSION_TTL` - Session time-to-live in milliseconds (default: `3600000` - 1 hour)
-├── Dockerfile.dev      # Development container
+
-├── docker-compose.yml  # Container orchestration
+Example usage:
-├── package.json        # Dependencies and scripts
+
-├── README.md           # Comprehensive documentation
+```bash
-├── DEVELOPMENT.md      # Developer guide
+MAX_SESSIONS=200 MAX_SAMPLE_SIZE=2097152 LISTEN_PORT=8080 node server.js
-└── demo.sh             # Demo script
 ```
 
 ## Technology Stack
 
-- **React 18.2.0**: Frontend framework
+- **React 18.2.0**: Frontend framework with modern hooks and components
-- **Bootstrap 5.3.2**: CSS framework for styling
+- **Material UI v7**: Modern React component library following Material 3 Design principles.
-- **JMESPath 0.16.0**: JMESPath expression evaluation
+- **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
-- **Docker**: Optional containerization
+- **UUID 9.0.0**: Cryptographically secure session IDs
-
+- **Container**: Containerization for easy deployment
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/new-feature`
-3. Make your changes and commit them: `git commit -m 'Add new feature'`
-4. Push to the branch: `git push origin feature/new-feature`
-5. Submit a pull request
 
 ## License
 
@@ -177,7 +141,3 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 ## About JMESPath
 
 JMESPath is a query language for JSON. It allows you to declaratively specify how to extract elements from a JSON document. For more information about JMESPath syntax and capabilities, visit the [official JMESPath website](https://jmespath.org/).
-
-## Support
-
-If you encounter any issues or have questions, please [open an issue](../../issues) on GitHub.

bin/Upload-JMESPath.ps1

@@ -0,0 +1,72 @@
+#!/usr/bin/env pwsh
+[CmdletBinding()]
+param(
+	[Parameter(HelpMessage='Path to JSON file; default: read from stdin')]
+	[string]$JsonFile = '-',
+
+	[Parameter(HelpMessage='API base URL')]
+	[string]$ApiUrl,
+
+	[Parameter(HelpMessage='API key for authentication')]
+	[string]$ApiKey,
+
+	[Parameter(HelpMessage='Show help')]
+	[switch]$Help
+)
+
+function Show-Usage {
+	$usage = @"
+Usage: Upload-JMESPath.ps1 [-ApiUrl <url>] [-ApiKey <key>] [-JsonFile <file>]
+
+Parameters:
+  -ApiUrl <url>        The base URL of the JMESPath Playground API (default: http://localhost:3000 or $env:JMESPATH_PLAYGROUND_API_URL)
+  -ApiKey <key>        The API key for authentication (can also be set via JMESPATH_PLAYGROUND_API_KEY)
+  -JsonFile <file>     The JSON file to upload (default: stdin if not specified)
+  -Help                Show this help message and exit
+"@
+	Write-Output $usage
+}
+
+if ($Help) { Show-Usage; exit 0 }
+
+# Apply environment defaults when parameters are not provided
+if (-not $ApiUrl) {
+	if ($env:JMESPATH_PLAYGROUND_API_URL) { $ApiUrl = $env:JMESPATH_PLAYGROUND_API_URL } else { $ApiUrl = 'http://localhost:3000' }
+}
+if (-not $ApiKey) {
+	$ApiKey = $env:JMESPATH_PLAYGROUND_API_KEY
+}
+
+# Read JSON body from file or stdin
+try {
+	if ($JsonFile -eq '-' -or [string]::IsNullOrEmpty($JsonFile)) {
+		$Body = [Console]::In.ReadToEnd()
+	} else {
+		if (-not (Test-Path -Path $JsonFile)) {
+			Write-Error "JSON file not found: $JsonFile"
+			exit 2
+		}
+		$Body = Get-Content -Raw -Path $JsonFile
+	}
+} catch {
+	Write-Error "Failed to read JSON input: $($_.Exception.Message)"
+	exit 2
+}
+
+# Prepare headers
+$Headers = @{ 'Accept' = 'application/json' }
+if (-not [string]::IsNullOrEmpty($ApiKey)) { $Headers['X-API-Key'] = $ApiKey }
+
+# POST to API
+$Uri = "$ApiUrl/api/v1/upload"
+try {
+	$response = Invoke-RestMethod -Uri $Uri -Method Post -Headers $Headers -ContentType 'application/json' -Body $Body -ErrorAction Stop
+	if ($null -ne $response) {
+		$response | ConvertTo-Json -Depth 10
+	} else {
+		Write-Output "Upload completed."
+	}
+} catch {
+	Write-Error "Upload failed: $($_.Exception.Message)"
+	exit 3
+}

bin/upload-jmespath

@@ -2,18 +2,33 @@
 
 set -euo pipefail
 
-API_URL="https://jmespath-playground.koszewscy.waw.pl"
+JMESPATH_PLAYGROUND_API_URL="${JMESPATH_PLAYGROUND_API_URL:-http://localhost:3000}" # May be set in bash profile
+JMESPATH_PLAYGROUND_API_KEY="${JMESPATH_PLAYGROUND_API_KEY:-}" # Required if not localhost
+
 JSON_FILE="-"
 
 function usage() {
     echo "Usage: $0 [--api-url <url>] [--json-file <file>]"
-    exit 1
+    echo
+    echo "Options:"
+    echo "  --api-url <url>        The base URL of the JMESPath Playground API (default: http://localhost:3000)"
+    echo "  --api-key <key>        The API key for authentication (required if not localhost)"
+    echo "  --json-file <file>     The JSON file to upload (default: stdin if not specified)"
+    echo "  -h, --help             Show this help message and exit"
+    echo
+    echo "Environment Variables:"
+    echo "  JMESPATH_PLAYGROUND_API_URL   Can be used to set the API URL"
+    echo "  JMESPATH_PLAYGROUND_API_KEY   Can be used to set the API key"
 }
 
 while [[ $# -gt 0 ]]; do
     case $1 in
         --api-url)
-            API_URL="$2"
+            JMESPATH_PLAYGROUND_API_URL="$2"
+            shift 2
+            ;;
+        --api-key)
+            JMESPATH_PLAYGROUND_API_KEY="$2"
             shift 2
             ;;
         --json-file)
@@ -32,10 +47,12 @@ while [[ $# -gt 0 ]]; do
     esac
 done
 
+ADD_HEADERS+=("-H" "X-API-Key: $JMESPATH_PLAYGROUND_API_KEY")
+
 # Send the POST request
 curl -s -X POST \
     -H "Content-Type: application/json" \
     -H "Accept: application/json" \
+    "${ADD_HEADERS[@]}" \
     --data @${JSON_FILE} \
-    "$API_URL/api/v1/upload"
+    "$JMESPATH_PLAYGROUND_API_URL/api/v1/upload"
-

bin/upload-jmespath.mjs

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+// Parse command-line arguments
+import { parseArgs } from "util";
+
+const args = parseArgs({
+  options: {
+    "api-url": {
+      type: "string",
+      short: "a",
+      default: process.env.JMESPATH_PLAYGROUND_API_URL || "http://localhost:3000",
+    },
+    "api-key": {
+      type: "string",
+      short: "k",
+      default: process.env.JMESPATH_PLAYGROUND_API_KEY || "",
+    },
+    "json-file": {
+      type: "string",
+      short: "j",
+      default: "",
+    },
+    help: { type: "boolean", short: "h" },
+  },
+});
+
+// Show help message
+if (args.values.help) {
+  console.log(`
+Usage: upload-jmespath.mjs [options]
+
+Options:
+  -a, --api-url     API base URL (default: http://localhost:3000)
+  -k, --api-key     API key for authentication
+  -j, --json-file   Path to the JSON file to upload
+  -h, --help        Show this help message
+`);
+  process.exit(0);
+}
+
+// Read the JSON from the specfied file or from stdin if no file is provided
+async function readJson(filePath) {
+  if (filePath) {
+    const absolutePath = path.resolve(filePath);
+    const fileContent = fs.readFileSync(absolutePath, "utf-8");
+    return JSON.parse(fileContent);
+  } else {
+    return new Promise((resolve, reject) => {
+      let data = "";
+      process.stdin.on("data", (chunk) => {
+        data += chunk;
+      });
+      process.stdin.on("end", () => {
+        try {
+          resolve(JSON.parse(data));
+        } catch (error) {
+          reject(error);
+        }
+      });
+    });
+  }
+}
+
+// Upload the JSON data to the API using built-in fetch
+async function uploadJson(apiUrl, apiKey, jsonData) {
+  const response = await fetch(`${apiUrl}/api/v1/upload`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...(apiKey ? { "X-API-Key": `${apiKey}` } : {}),
+    },
+    body: JSON.stringify(jsonData),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to upload JSON: ${response.status} ${response.statusText}`);
+  }
+}
+
+// Main function
+async function main() {
+  try {
+    const jsonData = await readJson(args.values["json-file"]);
+    await uploadJson(args.values["api-url"], args.values["api-key"], jsonData);
+    console.log("JSON uploaded successfully.");
+  } catch (error) {
+    console.error("Error:", error.message);
+    process.exit(1);
+  }
+}
+
+main();

demo.sh

@@ -1,79 +0,0 @@
-#!/bin/bash
-
-# JMESPath Testing Tool - Demo Script
-
-echo "🚀 JMESPath Testing Tool Demo"
-echo "==============================="
-echo ""
-
-# Check if Node.js is installed
-if command -v node &> /dev/null; then
-    echo "✅ Node.js version: $(node --version)"
-else
-    echo "❌ Node.js not found. Please install Node.js 24 LTS or higher."
-    exit 1
-fi
-
-# Check if npm is installed
-if command -v npm &> /dev/null; then
-    echo "✅ npm version: $(npm --version)"
-else
-    echo "❌ npm not found. Please install npm."
-    exit 1
-fi
-
-# Check Docker
-if command -v docker &> /dev/null; then
-    echo "✅ Docker available: $(docker --version | cut -d' ' -f3 | cut -d',' -f1)"
-    DOCKER_AVAILABLE=true
-else
-    echo "⚠️  Docker not found"
-    DOCKER_AVAILABLE=false
-fi
-
-echo ""
-echo "📦 Installing dependencies..."
-npm install
-
-echo ""
-echo "🧪 Running tests..."
-npm test -- --watchAll=false
-
-echo ""
-echo "🔨 Building React application..."
-echo "  (Version will be automatically tagged as -dev since not building from git tag)"
-npm run build
-
-echo ""
-echo "🎉 Demo completed successfully!"
-echo ""
-echo "Available commands:"
-echo "==================="
-echo ""
-echo "Development:"
-echo "  npm start          - Start React development server (port 3000)"
-echo "  npm run server     - Start Express API server only (port 3000)" 
-echo "  npm test           - Run test suite"
-echo ""
-echo "Production:"
-echo "  npm run build      - Build React app for production"
-echo "  node server/server.js - Start integrated server with built app"
-echo ""
-if [ "$DOCKER_AVAILABLE" = true ]; then
-    echo "Docker:"
-    echo "  docker build -t jmespath-playground ."
-    echo "  docker run -p 3000:3000 jmespath-playground"
-    echo ""
-    echo "Docker Compose:"
-    echo "  docker compose up --build"
-    echo "  docker compose down"
-else
-    echo "Docker (install Docker first):"
-    echo "  docker build -t jmespath-playground ."
-    echo "  docker run -p 3000:3000 jmespath-playground"
-    echo "  docker compose up --build"
-fi
-
-echo ""
-echo "🌐 The application will be available at:"
-echo "   http://localhost:3000"

entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+set -e
+exec node server.js

index.html

@@ -2,12 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="JMESPath Testing Tool - Validate and test JMESPath expressions against JSON data" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&family=Noto+Sans+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -16,5 +15,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

package.json

@@ -1,42 +1,35 @@
 {
   "name": "jmespath-playground",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A React-based web application for testing JMESPath expressions against JSON data",
   "main": "index.js",
   "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
     "prebuild": "node scripts/version-check.js",
-    "build": "react-scripts build",
+    "build": "vite build",
-    "test": "react-scripts test",
+    "preview": "vite preview",
-    "server": "node server.js"
+    "test": "vitest",
+    "server": "node server.js --dev",
+    "dev": "concurrently \"npm start\" \"node --watch server.js --dev\"",
+    "build-image": "node scripts/build-image.js"
   },
   "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",
-    "react-scripts": "^5.0.1",
     "uuid": "^9.0.0"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/index.js"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -59,6 +52,12 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "supertest": "^7.2.2"
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/ui": "^4.0.18",
+    "concurrently": "^8.2.2",
+    "jsdom": "^27.4.0",
+    "supertest": "^7.2.2",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   }
 }

scripts/build-image.js

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const { parseArgs } = require('util');
+
+function execCommand(command, description) {
+    try {
+        console.log(`${description}...`);
+        execSync(command, { stdio: 'inherit' });
+    } catch (error) {
+        console.error(`Error: ${description} failed`);
+        process.exit(1);
+    }
+}
+
+function getContainerTool() {
+    // Check for Docker first (primary tool)
+    try {
+        execSync('docker --version', { stdio: 'ignore' });
+        return 'docker';
+    } catch (error) {
+        // Fall back to Apple's container command
+        try {
+            execSync('container --version', { stdio: 'ignore' });
+            return 'container';
+        } catch (error) {
+            console.error('Error: No container tool found. Please install Docker or Apple Container Tools to build container images.');
+            process.exit(1);
+        }
+    }
+}
+
+function getVersion() {
+    try {
+        // Try to get version from git tag
+        const gitTag = execSync('git tag --points-at HEAD', { encoding: 'utf8' }).trim();
+        if (gitTag) {
+            return { version: gitTag.replace(/^v/, ''), isRelease: true };
+        }
+    } catch (error) {
+        // Git command failed, ignore
+    }
+
+    // Development build - use package.json version with -dev suffix
+    const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    return { version: `${packageJson.version}-dev`, isRelease: false };
+}
+
+function getHostArchitecture() {
+    // Map Node.js architecture names to container architecture names
+    const archMap = {
+        'arm64': 'arm64',
+        'arm': 'arm64',
+        'x64': 'amd64'
+    };
+    return archMap[process.arch] || 'arm64';
+}
+
+function showHelp() {
+    const hostArch = getHostArchitecture();
+    console.log(`Build multi-architecture container images for JMESPath Playground
+
+Usage:
+  build-image.js [OPTIONS]
+
+Options:
+  --all-arch       Build for both arm64 and amd64 (default: build for host architecture only)
+  --arch <arch>    Target architecture (arm64 or amd64). Can be specified multiple times.
+  --help, -h       Show this help message and exit
+
+Examples:
+  build-image.js                            # Builds for ${hostArch} only (host architecture)
+  build-image.js --all-arch                 # Builds for both arm64 and amd64
+  build-image.js --arch arm64               # Builds for arm64 only
+  build-image.js --arch arm64 --arch amd64  # Explicitly specify both
+  build-image.js -h                         # Show help`);
+}
+
+function main() {
+    const { values } = parseArgs({
+        options: {
+            help: {
+                type: 'boolean',
+                short: 'h',
+                description: 'Show help'
+            },
+            'all-arch': {
+                type: 'boolean',
+                description: 'Build for both arm64 and amd64'
+            },
+            arch: {
+                type: 'string',
+                multiple: true,
+                description: 'Target architecture (arm64 or amd64)'
+            }
+        },
+        strict: true,
+        allowPositionals: false
+    });
+
+    if (values.help) {
+        showHelp();
+        process.exit(0);
+    }
+
+    const containerTool = getContainerTool();
+    const { version, isRelease } = getVersion();
+    
+    let architectures;
+    if (values['all-arch']) {
+        architectures = ['arm64', 'amd64'];
+    } else if (values.arch && values.arch.length > 0) {
+        architectures = values.arch;
+    } else {
+        architectures = [getHostArchitecture()];
+    }
+
+    console.log(`Building ${isRelease ? 'release' : 'development'} version: ${version}`);
+    console.log(`Target architectures: ${architectures.join(', ')}`);
+
+    // Build container image
+    const tags = isRelease
+        ? [
+            `-t skoszewski/jmespath-playground:${version}`,
+            `-t skoszewski/jmespath-playground:latest`
+          ].join(' ')
+        : [
+            `-t skoszewski/jmespath-playground:dev`,
+            `-t skoszewski/jmespath-playground:latest`
+          ].join(' ');
+
+    const archFlags = architectures.map(arch => `--arch ${arch}`).join(' ');
+
+    const buildCommand = `${containerTool} build ${archFlags} --build-arg VERSION="${version}" --build-arg IS_RELEASE="${isRelease}" ${tags} .`;
+
+    execCommand(buildCommand, 'Building container image');
+
+    console.log('Container image build completed successfully!');
+
+    // Show usage instructions
+    console.log(`\nUsage examples:`);
+    console.log(`  build-image.js                            # Builds for host architecture only`);
+    console.log(`  build-image.js --all-arch                 # Builds for both arm64 and amd64`);
+    console.log(`  build-image.js --arch arm64               # Builds for arm64 only`);
+    console.log(`  build-image.js --arch arm64 --arch amd64  # Explicitly specify both`);
+
+    if (isRelease) {
+        console.log(`\nTo run the container:`);
+        console.log(`  ${containerTool} run --arch arm64 --name jmespathpg -p 3000:3000 skoszewski/jmespath-playground:${version}`);
+        if (containerTool === 'docker') {
+            console.log(`\nTo push to Docker Hub:`);
+            console.log(`  docker push skoszewski/jmespath-playground:${version}`);
+            console.log(`  docker push skoszewski/jmespath-playground:latest`);
+        }
+    } else {
+        console.log(`\nTo run the container:`);
+        console.log(`  ${containerTool} run --arch arm64 --name jmespathpg -p 3000:3000 skoszewski/jmespath-playground:dev`);
+    }
+}
+
+if (require.main === module) {
+    main();
+}

scripts/build-image.sh

@@ -1,63 +0,0 @@
-#!/bin/bash
-
-# JMESPath Testing Tool - Docker Image Build Script
-
-set -e
-
-echo "🐳 JMESPath Testing Tool - Docker Image Build"
-echo "=============================================="
-echo ""
-
-# Check if Docker is available
-if ! command -v docker &> /dev/null; then
-    echo "❌ Docker not found. Please install Docker to build container images."
-    exit 1
-fi
-
-# Determine version information for Docker build
-VERSION=$(git tag --points-at HEAD 2>/dev/null | sed 's/^v//' | head -n 1)
-
-if [ -n "$VERSION" ]; then
-    # We're at a tagged commit - release build
-    echo "📦 Building release version: $VERSION"
-    docker build \
-        --build-arg VERSION="$VERSION" \
-        --build-arg IS_RELEASE="true" \
-        -t skoszewski/jmespath-playground:$VERSION \
-        -t skoszewski/jmespath-playground:latest .
-    echo "✅ Built Docker images: skoszewski/jmespath-playground:$VERSION, skoszewski/jmespath-playground:latest"
-
-    echo ""
-    echo "To run the release container:"
-    echo "  docker run -p 3000:3000 skoszewski/jmespath-playground:$VERSION"
-    echo "  docker run -p 3000:3000 skoszewski/jmespath-playground:latest"
-
-    echo ""
-    echo "To push to Docker Hub:"
-    echo "  docker push skoszewski/jmespath-playground:$VERSION"
-    echo "  docker push skoszewski/jmespath-playground:latest"
-else
-    # Development build
-    PACKAGE_VERSION=$(grep '"version"' package.json | cut -d'"' -f4)
-    DEV_VERSION="${PACKAGE_VERSION}-dev"
-    echo "📦 Building development version: $DEV_VERSION"
-    docker build \
-        --build-arg VERSION="$DEV_VERSION" \
-        --build-arg IS_RELEASE="false" \
-        -t skoszewski/jmespath-playground:dev \
-        -t skoszewski/jmespath-playground:latest .
-    echo "✅ Built Docker images: skoszewski/jmespath-playground:dev, skoszewski/jmespath-playground:latest"
-
-    echo ""
-    echo "To run the development container:"
-    echo "  docker run -p 3000:3000 skoszewski/jmespath-playground:dev"
-    echo "  docker run -p 3000:3000 skoszewski/jmespath-playground:latest"
-
-    echo ""
-    echo "To push to Docker Hub:"
-    echo "  docker push skoszewski/jmespath-playground:dev"
-    echo "  docker push skoszewski/jmespath-playground:latest"
-fi
-
-echo ""
-echo "🎉 Docker image build completed successfully!"

scripts/build.sh

@@ -1,39 +0,0 @@
-#!/bin/bash
-
-# JMESPath Testing Tool - Build Script
-
-set -e
-
-echo "🚀 JMESPath Testing Tool - Build Script"
-echo "======================================="
-echo ""
-
-# Check Node.js version
-if command -v node &> /dev/null; then
-    NODE_VERSION=$(node --version | sed 's/v//')
-    MAJOR_VERSION=$(echo $NODE_VERSION | cut -d. -f1)
-    if [ "$MAJOR_VERSION" -ge 24 ]; then
-        echo "✅ Node.js $NODE_VERSION (compatible with v24+ requirement)"
-    else
-        echo "❌ Node.js $NODE_VERSION found, but v24+ is required"
-        exit 1
-    fi
-else
-    echo "❌ Node.js not found. Please install Node.js 24 LTS or higher."
-    exit 1
-fi
-
-# Build the React application
-echo "📦 Installing dependencies..."
-npm install
-
-echo "🔨 Building production bundle..."
-npm run build
-
-echo "✅ Build completed successfully!"
-echo ""
-echo "To run the application:"
-echo "  npm run server         # Run integrated server locally"
-echo ""
-echo "To build Docker image:"
-echo "  scripts/build-image.sh # Build Docker container image"

scripts/dev.sh

@@ -1,30 +0,0 @@
-#!/bin/bash
-
-# JMESPath Testing Tool - Development Script
-
-set -e
-
-echo "🚀 JMESPath Testing Tool - Development"
-echo "====================================="
-echo ""
-
-# Check Node.js
-if command -v node &> /dev/null; then
-    echo "✅ Node.js version: $(node --version)"
-else
-    echo "❌ Node.js not found. Please install Node.js 24 LTS."
-    exit 1
-fi
-
-# Install dependencies if needed
-if [ ! -d "node_modules" ]; then
-    echo "📦 Installing dependencies..."
-    npm install
-fi
-
-# Start development server
-echo "🚀 Starting development server..."
-echo "   The app will open at http://localhost:3000"
-echo "   Press Ctrl+C to stop the server"
-echo ""
-npm start

scripts/upload.js

@@ -2,63 +2,57 @@
 
 /**
  * JMESPath Playground Upload Script (JavaScript)
- * Usage: node upload.js [-u URL] "json_file.json"
+ * 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] <json_file>`);
+    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('Example:');
+    console.log('Examples:');
     console.log(`  node ${scriptName} data.json`);
-    console.log(`  node ${scriptName} -u http://example.com:3000 data.json`);
+    console.log(`  node ${scriptName} -u http://example.com:3000 -k your-api-key data.json`);
 }
 
-function parseArguments() {
+function getArguments() {
-    const args = process.argv.slice(2);
+    const { values, positionals } = parseArgs({
-    let apiUrl = 'http://localhost:3000';
+        args: process.argv.slice(2),
-    let jsonFile = '';
+        options: {
+            url: { type: 'string', short: 'u', default: 'http://localhost:3000' },
+            key: { type: 'string', short: 'k' },
+            help: { type: 'boolean', short: 'h' }
+        },
+        allowPositionals: true
+    });
 
-    for (let i = 0; i < args.length; i++) {
+    if (values.help) {
-        const arg = args[i];
-
-        if (arg === '-u' || arg === '--url') {
-            if (i + 1 >= args.length) {
-                console.error('Error: URL argument required for -u/--url option');
-                process.exit(1);
-            }
-            apiUrl = args[i + 1];
-            i++; // Skip next argument
-        } else if (arg === '-h' || arg === '--help') {
         showUsage();
         process.exit(0);
-        } else if (arg.startsWith('-')) {
-            console.error(`Error: Unknown option ${arg}`);
-            showUsage();
-            process.exit(1);
-        } else {
-            if (jsonFile) {
-                console.error('Error: Multiple JSON files specified');
-                process.exit(1);
-            }
-            jsonFile = arg;
-        }
     }
 
-    if (!jsonFile) {
+    if (positionals.length !== 1) {
         console.error('Error: JSON file required');
         showUsage();
         process.exit(1);
     }
 
-    return { apiUrl, jsonFile };
+    return {
+        apiUrl: values.url,
+        apiKey: values.key || '',
+        jsonFile: positionals[0]
+    };
 }
 
 async function validateJsonFile(jsonFile) {
@@ -80,28 +74,84 @@ async function validateJsonFile(jsonFile) {
     }
 }
 
-async function uploadData(apiUrl, jsonFile, jsonData) {
+function isLocalhost(url) {
-    console.log('Uploading sample data to JMESPath Playground...');
-    console.log(`JSON file: ${jsonFile}`);
-    console.log(`API URL: ${apiUrl}`);
-    console.log('');
-
     try {
-        const response = await fetch(`${apiUrl}/api/v1/upload`, {
+        const parsed = new URL(url);
-            method: 'POST',
+        const hostname = parsed.hostname;
-            headers: {
+        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) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(`HTTP ${response.status}: ${errorData.error || 'Upload failed'}`);
         }
 
-        console.log('Sample data uploaded successfully!');
+        const result = await response.json();
-        console.log(`Open ${apiUrl} in your browser to see the reload button.`);
+        console.log(JSON.stringify(result));
-        console.log('You can then enter your JMESPath expression in the web interface.');
 
     } catch (error) {
         console.error('Error uploading data:', error.message);
@@ -110,9 +160,9 @@ async function uploadData(apiUrl, jsonFile, jsonData) {
 }
 
 async function main() {
-    const { apiUrl, jsonFile } = parseArguments();
+    const { apiUrl, apiKey, jsonFile } = getArguments();
     const jsonData = await validateJsonFile(jsonFile);
-    await uploadData(apiUrl, jsonFile, jsonData);
+    await uploadData(apiUrl, apiKey, jsonFile, jsonData);
 }
 
 // Run the script

scripts/upload.sh

@@ -1,82 +0,0 @@
-#!/bin/bash
-
-# JMESPath Playground Upload Script
-# Usage: ./upload.sh [-u URL] "json_file.json"
-
-show_usage() {
-    echo "Usage: $0 [-u|--url URL] <json_file>"
-    echo ""
-    echo "Options:"
-    echo "  -u, --url URL    API URL (default: http://localhost:3000)"
-    echo "  -h, --help       Show this help message"
-    echo ""
-    echo "Example:"
-    echo "  $0 data.json"
-    echo "  $0 -u http://example.com:3000 data.json"
-}
-
-# Parse command line options
-API_URL="http://localhost:3000"
-JSON_FILE=""
-
-while [[ $# -gt 0 ]]; do
-    case $1 in
-        -u|--url)
-            API_URL="$2"
-            shift 2
-            ;;
-        -h|--help)
-            show_usage
-            exit 0
-            ;;
-        -*)
-            echo "Error: Unknown option $1"
-            show_usage
-            exit 1
-            ;;
-        *)
-            if [ -z "$JSON_FILE" ]; then
-                JSON_FILE="$1"
-            else
-                echo "Error: Multiple JSON files specified"
-                exit 1
-            fi
-            shift
-            ;;
-    esac
-done
-
-if [ -z "$JSON_FILE" ]; then
-    echo "Error: JSON file required"
-    show_usage
-    exit 1
-fi
-
-if [ ! -f "$JSON_FILE" ]; then
-    echo "Error: JSON file '$JSON_FILE' not found"
-    exit 1
-fi
-
-# Validate JSON with jq if available
-if command -v jq >/dev/null 2>&1; then
-    if ! jq . "$JSON_FILE" >/dev/null 2>&1; then
-        echo "Error: '$JSON_FILE' contains invalid JSON"
-        exit 1
-    fi
-fi
-
-echo "Uploading sample data to JMESPath Playground..."
-echo "JSON file: $JSON_FILE"
-echo "API URL: $API_URL"
-echo
-
-# Upload the JSON data
-curl -s -X POST \
-    -H "Content-Type: application/json" \
-    --data @"$JSON_FILE" \
-    "$API_URL/api/v1/upload"
-
-echo
-echo "Sample data uploaded successfully!"
-echo "Open $API_URL in your browser to see the reload button."
-echo "You can then enter your JMESPath expression in the web interface."

scripts/version-check.js

@@ -22,15 +22,15 @@ try {
     console.log(`✅ Building release version ${version} (tagged: ${gitTag})`);
     isRelease = true;
   } else {
-    // We're not at a tagged commit - add -dev suffix
+    // We're not at a tagged commit - use unknown version
-    version = `${version}-dev`;
+    version = 'unknown';
-    console.log(`📦 Building development version ${version}`);
+    console.log(`📦 Building development version with unknown version`);
     isRelease = false;
   }
 } catch (error) {
   // Git command failed (maybe not in a git repo)
-  version = `${version}-dev`;
+  version = 'unknown';
-  console.log(`⚠️  Cannot determine git status, using development version ${version}`);
+  console.log(`⚠️  Cannot determine git status, using unknown version`);
   isRelease = false;
 }
 

server.js

@@ -1,7 +1,9 @@
-const express = require('express');
+const express = require("express");
-const path = require('path');
+const path = require("path");
-const crypto = require('crypto');
+const crypto = require("crypto");
-const { v4: uuidv4 } = require('uuid');
+const os = require("os");
+const { v4: uuidv4 } = require("uuid");
+const { parseArgs } = require("util");
 
 // Environment configuration
 const MAX_SESSIONS = parseInt(process.env.MAX_SESSIONS) || 100;
@@ -9,54 +11,29 @@ const MAX_SAMPLE_SIZE = parseInt(process.env.MAX_SAMPLE_SIZE) || 1024 * 1024; //
 const MAX_SESSION_TTL = parseInt(process.env.MAX_SESSION_TTL) || 60 * 60 * 1000; // 1 hour
 
 // Utility functions for encryption
-function generateSalt() {
-  return crypto.randomBytes(16);
-}
-
-function isLocalhostRequest(req) {
-  // Get client IP with fallback options
-  const forwarded = req.get('X-Forwarded-For');
-  const ip = forwarded ? forwarded.split(',')[0].trim() : 
-             req.ip || 
-             req.connection.remoteAddress || 
-             req.socket.remoteAddress || 
-             '127.0.0.1';
-  
-  const host = req.get('host') || '';
-  
-  // Check for localhost IP addresses (IPv4 and IPv6)
-  const localhostIPs = ['127.0.0.1', '::1', '::ffff:127.0.0.1', 'localhost'];
-  const isLocalIP = localhostIPs.includes(ip) || ip.startsWith('127.') || ip === '::1';
-  
-  // Check for localhost hostnames
-  const isLocalHost = host.startsWith('localhost:') || host.startsWith('127.0.0.1:') || host === 'localhost' || host === '127.0.0.1';
-  
-  return isLocalIP || isLocalHost;
-}
-
 function encrypt(data, key) {
   try {
-    const algorithm = 'aes-256-gcm';
+    const algorithm = "aes-256-gcm";
     const iv = crypto.randomBytes(16);
     const cipher = crypto.createCipheriv(algorithm, key, iv);
-    cipher.setAAD(Buffer.from('session-data'));
+    cipher.setAAD(Buffer.from("session-data"));
 
-    let encrypted = cipher.update(JSON.stringify(data), 'utf8');
+    let encrypted = cipher.update(JSON.stringify(data), "utf8");
     encrypted = Buffer.concat([encrypted, cipher.final()]);
 
     const authTag = cipher.getAuthTag();
 
     return {
-      iv: iv.toString('hex'),
+      iv: iv.toString("hex"),
-      data: encrypted.toString('hex'),
+      data: encrypted.toString("hex"),
-      tag: authTag.toString('hex')
+      tag: authTag.toString("hex"),
     };
   } catch (error) {
-    console.error('⚠️ Encryption exception:', {
+    console.error("⚠️ Encryption exception:", {
       message: error.message,
-      algorithm: 'aes-256-gcm',
+      algorithm: "aes-256-gcm",
-      keyLength: key ? key.length : 'undefined',
+      keyLength: key ? key.length : "undefined",
-      timestamp: new Date().toISOString()
+      timestamp: new Date().toISOString(),
     });
     throw new Error(`Encryption failed: ${error.message}`);
   }
@@ -64,39 +41,40 @@ function encrypt(data, key) {
 
 function decrypt(encryptedObj, key) {
   try {
-    const algorithm = 'aes-256-gcm';
+    const algorithm = "aes-256-gcm";
-    const iv = Buffer.from(encryptedObj.iv, 'hex');
+    const iv = Buffer.from(encryptedObj.iv, "hex");
     const decipher = crypto.createDecipheriv(algorithm, key, iv);
-    decipher.setAAD(Buffer.from('session-data'));
+    decipher.setAAD(Buffer.from("session-data"));
-    decipher.setAuthTag(Buffer.from(encryptedObj.tag, 'hex'));
+    decipher.setAuthTag(Buffer.from(encryptedObj.tag, "hex"));
 
-    let decrypted = decipher.update(Buffer.from(encryptedObj.data, 'hex'), null, 'utf8');
+    let decrypted = decipher.update(
-    decrypted += decipher.final('utf8');
+      Buffer.from(encryptedObj.data, "hex"),
+      null,
+      "utf8",
+    );
+    decrypted += decipher.final("utf8");
 
     return JSON.parse(decrypted);
   } catch (error) {
-    console.error('⚠️ Decryption exception:', {
+    console.error("⚠️ Decryption exception:", {
       message: error.message,
-      algorithm: 'aes-256-gcm',
+      algorithm: "aes-256-gcm",
-      keyLength: key ? key.length : 'undefined',
+      keyLength: key ? key.length : "undefined",
       hasIV: !!encryptedObj.iv,
       hasTag: !!encryptedObj.tag,
       hasData: !!encryptedObj.data,
-      timestamp: new Date().toISOString()
+      timestamp: new Date().toISOString(),
     });
     throw new Error(`Decryption failed: ${error.message}`);
   }
 }
 
-// For localhost requests, use a consistent API key so sessions persist
-const LOCALHOST_API_KEY = 'localhost0123456789abcdef0123456789';
-
 function isValidApiKey(apiKey) {
-  return typeof apiKey === 'string' && /^[0-9a-f]{32}$/i.test(apiKey);
+  return typeof apiKey === "string" && /^[0-9a-f]{32}$/i.test(apiKey);
 }
 
 function getSessionId(apiKey) {
-  return crypto.createHash('sha256').update(apiKey).digest('hex');
+  return crypto.createHash("sha256").update(apiKey).digest("hex");
 }
 
 function generateSalt() {
@@ -104,19 +82,38 @@ function generateSalt() {
 }
 
 function deriveKey(apiKey, salt) {
-  return crypto.pbkdf2Sync(apiKey, salt, 10000, 32, 'sha256');
+  return crypto.pbkdf2Sync(apiKey, salt, 100000, 32, "sha256");
 }
 
 // Create Express app
-function createApp() {
+function createApp(devMode = false) {
   const app = express();
 
   // Trust proxy to get real client IP (needed for localhost detection)
-  app.set('trust proxy', true);
+  app.set("trust proxy", true);
 
   // Middleware
   app.use(express.json({ limit: MAX_SAMPLE_SIZE }));
-  app.use(express.static(path.join(__dirname, 'build')));
+  app.use(express.static(path.join(__dirname, "build")));
+
+  // Dev mode request logging middleware
+  if (devMode) {
+    app.use((req, res, next) => {
+      const timestamp = new Date().toISOString();
+      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`);
+      }
+
+      const originalJson = res.json;
+      res.json = function (data) {
+        console.log(`   ✓ Response: ${res.statusCode}`);
+        return originalJson.call(this, data);
+      };
+      next();
+    });
+  }
 
   // Session storage
   const sessions = new Map();
@@ -127,7 +124,9 @@ function createApp() {
     for (const [sessionId, session] of sessions.entries()) {
       if (now - session.createdAt > MAX_SESSION_TTL) {
         sessions.delete(sessionId);
-        console.log(`🧹 Cleaned up expired session: ${sessionId.substring(0, 8)}...`);
+        console.log(
+          `🧹 Cleaned up expired session: ${sessionId.substring(0, 8)}...`,
+        );
       }
     }
   }
@@ -136,22 +135,15 @@ function createApp() {
   setInterval(cleanupExpiredSessions, 5 * 60 * 1000);
 
   // API endpoints
-  app.post('/api/v1/upload', (req, res) => {
+  app.post("/api/v1/upload", (req, res) => {
     try {
-      // Check if request is from localhost - if so, skip API key validation
+      const apiKey = req.headers["x-api-key"];
-      const isFromLocalhost = isLocalhostRequest(req);
-      let apiKey = req.headers['x-api-key'];
 
-      if (!isFromLocalhost) {
+      // Validate API key header
-        // Validate API key header for remote clients
       if (!apiKey || !isValidApiKey(apiKey)) {
-          return res.status(403).json({ error: 'Invalid or missing X-API-Key header' });
+        return res
-        }
+          .status(403)
-      } else {
+          .json({ error: "Invalid or missing X-API-Key header" });
-        // For localhost requests, use consistent API key for session persistence
-        if (!apiKey || !isValidApiKey(apiKey)) {
-          apiKey = LOCALHOST_API_KEY;
-        }
       }
 
       // Cleanup expired sessions before checking limits
@@ -160,26 +152,26 @@ function createApp() {
       // Check session limits
       if (sessions.size >= MAX_SESSIONS) {
         return res.status(429).json({
-          error: 'Maximum number of sessions reached. Please try again later.',
+          error: "Maximum number of sessions reached. Please try again later.",
           maxSessions: MAX_SESSIONS,
-          currentSessions: sessions.size
+          currentSessions: sessions.size,
         });
       }
 
       const uploadedData = req.body;
 
       // Validate that it's valid JSON
-      if (!uploadedData || typeof uploadedData !== 'object') {
+      if (!uploadedData || typeof uploadedData !== "object") {
-        return res.status(400).json({ error: 'Invalid JSON data' });
+        return res.status(400).json({ error: "Invalid JSON data" });
       }
 
       // Check data size
-      const dataSize = Buffer.byteLength(JSON.stringify(uploadedData), 'utf8');
+      const dataSize = Buffer.byteLength(JSON.stringify(uploadedData), "utf8");
       if (dataSize > MAX_SAMPLE_SIZE) {
         return res.status(413).json({
-          error: 'Sample data too large',
+          error: "Sample data too large",
           maxSize: MAX_SAMPLE_SIZE,
-          receivedSize: dataSize
+          receivedSize: dataSize,
         });
       }
 
@@ -192,69 +184,62 @@ function createApp() {
       const encryptedData = encrypt(uploadedData, key);
 
       sessions.set(sessionId, {
-        salt: salt.toString('hex'),
+        salt: salt.toString("hex"),
         encryptedData,
         state: stateGuid,
         createdAt: Date.now(),
-        accessed: false
+        accessed: false,
       });
 
-      console.log(`📁 Session created: ${sessionId.substring(0, 8)}... (${sessions.size}/${MAX_SESSIONS})`);
+      console.log(
+        `📁 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,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       });
 
       // Provide more specific error messages based on error type
-      if (error.name === 'SyntaxError') {
+      if (error.name === "SyntaxError") {
         return res.status(400).json({
-          error: 'Invalid JSON data format',
+          error: "Invalid JSON data format",
-          details: 'The uploaded data could not be parsed as valid JSON'
+          details: "The uploaded data could not be parsed as valid JSON",
         });
-      } else if (error.message.includes('encrypt')) {
+      } else if (error.message.includes("encrypt")) {
         return res.status(500).json({
-          error: 'Encryption failed',
+          error: "Encryption failed",
-          details: 'Failed to encrypt session data. Please try again with a new API key.'
+          details:
+            "Failed to encrypt session data. Please try again with a new API key.",
         });
-      } else if (error.message.includes('PBKDF2')) {
+      } else if (error.message.includes("PBKDF2")) {
         return res.status(500).json({
-          error: 'Key derivation failed',
+          error: "Key derivation failed",
-          details: 'Failed to derive encryption key from API key'
+          details: "Failed to derive encryption key from API key",
         });
       } else {
         return res.status(500).json({
-          error: 'Upload processing failed',
+          error: "Upload processing failed",
-          details: 'An unexpected error occurred while processing your upload. Please try again.'
+          details:
+            "An unexpected error occurred while processing your upload. Please try again.",
         });
       }
     }
   });
 
-  app.get('/api/v1/sample', (req, res) => {
+  app.get("/api/v1/sample", (req, res) => {
     try {
-      // Check if request is from localhost - if so, skip API key validation
+      const apiKey = req.headers["x-api-key"];
-      const isFromLocalhost = isLocalhostRequest(req);
-      let apiKey = req.headers['x-api-key'];
 
-      if (!isFromLocalhost) {
+      // Validate API key header
-        // Validate API key header for remote clients
       if (!apiKey || !isValidApiKey(apiKey)) {
-          return res.status(403).json({ error: 'Invalid or missing X-API-Key header' });
+        return res
-        }
+          .status(403)
-      } else {
+          .json({ error: "Invalid or missing X-API-Key header" });
-        // For localhost requests, use consistent API key for session persistence
-        if (!apiKey || !isValidApiKey(apiKey)) {
-          apiKey = LOCALHOST_API_KEY;
-        }
       }
 
       const sessionId = getSessionId(apiKey);
@@ -265,64 +250,62 @@ function createApp() {
       }
 
       // Decrypt data
-      const salt = Buffer.from(session.salt, 'hex');
+      const salt = Buffer.from(session.salt, "hex");
       const key = deriveKey(apiKey, salt);
       const decryptedData = decrypt(session.encryptedData, key);
 
       // Remove session after first access (one-time use)
       sessions.delete(sessionId);
-      console.log(`📤 Sample data retrieved and session cleared: ${sessionId.substring(0, 8)}...`);
+      console.log(
+        `📤 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,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       });
 
       // Provide more specific error messages based on error type
-      if (error.message.includes('decrypt')) {
+      if (error.message.includes("decrypt")) {
         return res.status(500).json({
-          error: 'Decryption failed',
+          error: "Decryption failed",
-          details: 'Failed to decrypt session data. The session may be corrupted or the API key may be incorrect.'
+          details:
+            "Failed to decrypt session data. The session may be corrupted or the API key may be incorrect.",
         });
-      } else if (error.message.includes('JSON')) {
+      } else if (error.message.includes("JSON")) {
         return res.status(500).json({
-          error: 'Data corruption detected',
+          error: "Data corruption detected",
-          details: 'The stored session data appears to be corrupted and cannot be parsed.'
+          details:
+            "The stored session data appears to be corrupted and cannot be parsed.",
         });
-      } else if (error.name === 'TypeError') {
+      } else if (error.name === "TypeError") {
         return res.status(500).json({
-          error: 'Session data format error',
+          error: "Session data format error",
-          details: 'The session data format is invalid or corrupted.'
+          details: "The session data format is invalid or corrupted.",
         });
       } else {
         return res.status(500).json({
-          error: 'Sample retrieval failed',
+          error: "Sample retrieval failed",
-          details: 'An unexpected error occurred while retrieving sample data. The session may have been corrupted.'
+          details:
+            "An unexpected error occurred while retrieving sample data. The session may have been corrupted.",
         });
       }
     }
   });
 
-  app.get('/api/v1/state', (req, res) => {
+  app.get("/api/v1/state", (req, res) => {
     try {
-      // Check if request is from localhost - if so, skip API key validation
+      const apiKey = req.headers["x-api-key"];
-      const isFromLocalhost = isLocalhostRequest(req);
-      let apiKey = req.headers['x-api-key'];
 
-      if (!isFromLocalhost) {
+      // Validate API key header
-        // Validate API key header for remote clients
       if (!apiKey || !isValidApiKey(apiKey)) {
-          return res.status(403).json({ error: 'Invalid or missing X-API-Key header' });
+        return res
-        }
+          .status(403)
-      } else {
+          .json({ error: "Invalid or missing X-API-Key header" });
-        // For localhost requests, use consistent API key for session persistence
-        if (!apiKey || !isValidApiKey(apiKey)) {
-          apiKey = LOCALHOST_API_KEY;
-        }
       }
 
       const sessionId = getSessionId(apiKey);
@@ -335,50 +318,56 @@ function createApp() {
 
       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,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       });
 
       // Provide more specific error messages
-      if (error.message.includes('API key')) {
+      if (error.message.includes("API key")) {
         return res.status(403).json({
-          error: 'API key processing failed',
+          error: "API key processing failed",
-          details: 'Failed to process the provided API key'
+          details: "Failed to process the provided API key",
         });
       } else {
         return res.status(500).json({
-          error: 'State retrieval failed',
+          error: "State retrieval failed",
-          details: 'An unexpected error occurred while retrieving session state. Please try again.'
+          details:
+            "An unexpected error occurred while retrieving session state. Please try again.",
         });
       }
     }
   });
 
-  // Health endpoint (no auth required)
+  // Status endpoint (no auth required) - detailed information
-  app.get('/api/v1/health', (req, res) => {
+  app.get("/api/v1/status", (req, res) => {
-    cleanupExpiredSessions(); // Cleanup on health check
+    cleanupExpiredSessions(); // Cleanup on status check
     res.json({
-      status: 'healthy',
+      status: "healthy",
       sessions: {
         current: sessions.size,
         max: MAX_SESSIONS,
-        available: MAX_SESSIONS - sessions.size
+        available: MAX_SESSIONS - sessions.size,
       },
       limits: {
         maxSessions: MAX_SESSIONS,
         maxSampleSize: MAX_SAMPLE_SIZE,
-        maxSessionTTL: MAX_SESSION_TTL
+        maxSessionTTL: MAX_SESSION_TTL,
       },
-      uptime: process.uptime()
+      uptime: process.uptime(),
     });
   });
 
+  // Health endpoint (no auth required) - simple OK response
+  app.get("/api/v1/health", (req, res) => {
+    res.type("text/plain").send("OK");
+  });
+
   // Serve React app for all other routes
-  app.get('*', (req, res) => {
+  app.get("*", (req, res) => {
-    res.sendFile(path.join(__dirname, 'build', 'index.html'));
+    res.sendFile(path.join(__dirname, "build", "index.html"));
   });
 
   return app;
@@ -386,37 +375,84 @@ function createApp() {
 
 // Start server if this file is run directly
 if (require.main === module) {
-  // Parse command line arguments
+  const { values } = parseArgs({
-  const args = process.argv.slice(2);
+    options: {
-  let listenAddr = process.env.LISTEN_ADDR || '127.0.0.1';
+      "listen-addr": {
-  let listenPort = process.env.LISTEN_PORT || 3000;
+        type: "string",
+        short: "h",
+        default: process.env.LISTEN_ADDR || "127.0.0.1",
+      },
+      port: {
+        type: "string",
+        short: "p",
+        default: process.env.LISTEN_PORT || "3000",
+      },
+      dev: {
+        type: "boolean",
+        default: process.env.DEV_MODE === "true" || false,
+      },
+    },
+  });
 
-  for (let i = 0; i < args.length; i++) {
+  const DEV_MODE = values.dev;
-    if (args[i] === '-h' || args[i] === '--listen-addr') {
+  const app = createApp(DEV_MODE);
-      listenAddr = args[i + 1];
+  const PORT = parseInt(values.port);
-      i++;
+  const HOST = values["listen-addr"];
-    } else if (args[i] === '-p' || args[i] === '--port') {
-      listenPort = args[i + 1];
-      i++;
-    }
-  }
-
-  const app = createApp();
-  const PORT = parseInt(listenPort);
-  const HOST = listenAddr;
 
   app.listen(PORT, HOST, () => {
-    console.log(`🚀 JMESPath Playground Server running on http://${HOST}:${PORT}`);
+    console.log(`JMESPath Playground Server running`);
-    console.log(`📊 Configuration:`);
+    if (DEV_MODE) {
+      console.log(`   🔧 Development Mode Enabled`);
+    }
+
+    // Show actual accessible URLs
+    if (HOST === "0.0.0.0") {
+      console.log(`   Listening on all interfaces:`);
+      const interfaces = os.networkInterfaces();
+      for (const [name, addrs] of Object.entries(interfaces)) {
+        for (const addr of addrs) {
+          if (addr.family === "IPv4" && !addr.internal) {
+            console.log(`   http://${addr.address}:${PORT}`);
+          }
+        }
+      }
+      // Also show localhost for local access
+      console.log(`   http://127.0.0.1:${PORT}`);
+    } else {
+      console.log(`   http://${HOST}:${PORT}`);
+    }
+
+    console.log(`Configuration:`);
     console.log(`   Max Sessions: ${MAX_SESSIONS}`);
-    console.log(`   Max Sample Size: ${(MAX_SAMPLE_SIZE / 1024 / 1024).toFixed(1)}MB`);
+    console.log(
-    console.log(`   Session TTL: ${(MAX_SESSION_TTL / 1000 / 60).toFixed(0)} minutes`);
+      `   Max Sample Size: ${(MAX_SAMPLE_SIZE / 1024 / 1024).toFixed(1)}MB`,
-    console.log(`🔗 API endpoints:`);
+    );
-    console.log(`   POST http://${HOST}:${PORT}/api/v1/upload (requires X-API-Key)`);
+    console.log(
-    console.log(`   GET  http://${HOST}:${PORT}/api/v1/sample (requires X-API-Key)`);
+      `   Session TTL: ${(MAX_SESSION_TTL / 1000 / 60).toFixed(0)} minutes`,
-    console.log(`   GET  http://${HOST}:${PORT}/api/v1/state (requires X-API-Key)`);
+    );
-    console.log(`   GET  http://${HOST}:${PORT}/api/v1/health (public)`);
+    console.log(
-    console.log(`🔐 Security: AES-256-GCM encryption with PBKDF2 key derivation`);
+      "   Security: AES-256-GCM encryption with PBKDF2 (100k iterations)",
+    );
+
+    // Show base API URL
+    let apiBaseUrl;
+    if (HOST === "0.0.0.0") {
+      const interfaces = os.networkInterfaces();
+      let firstIP = "127.0.0.1";
+      outer: for (const addrs of Object.values(interfaces)) {
+        for (const addr of addrs) {
+          if (addr.family === "IPv4" && !addr.internal) {
+            firstIP = addr.address;
+            break outer;
+          }
+        }
+      }
+      apiBaseUrl = `http://${firstIP}:${PORT}/api/v1`;
+    } else {
+      apiBaseUrl = `http://${HOST}:${PORT}/api/v1`;
+    }
+
+    console.log(`API Base URL: ${apiBaseUrl}`);
   });
 }
 

src/App.css

@@ -1,676 +1,46 @@
-/* JMESPath Testing Tool Custom Styles */
+/* JMESPath Testing Tool - Minimal Styles */
 
 :root {
-  /* Light theme colors */
+  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-  --bg-primary-light: #ffffff;
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-  --bg-secondary-light: #f8f9fa;
+    "Helvetica Neue", sans-serif;
-  --text-primary-light: #212529;
+  --font-mono: "JetBrains Mono", "Fira Code", "Noto Sans Mono", "Consolas", "Monaco", "Courier New", monospace;
-  --text-secondary-light: #495057;
-  --text-muted-light: #6c757d;
-  --border-light: #dee2e6;
-  --border-input-light: #ced4da;
-  --accent-color: #007bff;
-  --accent-shadow: rgba(0, 123, 255, 0.25);
-
-  /* Dark theme colors */
-  --bg-primary-dark: #1a1a1a;
-  --bg-secondary-dark: #2d2d2d;
-  --bg-card-dark: #323232;
-  --text-primary-dark: #ffffff;
-  --text-secondary-dark: #e9ecef;
-  --text-muted-dark: #adb5bd;
-  --border-dark: #495057;
-  --border-input-dark: #6c757d;
-
-  /* State colors */
-  --success-bg-light: #d4edda;
-  --success-border-light: #c3e6cb;
-  --success-text-light: #155724;
-  --success-bg-dark: #1e4a1e;
-  --success-border-dark: #2c6d2c;
-  --success-text-dark: #d4edda;
-
-  --error-bg-light: #f8d7da;
-  --error-border-light: #f5c6cb;
-  --error-text-light: #721c24;
-  --error-bg-dark: #4a1e1e;
-  --error-border-dark: #6d2c2c;
-  --error-text-dark: #f8d7da;
-
-  /* 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 {
-  /* Removed gradient background to fix text visibility */
   transition: background-color 0.3s ease;
 }
 
-/* Custom card styling */
+#root {
-.card {
+  display: flex;
-  border: none;
+  flex-direction: column;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  min-height: 100vh;
-  border-radius: 8px;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-.card-header {
+/* Scrollbar styling for a cleaner look */
-  background-color: #f8f9fa;
+::-webkit-scrollbar {
-  border-bottom: 2px solid #dee2e6;
+  width: 8px;
-  font-weight: 600;
+  height: 8px;
-  color: #212529;
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
-/* Input and textarea styling */
+::-webkit-scrollbar-track {
-.jmespath-input, .json-input, .result-output {
+  background: transparent;
-  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 {
+::-webkit-scrollbar-thumb {
-  font-size: 14px;
+  background: rgba(0, 0, 0, 0.1);
-  padding: 10px;
+  border-radius: 4px;
-  background-color: var(--bg-primary-light);
-  border: 1px solid var(--border-input-light);
-  color: var(--text-secondary-light);
 }
 
-.json-input, .result-output {
+[data-mui-color-scheme="dark"] ::-webkit-scrollbar-thumb {
-  font-size: 13px;
+  background: rgba(255, 255, 255, 0.1);
-  background-color: var(--bg-secondary-light);
-  border: 1px solid var(--border-light);
-  color: var(--text-secondary-light);
-  line-height: 1.4;
 }
 
-/* Button styling */
+::-webkit-scrollbar-thumb:hover {
-.btn {
+  background: rgba(0, 0, 0, 0.2);
-  transition: all var(--transition-fast);
 }
 
-.btn:hover {
-  transform: translateY(-1px);
-}
-
-/* Footer styling */
-footer {
-  flex-shrink: 0;
-}
-
-footer a {
-  color: var(--text-muted-light);
-  transition: color var(--transition-fast);
-}
-
-footer a:hover {
-  color: var(--text-secondary-light);
-}
-
-/* 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;
-  }
-}
-
-/* Manual theme overrides */
-.theme-light {
-  /* Force light theme regardless of system preference */
-  background-color: #ffffff !important;
-  color: #212529 !important;
-}
-
-.theme-light .header-section {
-  background-color: transparent !important;
-  border-bottom: none !important;
-}
-
-.theme-light .card {
-  background-color: #ffffff !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-  color: #212529 !important;
-}
-
-.theme-light .card-header {
-  background-color: #f8f9fa !important;
-  border-bottom: 2px solid #dee2e6 !important;
-  color: #212529 !important;
-}
-
-.theme-light .jmespath-input {
-  background-color: #ffffff;
-  border: 1px solid #ced4da;
-  color: #495057;
-}
-
-.theme-light .json-input,
-.theme-light .result-output {
-  background-color: #f8f9fa !important;
-  border: 1px solid #dee2e6 !important;
-  color: #495057 !important;
-}
-
-/* Success and Error state overrides - must come after base input rules */
-.theme-light .jmespath-input.success {
-  background-color: #d4edda !important;
-  border-color: #c3e6cb !important;
-  color: #155724 !important;
-}
-
-.theme-light .jmespath-input.error {
-  background-color: #f8d7da !important;
-  border-color: #f5c6cb !important;
-  color: #721c24 !important;
-}
-
-.theme-light .text-muted {
-  color: #6c757d !important;
-}
-
-.theme-light .jmespath-input:focus {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 0.2rem var(--accent-shadow);
-}
-
-.theme-light .jmespath-input::placeholder {
-  color: var(--text-muted-light) !important;
-}
-
-.theme-light .json-input::placeholder,
-.theme-light .result-output::placeholder {
-  color: var(--text-muted-light) !important;
-}
-
-.theme-light .json-input:focus,
-.theme-light .result-output:focus {
-  background-color: var(--bg-primary-light) !important;
-  border-color: var(--accent-color) !important;
-  color: var(--text-secondary-light) !important;
-  box-shadow: 0 0 0 0.2rem var(--accent-shadow) !important;
-}
-
-.theme-light .output-section .form-control {
-  background-color: #f8f9fa !important;
-}
-
-.theme-light .alert-danger {
-  background-color: #f8d7da !important;
-  border-color: #f5c6cb !important;
-  color: #721c24 !important;
-}
-
-.theme-light .alert-success {
-  background-color: #d4edda !important;
-  border-color: #c3e6cb !important;
-  color: #155724 !important;
-}
-
-.theme-light .btn-primary {
-  background-color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light .btn-outline-secondary {
-  color: var(--btn-secondary) !important;
-  border-color: var(--btn-secondary) !important;
-}
-
-.theme-light .btn-outline-secondary:hover {
-  background-color: var(--btn-secondary) !important;
-  border-color: var(--btn-secondary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light .btn-outline-success {
-  color: var(--btn-success) !important;
-  border-color: var(--btn-success) !important;
-}
-
-.theme-light .btn-outline-success:hover {
-  background-color: var(--btn-success) !important;
-  border-color: var(--btn-success) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light .btn-outline-info {
-  color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-}
-
-.theme-light .btn-outline-info:hover {
-  background-color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light .btn-outline-primary {
-  color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-}
-
-.theme-light .btn-outline-primary:hover {
-  background-color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light .btn-outline-danger {
-  color: var(--btn-danger) !important;
-  border-color: var(--btn-danger) !important;
-}
-
-.theme-light .btn-outline-danger:hover {
-  background-color: var(--btn-danger) !important;
-  border-color: var(--btn-danger) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-light footer {
-  background-color: #f8f9fa !important;
-  border-top: 1px solid #dee2e6 !important;
-  color: #212529 !important;
-}
-
-.theme-light footer a {
-  color: #6c757d !important;
-}
-
-.theme-light footer a:hover {
-  color: #495057 !important;
-}
-
-/* Force dark theme regardless of system preference */
-.theme-dark {
-  background-color: var(--bg-primary-dark) !important;
-  color: var(--text-secondary-dark) !important;
-}
-
-.theme-dark .header-section {
-  background-color: var(--bg-secondary-dark) !important;
-  border-bottom: 1px solid #404040 !important;
-}
-
-.theme-dark .card {
-  background-color: var(--bg-secondary-dark) !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
-  color: var(--text-secondary-dark) !important;
-}
-
-.theme-dark .card-header {
-  background-color: var(--bg-card-dark) !important;
-  border-bottom: 2px solid #505050 !important;
-  color: var(--text-primary-dark) !important;
-}
-
-.theme-dark .jmespath-input {
-  background-color: var(--bg-card-dark);
-  border: 1px solid #505050;
-  color: var(--text-primary-dark);
-}
-
-/* Success and Error state overrides - must come after base input rules */
-.theme-dark .jmespath-input.success {
-  background-color: #1e4a1e !important;
-  border-color: #2c6d2c !important;
-  color: #d4edda !important;
-}
-
-.theme-dark .jmespath-input.error {
-  background-color: #4a1e1e !important;
-  border-color: #6d2c2c !important;
-  color: #f8d7da !important;
-}
-
-.theme-dark .jmespath-input::placeholder {
-  color: var(--text-muted-dark) !important;
-}
-
-.theme-dark .jmespath-input:focus {
-  border-color: var(--accent-color);
-}
-
-.theme-dark .json-input,
-.theme-dark .result-output {
-  background-color: #2a2a2a !important;
-  border: 1px solid #505050 !important;
-  color: var(--text-secondary-dark) !important;
-}
-
-.theme-dark .json-input::placeholder,
-.theme-dark .result-output::placeholder {
-  color: var(--text-muted-dark) !important;
-}
-
-.theme-dark .json-input:focus,
-.theme-dark .result-output:focus {
-  background-color: var(--bg-card-dark) !important;
-  border-color: var(--accent-color) !important;
-  color: var(--text-primary-dark) !important;
-}
-
-.theme-dark .output-section .form-control {
-  background-color: var(--bg-secondary-dark) !important;
-}
-
-.theme-dark .alert-danger {
-  background-color: #3d1a1a !important;
-  border-color: #dc3545 !important;
-  color: #f8d7da !important;
-}
-
-.theme-dark .alert-success {
-  background-color: #1e4a1e !important;
-  border-color: #2c6d2c !important;
-  color: #d4edda !important;
-}
-
-.theme-dark .text-muted {
-  color: var(--text-muted-dark) !important;
-}
-
-.theme-dark footer {
-  background-color: var(--bg-secondary-dark) !important;
-  border-top: 1px solid #404040 !important;
-  color: var(--text-secondary-dark) !important;
-}
-
-.theme-dark footer a {
-  color: var(--text-muted-dark) !important;
-}
-
-.theme-dark footer a:hover {
-  color: var(--text-secondary-dark) !important;
-}
-
-.theme-dark .btn-primary {
-  background-color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-dark .btn-outline-secondary {
-  color: var(--btn-secondary) !important;
-  border-color: var(--btn-secondary) !important;
-}
-.theme-dark .btn-outline-secondary:hover {
-  background-color: var(--btn-secondary) !important;
-  border-color: var(--btn-secondary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-dark .btn-outline-success {
-  color: var(--btn-success) !important;
-  border-color: var(--btn-success) !important;
-}
-.theme-dark .btn-outline-success:hover {
-  background-color: var(--btn-success) !important;
-  border-color: var(--btn-success) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-dark .btn-outline-info {
-  color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-}
-.theme-dark .btn-outline-info:hover {
-  background-color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-  color: var(--bg-primary-light) !important;
-}
-.theme-light .btn-outline-info {
-  color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-}
-.theme-light .btn-outline-info:hover {
-  background-color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-  color: var(--bg-primary-light) !important;
-}
-.theme-dark .btn-outline-info {
-  color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-}
-.theme-dark .btn-outline-info:hover {
-  background-color: var(--btn-info) !important;
-  border-color: var(--btn-info) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-dark .btn-outline-primary {
-  color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-}
-.theme-dark .btn-outline-primary:hover {
-  background-color: var(--btn-primary) !important;
-  border-color: var(--btn-primary) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-.theme-dark .btn-outline-danger {
-  color: var(--btn-danger) !important;
-  border-color: var(--btn-danger) !important;
-}
-.theme-dark .btn-outline-danger:hover {
-  background-color: var(--btn-danger) !important;
-  border-color: var(--btn-danger) !important;
-  color: var(--bg-primary-light) !important;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  body:not(.theme-light):not(.theme-dark) {
-    background-color: var(--bg-primary-dark);
-    color: var(--text-secondary-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .header-section {
-    background-color: var(--bg-secondary-dark);
-    border-bottom: 1px solid var(--border-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .card {
-    background-color: var(--bg-secondary-dark);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-    color: var(--text-secondary-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .card-header {
-    background-color: var(--bg-card-dark);
-    border-bottom: 2px solid var(--border-dark);
-    color: var(--text-primary-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .jmespath-input {
-    background-color: var(--bg-card-dark) !important;
-    border: 1px solid var(--border-input-dark) !important;
-    color: var(--text-primary-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) .jmespath-input.success {
-    background-color: var(--success-bg-dark) !important;
-    border-color: var(--success-border-dark) !important;
-    color: var(--success-text-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) .jmespath-input.error {
-    background-color: var(--error-bg-dark) !important;
-    border-color: var(--error-border-dark) !important;
-    color: var(--error-text-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) .jmespath-input::placeholder {
-    color: var(--text-muted-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .jmespath-input:focus {
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 0.2rem var(--accent-shadow);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .json-input,
-  body:not(.theme-light):not(.theme-dark) .result-output {
-    background-color: #2a2a2a;
-    border: 1px solid var(--border-input-dark);
-    color: var(--text-secondary-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .json-input::placeholder,
-  body:not(.theme-light):not(.theme-dark) .result-output::placeholder {
-    color: var(--text-muted-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .json-input:focus,
-  body:not(.theme-light):not(.theme-dark) .result-output:focus {
-    background-color: #323232;
-    border-color: var(--accent-color);
-    color: var(--text-primary-dark);
-    box-shadow: 0 0 0 0.2rem var(--accent-shadow);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .alert-danger {
-    background-color: var(--error-bg-dark);
-    border-color: var(--error-border-dark);
-    color: var(--error-text-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .alert-success {
-    background-color: var(--success-bg-dark);
-    border-color: var(--success-border-dark);
-    color: var(--success-text-dark);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .text-muted {
-    color: var(--text-muted-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) footer.bg-light {
-    background-color: var(--bg-secondary-dark) !important;
-    border-top: 1px solid var(--border-dark) !important;
-    color: var(--text-secondary-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) footer .text-muted {
-    color: var(--text-muted-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) footer a {
-    color: var(--text-muted-dark) !important;
-  }
-
-  body:not(.theme-light):not(.theme-dark) footer a:hover {
-    color: var(--text-secondary-dark) !important;
-  }
-
-  /* Bootstrap dark mode overrides */
-  body:not(.theme-light):not(.theme-dark) .btn-outline-info {
-    color: var(--btn-info);
-    border-color: var(--btn-info);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .btn-outline-info:hover {
-    background-color: var(--btn-info);
-    border-color: var(--btn-info);
-    color: var(--bg-primary-light);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .btn-outline-success {
-    color: var(--btn-success);
-    border-color: var(--btn-success);
-  }
-
-  body:not(.theme-light):not(.theme-dark) .btn-outline-success:hover {
-    background-color: var(--btn-success);
-    border-color: var(--btn-success);
-    color: var(--bg-primary-light);
-  }
-
-  .btn-outline-info {
-    color: #17a2b8;
-    border-color: #17a2b8;
-  }
-
-  .btn-outline-info:hover {
-    background-color: #17a2b8;
-    border-color: #17a2b8;
-    color: #fff;
-  }
-
-  .btn-outline-primary {
-    color: #007bff;
-    border-color: #007bff;
-  }
-
-  .btn-outline-primary:hover {
-    background-color: #007bff;
-    border-color: #007bff;
-    color: #fff;
-  }
-
-  .btn-outline-secondary {
-    color: #6c757d;
-    border-color: #6c757d;
-  }
-
-  .btn-outline-secondary:hover {
-    background-color: #6c757d;
-    border-color: var(--btn-secondary);
-    color: #fff;
-  }
-
-  .btn-outline-danger {
-    color: var(--btn-danger);
-    border-color: var(--btn-danger);
-  }
-
-  .btn-outline-danger:hover {
-    background-color: var(--btn-danger);
-    border-color: var(--btn-danger);
-    color: #fff;
-  }
-}

src/App.js

@@ -1,200 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import MainPage from './components/MainPage';
-import ApiKeyPage from './components/ApiKeyPage';
-import './App.css';
-
-// Utility function to generate a cryptographically secure API key
-function generateApiKey() {
-  const array = new Uint8Array(16);
-  
-  // Use crypto.getRandomValues if available (browser), fallback for tests
-  if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
-    crypto.getRandomValues(array);
-  } else {
-    // Fallback for test environments - not cryptographically secure
-    for (let i = 0; i < array.length; i++) {
-      array[i] = Math.floor(Math.random() * 256);
-    }
-  }
-  
-  return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
-}
-
-// JMESPath Testing Tool - Main Application Component
-function App() {
-  const [currentPage, setCurrentPage] = useState('main'); // 'main' or 'apikey'
-  const [theme, setTheme] = useState(() => {
-    // Load theme from localStorage or default to 'auto'
-    return localStorage.getItem('theme') || 'auto';
-  });
-  const [showReloadButton, setShowReloadButton] = useState(false);
-  const [currentStateGuid, setCurrentStateGuid] = useState(null);
-  const [sampleData, setSampleData] = useState(null);
-  const [apiKey, setApiKey] = useState(() => {
-    // Load API key from localStorage or generate new one
-    const stored = localStorage.getItem('jmespath-api-key');
-    if (stored && /^[0-9a-f]{32}$/i.test(stored)) {
-      return stored;
-    }
-    const newKey = generateApiKey();
-    localStorage.setItem('jmespath-api-key', newKey);
-    return newKey;
-  });
-
-  // Theme management
-  useEffect(() => {
-    // Apply theme to document
-    const applyTheme = (selectedTheme) => {
-      const root = document.documentElement;
-      const body = document.body;
-
-      // Clear existing theme classes from both html and body
-      root.className = '';
-      body.classList.remove('theme-light', 'theme-dark');
-
-      if (selectedTheme === 'light') {
-        body.classList.add('theme-light');
-      } else if (selectedTheme === 'dark') {
-        body.classList.add('theme-dark');
-      }
-      // 'auto' uses CSS media queries (no class needed)
-    };
-
-    applyTheme(theme);
-    
-    // Save theme preference
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  // Check if we're running on localhost
-  const isRunningOnLocalhost = () => {
-    const hostname = window.location.hostname;
-    return hostname === 'localhost' || 
-           hostname === '127.0.0.1' || 
-           hostname.startsWith('127.') || 
-           hostname === '::1';
-  };
-
-  // Get headers for API requests (omit API key for localhost)
-  const getApiHeaders = () => {
-    const headers = {
-      'Accept': 'application/json'
-    };
-    
-    // Only send API key for non-localhost requests
-    if (!isRunningOnLocalhost()) {
-      headers['X-API-Key'] = apiKey;
-    }
-    
-    return headers;
-  };
-
-  // Load sample data from API on startup and setup periodic state checking
-  useEffect(() => {
-    loadSampleData();
-
-    // Check for state changes every 5 seconds
-    const interval = setInterval(checkStateChange, 5000);
-    return () => clearInterval(interval);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiKey]);
-
-  // Check if state has changed (new data uploaded)
-  const checkStateChange = async () => {
-    try {
-      const response = await fetch('/api/v1/state', {
-        headers: getApiHeaders()
-      });
-      
-      if (response.ok) {
-        const stateData = await response.json();
-        if (stateData.state && stateData.state !== currentStateGuid) {
-          setShowReloadButton(true);
-        }
-      }
-    } catch (error) {
-      // Silently handle state check errors
-      console.log('State check failed:', error);
-    }
-  };
-
-  // Load sample data from API
-  const loadSampleData = async () => {
-    try {
-      setShowReloadButton(false);
-      const response = await fetch('/api/v1/sample', {
-        headers: getApiHeaders()
-      });
-      
-      if (response.ok) {
-        const data = await response.json();
-        if (data) {
-          setSampleData(data);
-          console.log('Sample data loaded:', data);
-        }
-
-        // Update current state GUID
-        const stateResponse = await fetch('/api/v1/state', {
-          headers: getApiHeaders()
-        });
-        if (stateResponse.ok) {
-          const stateData = await stateResponse.json();
-          setCurrentStateGuid(stateData.state);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load sample data:', error);
-    }
-  };
-
-  // Regenerate API key
-  const regenerateApiKey = () => {
-    const newKey = generateApiKey();
-    setApiKey(newKey);
-    localStorage.setItem('jmespath-api-key', newKey);
-    setShowReloadButton(false);
-    setCurrentStateGuid(null);
-  };
-
-  const handleThemeChange = (newTheme) => {
-    setTheme(newTheme);
-  };
-
-  const handlePageChange = (newPage) => {
-    setCurrentPage(newPage);
-  };
-
-  return (
-    <div className="container-fluid vh-100 d-flex flex-column">
-      <Header 
-        theme={theme}
-        onThemeChange={handleThemeChange}
-        currentPage={currentPage}
-        onPageChange={handlePageChange}
-      />
-
-      {/* Main Content Section - flex-grow to fill space */}
-      <div className="container-fluid flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
-        {currentPage === 'main' ? (
-          <MainPage 
-            apiKey={apiKey}
-            showReloadButton={showReloadButton}
-            onReloadSampleData={loadSampleData}
-            initialSampleData={sampleData}
-          />
-        ) : (
-          <ApiKeyPage 
-            apiKey={apiKey}
-            onRegenerateApiKey={regenerateApiKey}
-          />
-        )}
-      </div>
-
-      <Footer />
-    </div>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,221 @@
+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";
+import ApiKeyPage from "./components/ApiKeyPage";
+import "./App.css";
+
+// Utility function to generate a cryptographically secure API key
+function generateApiKey() {
+  const array = new Uint8Array(16);
+
+  // Use crypto.getRandomValues if available (browser), fallback for tests
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(array);
+  } else {
+    // Fallback for test environments - not cryptographically secure
+    for (let i = 0; i < array.length; i++) {
+      array[i] = Math.floor(Math.random() * 256);
+    }
+  }
+
+  return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
+    "",
+  );
+}
+
+// JMESPath Testing Tool - Main Application Component
+function App() {
+  const [currentPage, setCurrentPage] = useState("main"); // 'main' or 'apikey'
+  const [theme, setTheme] = useState(() => {
+    // Load theme from localStorage or default to 'auto'
+    return localStorage.getItem("theme") || "auto";
+  });
+  const [shellType, setShellType] = useState(() => {
+    // Load shell type from localStorage or default to 'bash'
+    return localStorage.getItem("jmespath-shell-type") || "bash";
+  });
+  const [showReloadButton, setShowReloadButton] = useState(false);
+  const [currentStateGuid, setCurrentStateGuid] = useState(null);
+  const [jmespathExpression, setJmespathExpression] =
+    useState("people[0].name");
+  const [jsonData, setJsonData] = useState(`{
+  "people": [
+    {
+      "name": "John Doe",
+      "age": 30,
+      "city": "New York"
+    },
+    {
+      "name": "Jane Smith",
+      "age": 25,
+      "city": "Los Angeles"
+    }
+  ],
+  "total": 2
+}`);
+  const [apiKey, setApiKey] = useState(() => {
+    // Load API key from localStorage or generate new one
+    const stored = localStorage.getItem("jmespath-api-key");
+    if (stored && /^[0-9a-f]{32}$/i.test(stored)) {
+      return stored;
+    }
+    const newKey = generateApiKey();
+    localStorage.setItem("jmespath-api-key", newKey);
+    return newKey;
+  });
+
+  const getApiHeaders = () => ({
+    "Accept": "application/json",
+    "x-api-key": apiKey,
+  });
+
+  const { setMode } = useColorScheme();
+
+  // 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
+    const interval = setInterval(checkStateChange, 5000);
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiKey]);
+
+  // Check if state has changed (new data uploaded)
+  const checkStateChange = async () => {
+    try {
+      const response = await fetch("/api/v1/state", {
+        headers: getApiHeaders(),
+      });
+
+      if (response.ok) {
+        const stateData = await response.json();
+        if (stateData.state && stateData.state !== currentStateGuid) {
+          setShowReloadButton(true);
+        }
+      }
+    } catch (error) {
+      // Silently handle state check errors
+    }
+  };
+
+  // Load sample data from API
+  const loadSampleData = async () => {
+    try {
+      setShowReloadButton(false);
+      const response = await fetch("/api/v1/sample", {
+        headers: getApiHeaders(),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data) {
+          setJsonData(JSON.stringify(data, null, 2));
+        }
+
+        // Update current state GUID
+        const stateResponse = await fetch("/api/v1/state", {
+          headers: getApiHeaders(),
+        });
+        if (stateResponse.ok) {
+          const stateData = await stateResponse.json();
+          setCurrentStateGuid(stateData.state);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load sample data:", error);
+    }
+  };
+
+  // Regenerate API key
+  const regenerateApiKey = () => {
+    const newKey = generateApiKey();
+    setApiKey(newKey);
+    localStorage.setItem("jmespath-api-key", newKey);
+    setShowReloadButton(false);
+    setCurrentStateGuid(null);
+  };
+
+  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 (
+    <>
+      <CssBaseline />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100vh",
+          overflow: "hidden",
+          bgcolor: "background.default",
+        }}
+      >
+        <Header
+          theme={theme}
+          onThemeChange={handleThemeChange}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+        />
+
+        {/* Main Content Section - flex-grow to fill space */}
+        <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>
+    </>
+  );
+}
+
+export default App;

src/App.test.jsx

@@ -1,13 +1,27 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import App from './App';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// Mock localStorage
+const localStorageMock = (function() {
+  let store = {};
+  return {
+    getItem: vi.fn((key) => store[key] || null),
+    setItem: vi.fn((key, value) => { store[key] = value.toString(); }),
+    clear: vi.fn(() => { store = {}; }),
+    removeItem: vi.fn((key) => { delete store[key]; })
+  };
+})();
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
 
 // Mock fetch for API calls
-global.fetch = jest.fn();
+global.fetch = vi.fn();
 
 describe('App Component', () => {
   beforeEach(() => {
-    fetch.mockClear();
+    vi.clearAllMocks();
     // Mock successful API responses
     fetch.mockImplementation((url) => {
       if (url.includes('/api/v1/sample')) {
@@ -35,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();
     });
 
@@ -55,17 +69,32 @@ describe('App Component', () => {
 
     test('renders version number', () => {
       render(<App />);
-      const versionText = screen.getByText(/v1\.1\.7-dev/);
+      // Version can be either v1.2.3 format (release), v1.2.3-dev/test format (legacy dev), or "unknown" format (new dev)
+      const versionText = screen.getByText(/(v\d+\.\d+\.\d+(-dev|-test)?|unknown)/);
       expect(versionText).toBeInTheDocument();
+
+      // Check if it's a dev/test/unknown build
+      const isDevBuild = versionText.textContent.includes('-dev') || 
+                        versionText.textContent.includes('-test') ||
+                        versionText.textContent.includes('unknown');
+
+      // Additional validations can be added here based on build type
+      if (isDevBuild) {
+        // Dev/test/unknown specific validations
+        expect(versionText.textContent).toMatch(/(v\d+\.\d+\.\d+-(dev|test)|unknown)/);
+      } else {
+        // Release build validations - just check that version pattern exists in the text
+        expect(versionText.textContent).toMatch(/v\d+\.\d+\.\d+/);
+      }
     });
 
     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();
     });
   });
 
@@ -79,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
@@ -124,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
@@ -158,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();
     });
   });
 
@@ -193,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');
@@ -212,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"]}' } });
@@ -231,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);
 
@@ -259,7 +312,7 @@ describe('App Component', () => {
       await waitFor(() => {
         expect(fetch).toHaveBeenCalledWith('/api/v1/sample', expect.objectContaining({
           headers: expect.objectContaining({
-            'X-API-Key': expect.any(String)
+            'Accept': 'application/json'
           })
         }));
       });
@@ -302,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.js

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-
-function ApiKeyPage({ apiKey, onRegenerateApiKey }) {
-  const [copySuccess, setCopySuccess] = useState(false);
-
-  const handleCopyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(apiKey);
-      setCopySuccess(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (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">
-      <div className="col-md-8">
-        <div className="card">
-          <div className="card-header">
-            <h5 className="mb-0">🔐 API Key Management</h5>
-          </div>
-          <div className="card-body">
-            <div className="mb-4">
-              <label className="form-label fw-bold">Your API Key:</label>
-              <div className="input-group">
-                <input
-                  type="text"
-                  className="form-control font-monospace"
-                  value={apiKey}
-                  readOnly
-                />
-                <button
-                  className={`btn ${copySuccess ? 'btn-success' : 'btn-outline-secondary'}`}
-                  onClick={handleCopyToClipboard}
-                  title="Copy API key to clipboard"
-                >
-                  {copySuccess ? '✓ Copied!' : '📋 Copy'}
-                </button>
-                <button
-                  className="btn btn-outline-primary"
-                  onClick={onRegenerateApiKey}
-                  title="Generate new API key"
-                >
-                  🔄 Regenerate
-                </button>
-              </div>
-              <div className="form-text">
-                This API key is used to encrypt and authenticate data uploads from remote clients.
-                <strong>Note:</strong> Requests from localhost (127.0.0.1) do not require an API key.
-              </div>
-            </div>
-
-            <div className="mb-4">
-              <h6>📡 Remote Data Upload API</h6>
-              <p className="text-muted">
-                External tools can upload sample data remotely using the REST API.
-                For remote clients, the API key is required for authentication:
-              </p>
-              <pre className="bg-light p-3 rounded border">
-<code>{`curl -s -X POST \\
-    -H "Content-Type: application/json" \\
-    -H "Accept: application/json" \\
-    -H "X-API-Key: ${apiKey}" \\
-    --data @{{JSON_FILE_NAME}} \\
-    "${window.location.origin}/api/v1/upload"`}</code>
-              </pre>
-              <div className="form-text">
-                Replace <code>{'{{JSON_FILE_NAME}}'}</code> with the path to your JSON file containing the sample data.
-                <br />
-                <strong>For localhost clients:</strong> The X-API-Key header is optional and can be omitted.
-              </div>
-            </div>
-
-            <div className="alert alert-info">
-              <h6 className="alert-heading">ℹ️ How it works:</h6>
-              <ul className="mb-0">
-                <li>Remote clients require API key authentication for security</li>
-                <li>Localhost clients (127.0.0.1) can access the API without authentication</li>
-                <li>Your data is encrypted using AES-256-GCM with PBKDF2 key derivation</li>
-                <li>Data is automatically cleared after first retrieval (one-time use)</li>
-                <li>Sessions expire after 1 hour for security</li>
-                <li>Maximum 100 concurrent sessions supported</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ApiKeyPage;

src/components/ApiKeyPage.jsx

@@ -0,0 +1,205 @@
+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);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  };
+
+  return (
+    <Box sx={{ position: "relative", my: 2 }}>
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          pr: 6,
+          bgcolor: "action.hover",
+          fontFamily: "'Noto Sans Mono', monospace",
+          fontSize: "0.85rem",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          position: "relative",
+          borderColor: "divider",
+        }}
+      >
+        <code>{code}</code>
+        <Tooltip title={copySuccess ? "Copied!" : "Copy code"}>
+          <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,
+}) {
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const handleCopyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(apiKey);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1, py: 4, px: 2 }}>
+      <Grid container justifyContent="center">
+        <Grid size={{ xs: 12, md: 10, lg: 8 }}>
+          <Paper elevation={1} sx={{ p: { xs: 3, md: 5 }, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>
+            <Typography variant="h5" gutterBottom sx={{ mb: 4, fontWeight: 700, display: "flex", alignItems: "center", gap: 1.5, color: "text.primary" }}>
+              <KeyIcon color="primary" /> API Key Management
+            </Typography>
+
+            <Box sx={{ mb: 6 }}>
+              <Typography variant="subtitle2" gutterBottom color="text.secondary">
+                YOUR API KEY
+              </Typography>
+              <Box sx={{ display: "flex", gap: 1.5, alignItems: "center" }}>
+                <TextField
+                  fullWidth
+                  value={apiKey}
+                  slotProps={{
+                    input: {
+                      readOnly: true,
+                      style: { fontFamily: "'Noto Sans Mono', monospace", fontSize: "0.9rem" },
+                    },
+                  }}
+                  variant="outlined"
+                  sx={{ "& .MuiOutlinedInput-root": { bgcolor: "background.paper" } }}
+                />
+                <Tooltip title="Copy API Key">
+                  <IconButton
+                    onClick={handleCopyToClipboard}
+                    color={copySuccess ? "success" : "primary"}
+                    size="medium"
+                    sx={{ border: 1, borderColor: "divider" }}
+                  >
+                    {copySuccess ? <CheckIcon /> : <ContentCopyIcon />}
+                  </IconButton>
+                </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>
+
+              <CodeBlock
+                code={
+                  shellType === "bash"
+                    ? `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}"`
+                }
+              />
+
+              <CodeBlock
+                code={
+                  shellType === "bash"
+                    ? `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" } ] }'`
+                }
+              />
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default ApiKeyPage;

src/components/Footer.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { VERSION } from '../version';
-
-function Footer() {
-  return (
-    <footer className="bg-light border-top mt-2 py-2 flex-shrink-0">
-      <div className="container">
-        <div className="row">
-          <div className="col-md-6">
-            <p className="mb-0 text-muted small">
-              <strong>JMESPath Testing Tool</strong> v{VERSION} - Created for testing and validating JMESPath expressions
-            </p>
-          </div>
-          <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> |
-              <a href="https://jmespath.org/" target="_blank" rel="noopener noreferrer" className="text-decoration-none ms-2">
-                Learn JMESPath
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-export default Footer;

src/components/Footer.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Box, Typography, Container, Link, Grid } from "@mui/material";
+import { VERSION } from "../version";
+
+function Footer() {
+  return (
+    <Box
+      component="footer"
+      sx={{
+        py: 1,
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        flexShrink: 0,
+      }}
+    >
+      <Container maxWidth="xl">
+        <Grid container spacing={2} alignItems="center">
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Typography variant="body2" color="text.secondary">
+              <strong>JMESPath Testing Tool</strong>{" "}
+              {VERSION === "unknown" ? VERSION : `v${VERSION}`} - 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
+              </Link>
+            </Typography>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+}
+
+export default Footer;

src/components/Header.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { VERSION } from '../version';
-
-function Header({ theme, onThemeChange, currentPage, onPageChange }) {
-  return (
-    <div className="header-section py-2">
-      <div className="container">
-        <div className="row">
-          <div className="col-12 text-center position-relative">
-            <h2 className="mb-1">JMESPath Testing Tool</h2>
-            {/* Right side controls - better positioning */}
-            <div className="position-absolute top-0 end-0 d-flex align-items-center gap-2">
-              {/* API Key Management Button - more prominent */}
-              <button
-                type="button"
-                className={`btn btn-sm ${
-                  currentPage === 'apikey' 
-                    ? 'btn-warning fw-bold' 
-                    : 'btn-outline-warning'
-                }`}
-                onClick={() => onPageChange(currentPage === 'main' ? 'apikey' : 'main')}
-                title="API Key Management"
-              >
-                🔐 API Keys
-              </button>
-              {/* Theme switcher with theme-aware classes */}
-              <div className="btn-group btn-group-sm" role="group" aria-label="Theme switcher">
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'auto' 
-                      ? 'btn-primary' 
-                      : 'btn-outline-secondary'
-                  }`}
-                  onClick={() => onThemeChange('auto')}
-                  title="Auto (follow system)"
-                >
-                  🌓 Auto
-                </button>
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'light' 
-                      ? 'btn-primary' 
-                      : 'btn-outline-secondary'
-                  }`}
-                  onClick={() => onThemeChange('light')}
-                  title="Light theme"
-                >
-                  ☀️ Light
-                </button>
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'dark' 
-                      ? 'btn-primary' 
-                      : 'btn-outline-secondary'
-                  }`}
-                  onClick={() => onThemeChange('dark')}
-                  title="Dark theme"
-                >
-                  🌙 Dark
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Header;

src/components/Header.jsx

@@ -0,0 +1,89 @@
+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 (
+    <AppBar position="static" color="default" elevation={1} sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters sx={{ display: "flex", justifyContent: "space-between", height: 64 }}>
+          {/* Brand/Title */}
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <Typography
+              variant="h5"
+              noWrap
+              component="div"
+              sx={{
+                fontWeight: 700,
+                color: "primary.main",
+                letterSpacing: ".05rem",
+              }}
+            >
+              JMESPath Playground
+            </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")}
+              >
+                {currentPage === "main" ? "API Keys" : "Home"}
+              </Button>
+            </Tooltip>
+
+            <Divider orientation="vertical" flexItem sx={{ my: 2, mx: 1 }} />
+
+            {/* Theme switcher */}
+            <ToggleButtonGroup
+              value={theme}
+              exclusive
+              onChange={(e, nextTheme) => nextTheme && onThemeChange(nextTheme)}
+              aria-label="theme switcher"
+              size="small"
+            >
+              <Tooltip title="Follow system theme">
+                <ToggleButton value="auto" aria-label="Auto">
+                  <BrightnessAutoIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip title="Light mode">
+                <ToggleButton value="light" aria-label="Light">
+                  <LightModeIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip title="Dark mode">
+                <ToggleButton value="dark" aria-label="Dark">
+                  <DarkModeIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+            </ToggleButtonGroup>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+
+export default Header;

src/components/MainPage.js

@@ -1,299 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import jmespath from 'jmespath';
-
-function MainPage({ apiKey, showReloadButton, onReloadSampleData, initialSampleData }) {
-  const [jmespathExpression, setJmespathExpression] = useState('people[0].name');
-  const [jsonData, setJsonData] = useState(`{
-  "people": [
-    {
-      "name": "John Doe",
-      "age": 30,
-      "city": "New York"
-    },
-    {
-      "name": "Jane Smith",
-      "age": 25,
-      "city": "Los Angeles"
-    }
-  ],
-  "total": 2
-}`);
-  const [result, setResult] = useState('');
-  const [error, setError] = useState('');
-  const [jsonError, setJsonError] = useState('');
-
-  // Use initial sample data when provided
-  useEffect(() => {
-    if (initialSampleData) {
-      setJsonData(JSON.stringify(initialSampleData, null, 2));
-    }
-  }, [initialSampleData]);
-
-
-
-  const evaluateExpression = () => {
-    try {
-      // Clear previous errors
-      setError('');
-      setJsonError('');
-
-      // Validate and parse JSON
-      let parsedData;
-      try {
-        parsedData = JSON.parse(jsonData);
-      } catch (jsonErr) {
-        setJsonError(`Invalid JSON: ${jsonErr.message}`);
-        setResult('');
-        return;
-      }
-
-      // Evaluate JMESPath expression
-      const queryResult = jmespath.search(parsedData, jmespathExpression);
-
-      // Format the result
-      if (queryResult === null || queryResult === undefined) {
-        setResult('null');
-      } else {
-        setResult(JSON.stringify(queryResult, null, 2));
-      }
-    } catch (jmesErr) {
-      setError(`JMESPath Error: ${jmesErr.message}`);
-      setResult('');
-    }
-  };
-
-  // Auto-evaluate when inputs change
-  useEffect(() => {
-    if (jmespathExpression && jsonData) {
-      evaluateExpression();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [jmespathExpression, jsonData]);
-
-  const handleJmespathChange = (e) => {
-    setJmespathExpression(e.target.value);
-  };
-
-  const handleJsonChange = (e) => {
-    setJsonData(e.target.value);
-  };
-
-  const formatJson = () => {
-    try {
-      const parsed = JSON.parse(jsonData);
-      setJsonData(JSON.stringify(parsed, null, 2));
-    } catch (err) {
-      // If JSON is invalid, don't format
-    }
-  };
-
-  const clearAll = () => {
-    setJmespathExpression('');
-    setJsonData('');
-    setResult('');
-    setError('');
-    setJsonError('');
-  };
-
-  const loadSample = () => {
-    const sampleData = {
-      "users": [
-        {"name": "Alice", "age": 30, "city": "New York"},
-        {"name": "Bob", "age": 25, "city": "San Francisco"},
-        {"name": "Charlie", "age": 35, "city": "Chicago"}
-      ],
-      "total": 3
-    };
-    setJsonData(JSON.stringify(sampleData, null, 2));
-    setJmespathExpression('users[?age > `30`].name');
-  };
-
-  const loadFromDisk = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-    input.onchange = (e) => {
-      const file = e.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          try {
-            const content = e.target.result;
-            const parsed = JSON.parse(content);
-            setJsonData(JSON.stringify(parsed, null, 2));
-          } catch (error) {
-            alert('Invalid JSON file');
-          }
-        };
-        reader.readAsText(file);
-      }
-    };
-    input.click();
-  };
-
-  const loadLogFile = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.log,.jsonl,.ndjson';
-    input.onchange = (e) => {
-      const file = e.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          try {
-            const content = e.target.result;
-            const lines = content.trim().split('\n');
-            const logs = lines.map(line => JSON.parse(line));
-            setJsonData(JSON.stringify(logs, null, 2));
-            setJmespathExpression('[*].message');
-          } catch (error) {
-            alert('Invalid JSON Lines file');
-          }
-        };
-        reader.readAsText(file);
-      }
-    };
-    input.click();
-  };
-
-  return (
-    <>
-      {/* Description paragraph */}
-      <div className="row mb-2">
-        <div className="col-12">
-          <p className="text-muted text-center mb-2 small">
-            Validate and test JMESPath expressions against JSON data in real-time.
-            Enter your JMESPath query and JSON data below to see the results instantly.
-          </p>
-        </div>
-      </div>
-
-      {/* Middle Section: JMESPath Expression Input */}
-      <div className="row mb-2">
-        <div className="col-12">
-          <div className="card">
-            <div className="card-header d-flex justify-content-between align-items-center py-2">
-              <h6 className="mb-0">
-                <i className="bi bi-search me-2"></i>
-                JMESPath Expression
-              </h6>
-              <div>
-                <button
-                  className="btn btn-outline-success btn-sm me-2"
-                  onClick={loadFromDisk}
-                  title="Load JSON object from file"
-                >
-                  📄 Load an Object
-                </button>
-                <button
-                  className="btn btn-outline-info btn-sm me-2"
-                  onClick={loadLogFile}
-                  title="Load JSON Lines log file"
-                >
-                  📋 Load a Log File
-                </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">
-              <input
-                type="text"
-                className={`form-control jmespath-input ${error ? 'error' : 'success'}`}
-                value={jmespathExpression}
-                onChange={handleJmespathChange}
-                placeholder="Enter JMESPath expression (e.g., people[*].name)"
-              />
-              <div className={`alert mt-2 mb-0 d-flex justify-content-between align-items-center ${error ? 'alert-danger' : 'alert-success'}`}>
-                <small className="mb-0">{error || 'Expression is correct'}</small>
-                {showReloadButton && (
-                  <button
-                    className="btn btn-light btn-sm ms-2 border"
-                    onClick={() => {
-                      onReloadSampleData();
-                    }}
-                    title="New sample data is available"
-                  >
-                    <i className="bi bi-arrow-clockwise me-1"></i>
-                    Reload Sample Data
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Lower Middle Section: Input and Output Areas */}
-      <div className="row flex-grow-1" style={{ minHeight: 0 }}>
-        {/* Left Panel: JSON Data Input */}
-        <div className="col-md-6">
-          <div className="card h-100 d-flex flex-column">
-            <div className="card-header py-2">
-              <h6 className="mb-0">
-                <i className="bi bi-file-earmark-code me-2"></i>
-                JSON Data
-              </h6>
-            </div>
-            <div className="card-body flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
-              <textarea
-                className={`form-control json-input flex-grow-1 ${jsonError ? 'error' : 'success'}`}
-                value={jsonData}
-                onChange={handleJsonChange}
-                placeholder="Enter JSON data here..."
-                style={{ minHeight: 0, resize: 'none' }}
-              />
-              {jsonError && (
-                <div className="alert alert-danger mt-2 mb-0">
-                  <small>{jsonError}</small>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Right Panel: Results */}
-        <div className="col-md-6">
-          <div className="card h-100 d-flex flex-column">
-            <div className="card-header py-2">
-              <h6 className="mb-0">
-                <i className="bi bi-output me-2"></i>
-                Results
-              </h6>
-            </div>
-            <div className="card-body flex-grow-1 d-flex flex-column" style={{ minHeight: 0 }}>
-              <textarea
-                className="form-control result-output flex-grow-1"
-                value={result}
-                readOnly
-                placeholder="Results will appear here..."
-                style={{ minHeight: 0, resize: 'none' }}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default MainPage;

src/components/MainPage.jsx

@@ -0,0 +1,535 @@
+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({
+  showReloadButton,
+  onReloadSampleData,
+  jmespathExpression,
+  setJmespathExpression,
+  jsonData,
+  setJsonData,
+}) {
+  const [result, setResult] = useState("");
+  const [error, setError] = useState("");
+  const [jsonError, setJsonError] = useState("");
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const evaluateExpression = () => {
+    try {
+      // Clear previous errors
+      setError("");
+      setJsonError("");
+
+      // Validate and parse JSON
+      let parsedData;
+      try {
+        parsedData = JSON.parse(jsonData);
+      } catch (jsonErr) {
+        setJsonError(`Invalid JSON: ${jsonErr.message}`);
+        setResult("");
+        return;
+      }
+
+      // Evaluate JMESPath expression
+      const queryResult = jmespath.search(parsedData, jmespathExpression);
+
+      // Format the result
+      if (queryResult === null || queryResult === undefined) {
+        setResult("null");
+      } else {
+        setResult(JSON.stringify(queryResult, null, 2));
+      }
+    } catch (jmesErr) {
+      setError(`JMESPath Error: ${jmesErr.message}`);
+      setResult("");
+    }
+  };
+
+  // Auto-evaluate when inputs change
+  useEffect(() => {
+    if (jmespathExpression && jsonData) {
+      evaluateExpression();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jmespathExpression, jsonData]);
+
+  const handleJmespathChange = (e) => {
+    setJmespathExpression(e.target.value);
+  };
+
+  const handleJsonChange = (e) => {
+    setJsonData(e.target.value);
+  };
+
+  const formatJson = () => {
+    try {
+      const parsed = JSON.parse(jsonData);
+      setJsonData(JSON.stringify(parsed, null, 2));
+    } catch (err) {
+      // If JSON is invalid, don't format
+    }
+  };
+
+  const clearAll = () => {
+    setJmespathExpression("");
+    setJsonData("");
+    setResult("");
+    setError("");
+    setJsonError("");
+  };
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(result);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  };
+
+  const downloadResult = () => {
+    const blob = new Blob([result], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "result.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const loadSample = () => {
+    const sampleData = {
+      users: [
+        { name: "Alice", age: 30, city: "New York" },
+        { name: "Bob", age: 25, city: "San Francisco" },
+        { name: "Charlie", age: 35, city: "Chicago" },
+      ],
+      total: 3,
+    };
+    setJsonData(JSON.stringify(sampleData, null, 2));
+    setJmespathExpression("users[?age > `30`].name");
+  };
+
+  const loadFromDisk = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const content = e.target.result;
+            const parsed = JSON.parse(content);
+            setJsonData(JSON.stringify(parsed, null, 2));
+          } catch (error) {
+            alert("Invalid JSON file");
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  };
+
+  const loadLogFile = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".log,.jsonl,.ndjson";
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const content = e.target.result;
+            const lines = content.trim().split("\n");
+            const logs = lines.map((line) => JSON.parse(line));
+            setJsonData(JSON.stringify(logs, null, 2));
+            setJmespathExpression("[*].message");
+          } catch (error) {
+            alert("Invalid JSON Lines file");
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  };
+
+  return (
+    <Box
+      sx={{
+        flexGrow: 1,
+        pt: 1,
+        pb: 3,
+        px: { xs: 2, md: 4 },
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      <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>
+
+      <Paper
+        sx={{
+          mb: 1,
+          flexShrink: 0,
+          bgcolor: "background.paper",
+          border: 1,
+          borderColor: "divider",
+          overflow: "hidden",
+          mb: 2
+        }}
+      >
+        <Box
+          sx={{
+            px: 2,
+            py: 1,
+            bgcolor: "action.hover",
+            borderBottom: 1,
+            borderColor: "divider",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <SearchIcon sx={{ fontSize: 20 }} color="primary" />
+            <Typography variant="subtitle2" color="text.primary">
+              JMESPath Expression
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ p: 1.5, mt: 0.5 }}>
+          <TextField
+            fullWidth
+            size="small"
+            placeholder="Enter JMESPath expression (e.g., people[*].name)"
+            value={jmespathExpression}
+            onChange={handleJmespathChange}
+            error={!!error}
+            helperText={error || " "}
+            sx={{
+              "& .MuiInputBase-root": {
+                fontFamily: "'Noto Sans Mono', monospace",
+                fontSize: "0.9rem",
+              },
+              "& .MuiFormHelperText-root": {
+                mt: 0.75,
+                mb: -0.5,
+              },
+            }}
+          />
+        </Box>
+      </Paper>
+
+      <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
+          <Paper
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              bgcolor: "background.paper",
+              border: 1,
+              borderColor: "divider",
+              minHeight: 0,
+            }}
+          >
+            <Box
+              sx={{
+                px: 2,
+                py: 1,
+                bgcolor: "action.hover",
+                borderBottom: 1,
+                borderColor: "divider",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <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..."
+                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 && (
+                <Alert severity="error" sx={{ mt: 1, flexShrink: 0 }} variant="filled">
+                  {jsonError}
+                </Alert>
+              )}
+            </Box>
+          </Paper>
+        </Grid>
+
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
+          <Paper
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              bgcolor: "background.paper",
+              border: 1,
+              borderColor: "divider",
+              minHeight: 0,
+            }}
+          >
+            <Box
+              sx={{
+                px: 2,
+                py: 1,
+                bgcolor: "action.hover",
+                borderBottom: 1,
+                borderColor: "divider",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <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}
+                variant="standard"
+                placeholder="Results will appear here..."
+                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,
+                  },
+                }}
+              />
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default MainPage;

src/index.css

@@ -1,6 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   background-color: #f8f9fa;
+  overflow: hidden;
 }
 
 code {
@@ -8,12 +13,6 @@ code {
     monospace;
 }
 
-.container-fluid {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
 .content-section {
   flex: 1;
   min-height: 0;
@@ -52,13 +51,6 @@ code {
   color: var(--success-text-light);
 }
 
-.header-section {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 2rem 0;
-  margin-bottom: 2rem;
-}
-
 /* Dark mode support for error states */
 @media (prefers-color-scheme: dark) {
   .error {

src/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

src/index.jsx

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

src/setupTests.js

@@ -1,46 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-
-// Add TextEncoder/TextDecoder for Node.js compatibility
-if (typeof TextEncoder === 'undefined') {
-  global.TextEncoder = require('util').TextEncoder;
-}
-
-if (typeof TextDecoder === 'undefined') {
-  global.TextDecoder = require('util').TextDecoder;
-}
-
-// Mock crypto.getRandomValues for test environment
-if (typeof global.crypto === 'undefined') {
-  global.crypto = {
-    getRandomValues: (array) => {
-      // Simple predictable mock for testing
-      for (let i = 0; i < array.length; i++) {
-        array[i] = Math.floor(Math.random() * 256);
-      }
-      return array;
-    }
-  };
-}
-
-// Suppress console errors during tests
-const originalError = console.error;
-beforeAll(() => {
-  console.error = (...args) => {
-    if (
-      typeof args[0] === 'string' &&
-      (args[0].includes('Warning: ReactDOMTestUtils.act is deprecated') ||
-       args[0].includes('Warning: An update to App inside a test was not wrapped in act'))
-    ) {
-      return;
-    }
-    originalError.call(console, ...args);
-  };
-});
-
-afterAll(() => {
-  console.error = originalError;
-});

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;

vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    strictPort: true,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'build',
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    css: true,
+  },
+});