Version 1.2.5

Update upload script to allow API URL and key to be set via environment variables
Fix API URL variable reference in upload script
2026-01-26 18:38:47 +01:00 · 2026-01-26 16:41:04 +01:00 · 2026-01-26 16:39:41 +01:00 · 2026-01-26 16:34:52 +01:00 · 2026-01-23 14:46:19 +01:00 · 2026-01-23 14:39:33 +01:00
23 changed files with 767 additions and 1262 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -93,3 +93,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.
--- a/DEVELOPMENT.md
+++ b/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.
--- a/6
+++ b/6
@@ -56,6 +56,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 +68,4 @@ ENV LISTEN_ADDR=0.0.0.0
 ENV LISTEN_PORT=3000

 # Start the integrated server
-CMD ["node", "server.js"]
+ENTRYPOINT ["./entrypoint.sh"]
--- a/README.md
+++ b/README.md
@@ -8,62 +8,63 @@ A React-based web application for testing and validating JMESPath expressions ag

 ## Features

- 🎯 **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)
- 🎨 **Bootstrap UI**: Clean, responsive interface with Bootstrap styling
- 🔄 **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
+- **Real-time Evaluation**: JMESPath expressions are evaluated instantly as you type
+- **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
+- **Container Ready**: Containerized for easy deployment

 ## 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
-docker build -t jmespath-playground .
+npm run dev
+```

-# 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
+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"
+   ```
+3. **Auto-reload**: The running app will detect new data and show a reload button

-## Available Scripts
+**API Endpoints:**
+- `POST /api/v1/upload` - Upload sample data
+- `GET /api/v1/sample` - Retrieve current sample data
+- `GET /api/v1/state` - Get current state ID
+- `GET /api/v1/health` - Simple health check (returns "OK")
+- `GET /api/v1/status` - Detailed status information (JSON)

-In the project directory, you can run:
+## Server Configuration

-### `npm start`
+The server can be configured using environment variables:

-Runs the app in development mode. The page will reload when you make edits.
+**Network Settings:**
+- `LISTEN_ADDR` - Server bind address (default: `127.0.0.1`)
+- `LISTEN_PORT` - Server port (default: `3000`)

-### `npm test`
+**Session Management:**
+- `MAX_SESSIONS` - Maximum number of concurrent sessions (default: `100`)
+- `MAX_SAMPLE_SIZE` - Maximum size of uploaded sample data in bytes (default: `1048576` - 1MB)
+- `MAX_SESSION_TTL` - Session time-to-live in milliseconds (default: `3600000` - 1 hour)

-Launches the test runner in interactive watch mode.
+Example usage:

-### `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
-
-```
-jmespath-playground/
-├── .github/
-│   ├── workflows/
-│   │   └── build-container.yml   # CI/CD pipeline
-│   └── copilot-instructions.md   # AI agent instructions
-├── public/
-│   ├── index.html
-│   ├── manifest.json
-│   └── favicon.ico
-├── src/
-│   ├── App.js          # Main application component
-│   ├── App.css         # App-specific styles
-│   ├── App.test.js     # App tests
-│   ├── index.js        # React entry point
-│   ├── index.css       # Global styles
-│   ├── setupTests.js   # Test configuration
-│   └── reportWebVitals.js
-├── scripts/
-│   ├── build.sh        # Build script
-│   └── dev.sh          # Development script
-├── Dockerfile          # Docker container
-├── Dockerfile.dev      # Development container
-├── docker-compose.yml  # Container orchestration
-├── package.json        # Dependencies and scripts
-├── README.md           # Comprehensive documentation
-├── DEVELOPMENT.md      # Developer guide
-└── demo.sh             # Demo script
+```bash
+MAX_SESSIONS=200 MAX_SAMPLE_SIZE=2097152 LISTEN_PORT=8080 node server.js
 ```

 ## Technology Stack

- **React 18.2.0**: Frontend framework
- **Bootstrap 5.3.2**: CSS framework for styling
- **JMESPath 0.16.0**: JMESPath expression evaluation
+- **React 18.2.0**: Frontend framework with modern hooks and components
+- **Bootstrap 5.3.2**: CSS framework with dark/light theme support
+- **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
-
-## 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
+- **UUID 9.0.0**: Cryptographically secure session IDs
+- **Container**: Containerization for easy deployment

 ## 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.
--- a/bin/upload-jmespath
+++ b/bin/upload-jmespath
@@ -2,23 +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="-"
-ADD_HEADERS=()

 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)
-            ADD_HEADERS+=("-H" "X-API-Key: $2")
+            JMESPATH_PLAYGROUND_API_KEY="$2"
            shift 2
            ;;
        --json-file)
@@ -37,11 +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"
--- a/demo.sh
+++ b/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"
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+set -e
+exec node server.js
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "jmespath-playground",
-  "version": "1.0.4",
+  "version": "1.2.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "jmespath-playground",
-      "version": "1.0.4",
+      "version": "1.2.4",
      "license": "MIT",
      "dependencies": {
        "@testing-library/jest-dom": "^6.1.4",
@@ -21,6 +21,7 @@
        "uuid": "^9.0.0"
      },
      "devDependencies": {
+        "concurrently": "^8.2.2",
        "supertest": "^7.2.2"
      },
      "engines": {
@@ -5656,58 +5657,6 @@
        "wrap-ansi": "^7.0.0"
      }
    },
-    "node_modules/cliui/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/cliui/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/cliui/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
    "node_modules/co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5936,6 +5885,94 @@
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "license": "MIT"
    },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/concurrently/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/confusing-browser-globals": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
@@ -6521,6 +6558,23 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -14513,6 +14567,16 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/safe-array-concat": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -15165,6 +15229,12 @@
      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
      "license": "MIT"
    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
    "node_modules/spdy": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -15385,6 +15455,26 @@
      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==",
      "license": "MIT"
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
    "node_modules/string.prototype.includes": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -16293,6 +16383,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
    "node_modules/tryer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -17546,6 +17646,38 @@
        "workbox-core": "6.6.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -17648,26 +17780,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/yargs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/yargs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,15 +1,19 @@
 {
  "name": "jmespath-playground",
-  "version": "1.2.1",
+  "version": "1.2.5",
  "description": "A React-based web application for testing JMESPath expressions against JSON data",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "prebuild": "node scripts/version-check.js",
    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "server": "node server.js"
+    "test": "react-scripts test --watchAll=false",
+    "test:watch": "react-scripts test",
+    "server": "node server.js",
+    "dev": "concurrently \"npm start\" \"npm run server\"",
+    "build-image": "node scripts/build-image.js"
  },
+  "proxy": "http://localhost:3000",
  "engines": {
    "node": ">=24.0.0"
  },
@@ -59,6 +63,7 @@
  "author": "",
  "license": "MIT",
  "devDependencies": {
+    "concurrently": "^8.2.2",
    "supertest": "^7.2.2"
  }
 }
--- a/scripts/build-image.js
+++ b/scripts/build-image.js
@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+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 main() {
+    const containerTool = getContainerTool();
+    const { version, isRelease } = getVersion();
+
+    console.log(`Building ${isRelease ? 'release' : 'development'} version: ${version}`);
+
+    // 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 buildCommand = `${containerTool} build --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
+    if (isRelease) {
+        console.log(`\nTo run the container:`);
+        console.log(`  ${containerTool} run --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 --name jmespathpg -p 3000:3000 skoszewski/jmespath-playground:dev`);
+    }
+}
+
+if (require.main === module) {
+    main();
+}
--- a/scripts/build-image.sh
+++ b/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!"
--- a/scripts/build.sh
+++ b/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"
--- a/scripts/dev.sh
+++ b/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
--- a/scripts/upload.js
+++ b/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('  -h, --help       Show this help message');
+    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() {
-    const args = process.argv.slice(2);
-    let apiUrl = 'http://localhost:3000';
-    let jsonFile = '';
+function getArguments() {
+    const { values, positionals } = parseArgs({
+        args: process.argv.slice(2),
+        options: {
+            url: { type: 'string', short: 'u', default: 'http://localhost:3000' },
+            key: { type: 'string', short: 'k' },
+            help: { type: 'boolean', short: 'h' }
+        },
+        allowPositionals: true
+    });

-    for (let i = 0; i < args.length; i++) {
-        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 (values.help) {
+        showUsage();
+        process.exit(0);
    }

-    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) {
-    console.log('Uploading sample data to JMESPath Playground...');
-    console.log(`JSON file: ${jsonFile}`);
-    console.log(`API URL: ${apiUrl}`);
-    console.log('');
-
+function isLocalhost(url) {
    try {
-        const response = await fetch(`${apiUrl}/api/v1/upload`, {
+        const parsed = new URL(url);
+        const hostname = parsed.hostname;
+        return hostname === 'localhost' ||
+               hostname === '127.0.0.1' ||
+               hostname.startsWith('127.') ||
+               hostname === '::1';
+    } catch {
+        return false;
+    }
+}
+
+function makeRequest(url, options) {
+    return new Promise((resolve, reject) => {
+        const parsedUrl = new URL(url);
+        const isHttps = parsedUrl.protocol === 'https:';
+        const client = isHttps ? https : http;
+
+        const requestOptions = {
+            hostname: parsedUrl.hostname,
+            port: parsedUrl.port,
+            path: parsedUrl.pathname,
+            method: options.method || 'GET',
+            headers: options.headers || {}
+        };
+
+        const req = client.request(requestOptions, (res) => {
+            let data = '';
+            res.on('data', chunk => data += chunk);
+            res.on('end', () => {
+                resolve({
+                    ok: res.statusCode >= 200 && res.statusCode < 300,
+                    status: res.statusCode,
+                    json: () => Promise.resolve(JSON.parse(data))
+                });
+            });
+        });
+
+        req.on('error', reject);
+
+        if (options.body) {
+            req.write(options.body);
+        }
+
+        req.end();
+    });
+}
+
+async function uploadData(apiUrl, apiKey, jsonFile, jsonData) {
+    try {
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+
+        // Only send API key for non-localhost requests
+        const isLocal = isLocalhost(apiUrl);
+        if (!isLocal && apiKey) {
+            headers['X-API-Key'] = apiKey;
+        } else if (!isLocal && !apiKey) {
+            console.error('Error: API key required for non-localhost URLs');
+            console.error('Use -k/--key option to specify API key');
+            process.exit(1);
+        }
+
+        const response = await makeRequest(`${apiUrl}/api/v1/upload`, {
            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            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!');
-        console.log(`Open ${apiUrl} in your browser to see the reload button.`);
-        console.log('You can then enter your JMESPath expression in the web interface.');
+        const result = await response.json();
+        console.log(JSON.stringify(result));

    } 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
--- a/scripts/upload.sh
+++ b/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."
--- a/scripts/version-check.js
+++ b/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
-    version = `${version}-dev`;
-    console.log(`📦 Building development version ${version}`);
+    // We're not at a tagged commit - use unknown version
+    version = 'unknown';
+    console.log(`📦 Building development version with unknown version`);
    isRelease = false;
  }
 } catch (error) {
  // Git command failed (maybe not in a git repo)
-  version = `${version}-dev`;
-  console.log(`⚠️  Cannot determine git status, using development version ${version}`);
+  version = 'unknown';
+  console.log(`⚠️  Cannot determine git status, using unknown version`);
  isRelease = false;
 }

--- a/server.js
+++ b/server.js
@@ -1,7 +1,9 @@
 const express = require('express');
 const path = require('path');
 const crypto = require('crypto');
+const os = require('os');
 const { v4: uuidv4 } = require('uuid');
+const { parseArgs } = require('util');

 // Environment configuration
 const MAX_SESSIONS = parseInt(process.env.MAX_SESSIONS) || 100;
@@ -108,7 +110,7 @@ function deriveKey(apiKey, salt) {
 }

 // Create Express app
-function createApp() {
+function createApp(devMode = false) {
  const app = express();

  // Trust proxy to get real client IP (needed for localhost detection)
@@ -118,6 +120,25 @@ function createApp() {
  app.use(express.json({ limit: MAX_SAMPLE_SIZE }));
  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();

@@ -357,9 +378,9 @@ function createApp() {
    }
  });

-  // Health endpoint (no auth required)
-  app.get('/api/v1/health', (req, res) => {
-    cleanupExpiredSessions(); // Cleanup on health check
+  // Status endpoint (no auth required) - detailed information
+  app.get('/api/v1/status', (req, res) => {
+    cleanupExpiredSessions(); // Cleanup on status check
    res.json({
      status: 'healthy',
      sessions: {
@@ -376,6 +397,11 @@ function createApp() {
    });
  });

+  // 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) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
@@ -386,37 +412,67 @@ function createApp() {

 // Start server if this file is run directly
 if (require.main === module) {
-  // Parse command line arguments
-  const args = process.argv.slice(2);
-  let listenAddr = process.env.LISTEN_ADDR || '127.0.0.1';
-  let listenPort = process.env.LISTEN_PORT || 3000;
-
-  for (let i = 0; i < args.length; i++) {
-    if (args[i] === '-h' || args[i] === '--listen-addr') {
-      listenAddr = args[i + 1];
-      i++;
-    } else if (args[i] === '-p' || args[i] === '--port') {
-      listenPort = args[i + 1];
-      i++;
+  const { values } = parseArgs({
+    options: {
+      'listen-addr': { 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 }
    }
-  }
+  });

-  const app = createApp();
-  const PORT = parseInt(listenPort);
-  const HOST = listenAddr;
+  const DEV_MODE = values.dev;
+  const app = createApp(DEV_MODE);
+  const PORT = parseInt(values.port);
+  const HOST = values['listen-addr'];

  app.listen(PORT, HOST, () => {
-    console.log(`🚀 JMESPath Playground Server running on http://${HOST}:${PORT}`);
-    console.log(`📊 Configuration:`);
+    console.log(`JMESPath Playground Server running`);
+    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(`   Session TTL: ${(MAX_SESSION_TTL / 1000 / 60).toFixed(0)} minutes`);
-    console.log(`🔗 API endpoints:`);
-    console.log(`   POST http://${HOST}:${PORT}/api/v1/upload (requires X-API-Key)`);
-    console.log(`   GET  http://${HOST}:${PORT}/api/v1/sample (requires X-API-Key)`);
-    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(`🔐 Security: AES-256-GCM encryption with PBKDF2 key derivation`);
+
+    // 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}`);
+    console.log(`Security: AES-256-GCM encryption with PBKDF2 key derivation`);
  });
 }

--- a/src/App.css
+++ b/src/App.css
@@ -1,41 +1,9 @@
 /* JMESPath Testing Tool Custom Styles */

 :root {
-  /* Light theme colors */
-  --bg-primary-light: #ffffff;
-  --bg-secondary-light: #f8f9fa;
-  --text-primary-light: #212529;
-  --text-secondary-light: #495057;
-  --text-muted-light: #6c757d;
-  --border-light: #dee2e6;
-  --border-input-light: #ced4da;
+  /* Common variables */
+  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  --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;
@@ -98,16 +66,10 @@ body {
 .jmespath-input {
  font-size: 14px;
  padding: 10px;
-  background-color: var(--bg-primary-light);
-  border: 1px solid var(--border-input-light);
-  color: var(--text-secondary-light);
 }

 .json-input, .result-output {
  font-size: 13px;
-  background-color: var(--bg-secondary-light);
-  border: 1px solid var(--border-light);
-  color: var(--text-secondary-light);
  line-height: 1.4;
 }

@@ -125,15 +87,6 @@ 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 {
@@ -158,519 +111,152 @@ footer a:hover {
  }
 }

-/* 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;
-}
+/* Bootstrap theme integration */
+[data-bs-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --text-primary: #212529;
+  --text-secondary: #495057;
+  --text-muted: #6c757d;
+  --border: #dee2e6;
+  --border-input: #ced4da;
  
-.theme-light footer {
-  background-color: #f8f9fa !important;
-  border-top: 1px solid #dee2e6 !important;
-  color: #212529 !important;
-}
+  --success-bg: #d4edda;
+  --success-border: #c3e6cb;
+  --success-text: #155724;
  
-.theme-light footer a {
-  color: #6c757d !important;
+  --error-bg: #f8d7da;
+  --error-border: #f5c6cb;
+  --error-text: #721c24;
 }

-.theme-light footer a:hover {
-  color: #495057 !important;
-}
+[data-bs-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-card: #323232;
+  --text-primary: #ffffff;
+  --text-secondary: #e9ecef;
+  --text-muted: #adb5bd;
+  --border: #495057;
+  --border-input: #6c757d;
  
-/* Force dark theme regardless of system preference */
-.theme-dark {
-  background-color: var(--bg-primary-dark) !important;
-  color: var(--text-secondary-dark) !important;
-}
+  --success-bg: #1e4a1e;
+  --success-border: #2c6d2c;
+  --success-text: #d4edda;
  
-.theme-dark .header-section {
-  background-color: var(--bg-secondary-dark) !important;
-  border-bottom: 1px solid #404040 !important;
+  --error-bg: #4a1e1e;
+  --error-border: #6d2c2c;
+  --error-text: #f8d7da;
 }

-.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;
+/* Apply theme colors */
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-secondary);
 }

-.theme-dark .card-header {
-  background-color: var(--bg-card-dark) !important;
-  border-bottom: 2px solid #505050 !important;
-  color: var(--text-primary-dark) !important;
+.card {
+  background-color: var(--bg-primary);
+  border-color: var(--border);
+  color: var(--text-primary);
 }

-.theme-dark .jmespath-input {
-  background-color: var(--bg-card-dark);
-  border: 1px solid #505050;
-  color: var(--text-primary-dark);
+.card-header {
+  background-color: var(--bg-secondary);
+  border-bottom-color: var(--border);
+  color: var(--text-primary);
 }

-/* 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;
+.jmespath-input {
+  background-color: var(--bg-primary);
+  border-color: var(--border-input);
+  color: var(--text-secondary);
 }

-.theme-dark .jmespath-input.error {
-  background-color: #4a1e1e !important;
-  border-color: #6d2c2c !important;
-  color: #f8d7da !important;
+.json-input, .result-output {
+  background-color: var(--bg-secondary);
+  border-color: var(--border);
+  color: var(--text-secondary);
 }

-.theme-dark .jmespath-input::placeholder {
-  color: var(--text-muted-dark) !important;
+footer {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
 }

-.theme-dark .jmespath-input:focus {
-  border-color: var(--accent-color);
+footer.bg-light {
+  background-color: var(--bg-secondary) !important;
 }

-.theme-dark .json-input,
-.theme-dark .result-output {
-  background-color: #2a2a2a !important;
-  border: 1px solid #505050 !important;
-  color: var(--text-secondary-dark) !important;
+footer a {
+  color: var(--text-muted);
 }

-.theme-dark .json-input::placeholder,
-.theme-dark .result-output::placeholder {
-  color: var(--text-muted-dark) !important;
+footer a:hover {
+  color: var(--text-secondary);
 }

-.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;
+/* State styles */
+.jmespath-input.success {
+  background-color: var(--success-bg) !important;
+  border-color: var(--success-border) !important;
+  color: var(--success-text) !important;
 }

-.theme-dark .output-section .form-control {
-  background-color: var(--bg-secondary-dark) !important;
+.jmespath-input.error {
+  background-color: var(--error-bg) !important;
+  border-color: var(--error-border) !important;
+  color: var(--error-text) !important;
 }

-.theme-dark .alert-danger {
-  background-color: #3d1a1a !important;
-  border-color: #dc3545 !important;
-  color: #f8d7da !important;
+.json-input.success {
+  background-color: var(--success-bg) !important;
+  border-color: var(--success-border) !important;
+  color: var(--success-text) !important;
 }

-.theme-dark .alert-success {
-  background-color: #1e4a1e !important;
-  border-color: #2c6d2c !important;
-  color: #d4edda !important;
+.json-input.error {
+  background-color: var(--error-bg) !important;
+  border-color: var(--error-border) !important;
+  color: var(--error-text) !important;
 }

-.theme-dark .text-muted {
-  color: var(--text-muted-dark) !important;
+/* Focus states */
+.jmespath-input:focus {
+  border-color: var(--accent-color, #007bff);
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

-.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;
+.json-input:focus,
+.result-output:focus {
+  background-color: var(--bg-primary);
+  border-color: var(--accent-color, #007bff);
+  color: var(--text-secondary);
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

-.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;
+/* Placeholder colors */
+.jmespath-input::placeholder,
+.json-input::placeholder,
+.result-output::placeholder {
+  color: var(--text-muted);
 }

-.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;
+/* Alert styles */
+.alert-danger {
+  background-color: var(--error-bg);
+  border-color: var(--error-border);
+  color: var(--error-text);
 }

-.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;
+/* Code block styles */
+pre.bg-light {
+  background-color: var(--bg-secondary) !important;
+  color: var(--text-secondary) !important;
+  border-color: var(--border) !important;
 }

-.theme-dark .btn-outline-danger {
-  color: var(--btn-danger) !important;
-  border-color: var(--btn-danger) !important;
+code {
+  color: var(--text-secondary);
 }
-.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;
-  }
-}
--- a/src/App.js
+++ b/src/App.js
@@ -45,21 +45,12 @@ function App() {

  // Theme management
  useEffect(() => {
-    // Apply theme to document
    const applyTheme = (selectedTheme) => {
-      const root = document.documentElement;
-      const body = document.body;
+      const effectiveTheme = selectedTheme === 'auto' 
+        ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : selectedTheme;
      
-      // 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)
+      document.documentElement.setAttribute('data-bs-theme', effectiveTheme);
    };

    applyTheme(theme);
@@ -68,23 +59,18 @@ function App() {
    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)
+  // Get headers for API requests
  const getApiHeaders = () => {
    const headers = {
      'Accept': 'application/json'
    };
    
    // Only send API key for non-localhost requests
-    if (!isRunningOnLocalhost()) {
+    // For localhost, let server use its default LOCALHOST_API_KEY
+    if (window.location.hostname !== 'localhost' && 
+        window.location.hostname !== '127.0.0.1' && 
+        !window.location.hostname.startsWith('127.') && 
+        window.location.hostname !== '::1') {
      headers['X-API-Key'] = apiKey;
    }
    
@@ -116,7 +102,6 @@ function App() {
      }
    } catch (error) {
      // Silently handle state check errors
-      console.log('State check failed:', error);
    }
  };

@@ -132,7 +117,6 @@ function App() {
        const data = await response.json();
        if (data) {
          setSampleData(data);
-          console.log('Sample data loaded:', data);
        }

        // Update current state GUID
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -55,8 +55,23 @@ 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', () => {
@@ -137,11 +152,11 @@ describe('App Component', () => {
      // Should show JSON error indicator - check for error styling or messages
      await waitFor(() => {
        const jsonInputWithError = document.querySelector('.json-input.error') ||
-                                 document.querySelector('.json-input.is-invalid') ||
-                                 screen.queryByText(/Unexpected token/i) ||
-                                 screen.queryByText(/JSON Error:/i) ||
-                                 screen.queryByText(/Invalid JSON:/i) ||
-                                 screen.queryByText(/SyntaxError/i);
+          document.querySelector('.json-input.is-invalid') ||
+          screen.queryByText(/Unexpected token/i) ||
+          screen.queryByText(/JSON Error:/i) ||
+          screen.queryByText(/Invalid JSON:/i) ||
+          screen.queryByText(/SyntaxError/i);

        // If no specific error styling/message, at least ensure the result doesn't contain valid JSON result
        if (!jsonInputWithError) {
@@ -259,7 +274,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'
          })
        }));
      });
--- a/src/components/ApiKeyPage.js
+++ b/src/components/ApiKeyPage.js
@@ -64,34 +64,28 @@ function ApiKeyPage({ apiKey, onRegenerateApiKey }) {
              <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:
+                For remote clients, the API key is required for authentication. Define two
+                environment variables in your <code>.bashrc</code>.
              </p>
              <pre className="bg-light p-3 rounded border">
+              <code>export JMESPATH_PLAYGROUND_API_URL={window.location.origin}<br/>export JMESPATH_PLAYGROUND_API_KEY={apiKey}</code>
+              </pre>
+              <p className="text-muted">Then, use the following <code>curl</code> command to upload your data:</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>
+    -H "X-API-Key: $JMESPATH_PLAYGROUND_API_KEY" \\
+    --data @__JSON_FILE_NAME__ \\
+    "$\{JMESPATH_PLAYGROUND_API_URL}/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.
+                Replace <code>{'__JSON_FILE_NAME__'}</code> with the path to your JSON file containing the sample data.
+                or use <code>-</code> to read from standard input.
                <br />
-                <strong>For localhost clients:</strong> The X-API-Key header is optional and can be omitted.
+                <strong>For localhost clients:</strong> The X-API-Key should 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>
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -8,7 +8,7 @@ function Footer() {
        <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
+              <strong>JMESPath Testing Tool</strong> {VERSION === 'unknown' ? VERSION : `v${VERSION}`} - Created for testing and validating JMESPath expressions
            </p>
          </div>
          <div className="col-md-6 text-md-end">
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { VERSION } from '../version';

 function Header({ theme, onThemeChange, currentPage, onPageChange }) {
  return (
Author	SHA1	Message	Date
Slawomir Koszewski	d0961c68fa	Version 1.2.5	2026-01-26 18:38:47 +01:00
Slawomir Koszewski	b1fd6da218	Update upload script to allow API URL and key to be set via environment variables	2026-01-26 16:41:04 +01:00
Slawomir Koszewski	2a498124fe	Fix API URL variable reference in upload script	2026-01-26 16:39:41 +01:00
Slawomir Koszewski	37c73ddd2b	Refactor upload script to use environment variables for API URL and key, and update usage instructions	2026-01-26 16:34:52 +01:00
Slawomir Koszewski	03cc889cd0	Update copilot instructions with version release procedures	2026-01-23 14:46:19 +01:00
Slawomir Koszewski	0d3832137f	Fix version display issues, container shutdown problems, and modernize build scripts	2026-01-23 14:39:33 +01:00
Slawomir Koszewski	81b3b84f81	Remove deprecated upload script	2026-01-23 12:57:21 +01:00
Slawomir Koszewski	cebae83ae1	Fix dark theme colors, reload button functionality, and code cleanup	2026-01-23 12:50:56 +01:00