create-autoid-app 0.0.0-stage → 1.0.0

package/bin/index.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const BANNER = `
+\x1b[36m╔═════════════════════════════════════════════════════════════════════════╗
+║         ⚡ BEETECH OMNIAUTO-ID™ DEVELOPER APPLICATION GENERATOR ⚡       ║
+║            Zero-Hardware to Real-Time RFID Streaming in 60s             ║
+╚═════════════════════════════════════════════════════════════════════════╝\x1b[0m
+`;
+
+async function promptQuestion(query, defaultValue) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise(resolve => {
+    rl.question(`\x1b[33m? \x1b[1m${query}\x1b[0m \x1b[90m(${defaultValue}):\x1b[0m `, answer => {
+      rl.close();
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+async function main() {
+  console.log(BANNER);
+
+  const args = process.argv.slice(2);
+  let projectName = args[0];
+
+  if (!projectName) {
+    projectName = await promptQuestion('Enter your project name', 'my-rfid-app');
+  }
+
+  console.log(`\n\x1b[32m✔\x1b[0m Target Directory: \x1b[36m${projectName}\x1b[0m`);
+
+  console.log('\n\x1b[1mAvailable Application Templates:\x1b[0m');
+  console.log('  \x1b[36m[1]\x1b[0m \x1b[1mweb-radar-dashboard\x1b[0m  - Modern Realtime Web Radar & Tag Inspector (Vite + Live UI)');
+  console.log('  \x1b[36m[2]\x1b[0m \x1b[1mnode-stream-worker\x1b[0m   - Node.js High-Throughput Tag Stream Consumer');
+  console.log('  \x1b[36m[3]\x1b[0m \x1b[1mdotnet-gate-service\x1b[0m  - C# .NET 9 Warehouse Inbound/Outbound RFID Gate Service');
+
+  let choice = args[1] || await promptQuestion('Select template [1-3]', '1');
+  let templateKey = 'web-radar-dashboard';
+  if (choice === '2' || choice === 'node-stream-worker') templateKey = 'node-stream-worker';
+  if (choice === '3' || choice === 'dotnet-gate-service') templateKey = 'dotnet-gate-service';
+
+  const targetDir = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(targetDir)) {
+    console.error(`\x1b[31m✖ Error: Directory '${projectName}' already exists.\x1b[0m`);
+    process.exit(1);
+  }
+
+  console.log(`\n\x1b[34m[1/3]\x1b[0m Creating project directory: \x1b[36m${targetDir}\x1b[0m`);
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  console.log(`\x1b[34m[2/3]\x1b[0m Generating template \x1b[35m${templateKey}\x1b[0m...`);
+  const templateSourceDir = path.join(__dirname, '..', 'templates', templateKey);
+  
+  if (fs.existsSync(templateSourceDir)) {
+    copyDirectoryRecursive(templateSourceDir, targetDir, { projectName });
+  } else {
+    console.error(`\x1b[31m✖ Template directory not found: ${templateSourceDir}\x1b[0m`);
+    process.exit(1);
+  }
+
+  console.log(`\x1b[34m[3/3]\x1b[0m Ready!`);
+  console.log(`
+\x1b[32m✔ Successfully created '${projectName}'!\x1b[0m
+
+To launch your application in 30 seconds:
+  \x1b[33mcd ${projectName}\x1b[0m
+  ${templateKey.startsWith('dotnet') ? '\x1b[33mdotnet run\x1b[0m' : '\x1b[33mnpm install\n  npm run dev\x1b[0m'}
+
+\x1b[90mTip: If no physical RFID reader is connected, the app automatically switches to\x1b[0m
+\x1b[90mZero-Hardware Simulator Mode with realistic GS1 SGTIN tags & radar animation!\x1b[0m
+`);
+}
+
+function copyDirectoryRecursive(src, dest, replacements) {
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    let destName = entry.name;
+    if (destName.includes('__NAME__')) {
+      destName = destName.replace('__NAME__', replacements.projectName);
+    }
+    const destPath = path.join(dest, destName);
+
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyDirectoryRecursive(srcPath, destPath, replacements);
+    } else {
+      let content = fs.readFileSync(srcPath, 'utf8');
+      for (const [key, val] of Object.entries(replacements)) {
+        content = content.replace(new RegExp(`{{${key}}}`, 'g'), val);
+      }
+      fs.writeFileSync(destPath, content, 'utf8');
+    }
+  }
+}
+
+main().catch(err => {
+  console.error('\x1b[31mUnexpected CLI error:\x1b[0m', err);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "create-autoid-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Scaffold real-time RFID, PLC, and Barcode IoT applications with Beetech OmniAuto-ID and Adv.SmartSdk in under 60 seconds",
+  "main": "bin/index.js",
+  "bin": {
+    "create-autoid-app": "./bin/index.js",
+    "create-omniautoid-app": "./bin/index.js"
+  },
+  "scripts": {
+    "start": "node bin/index.js",
+    "test": "node test/cli.test.js"
+  },
+  "keywords": [
+    "rfid",
+    "autoid",
+    "beetech",
+    "smartsdk",
+    "edge-gateway",
+    "iot",
+    "scaffolding",
+    "cli",
+    "npx"
+  ],
+  "author": "Beetech Auto-ID Engineering Team",
+  "license": "MIT"
+}

package/templates/dotnet-gate-service/GateWorker.cs

@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Concurrent;
+using System.Threading;
+using System.Threading.Tasks;
+using Beetech.OmniAutoId.Client;
+using Beetech.OmniAutoId.Client.Models;
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+
+namespace {{projectName}};
+
+/// <summary>
+/// Background worker processing high-speed RFID Portal Gate events, deduplication, and PLC trigger actions.
+/// </summary>
+public sealed class GateWorker : BackgroundService
+{
+    private readonly IOmniAutoIdClient _client;
+    private readonly ILogger<GateWorker> _logger;
+    private readonly ConcurrentDictionary<string, (DateTime FirstSeen, int Count)> _tagCache = new();
+    private long _totalTagReads;
+
+    public GateWorker(IOmniAutoIdClient client, ILogger<GateWorker> logger)
+    {
+        _client = client;
+        _logger = logger;
+
+        _client.TagRead += OnTagDetected;
+        _client.ConnectionStatusChanged += (s, e) =>
+        {
+            _logger.LogInformation(">>> OmniAuto-ID Gateway Status: {Status} (Simulated: {IsSim})", e.Message, e.IsSimulated);
+        };
+    }
+
+    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        _logger.LogInformation("Warehouse Portal Gate Worker is starting...");
+
+        await _client.ConnectAsync(stoppingToken);
+
+        while (!stoppingToken.IsCancellationRequested)
+        {
+            await Task.Delay(5000, stoppingToken);
+            _logger.LogInformation("[GATE STATUS] Total Tag Scans: {Total} | Unique EPCs: {Unique}",
+                Interlocked.Read(ref _totalTagReads), _tagCache.Count);
+        }
+
+        await _client.DisconnectAsync(stoppingToken);
+    }
+
+    private void OnTagDetected(object? sender, TagReadEvent tag)
+    {
+        Interlocked.Increment(ref _totalTagReads);
+
+        var isNew = !_tagCache.ContainsKey(tag.Epc);
+        _tagCache.AddOrUpdate(tag.Epc,
+            (DateTime.UtcNow, 1),
+            (_, old) => (old.FirstSeen, old.Count + 1));
+
+        if (isNew)
+        {
+            _logger.LogInformation("[PALLET ARRIVAL] EPC: {Epc} | Ant: {Ant} | RSSI: {Rssi} dBm | Direction: {Dir}",
+                tag.Epc, tag.Antenna, tag.Rssi, tag.Direction);
+        }
+    }
+}

package/templates/dotnet-gate-service/Program.cs

@@ -0,0 +1,20 @@
+using Beetech.OmniAutoId.Client;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+using {{projectName}};
+
+var builder = Host.CreateApplicationBuilder(args);
+
+// Register OmniAuto-ID Client with configuration
+builder.Services.AddOmniAutoIdClient(options =>
+{
+    options.GatewayUrl = builder.Configuration["OmniAutoId:GatewayUrl"] ?? "http://localhost:19090";
+    options.ApiKey = builder.Configuration["OmniAutoId:ApiKey"];
+    options.UseSimulationFallback = true; // Auto-switches to high-speed virtual simulator if hardware is offline
+});
+
+// Register Warehouse Gate Background Worker
+builder.Services.AddHostedService<GateWorker>();
+
+var host = builder.Build();
+host.Run();

package/templates/dotnet-gate-service/README.md

@@ -0,0 +1,11 @@
+# {{projectName}}
+
+High-throughput Warehouse Portal Gate Service built with **Beetech OmniAuto-ID™ Client**.
+
+## 🚀 Running the Service
+
+```bash
+dotnet run
+```
+
+If the physical edge gateway is offline, the service automatically engages the built-in Zero-Hardware Simulator, generating realistic EPC Gen2 pallet scans so you can test your warehouse logic instantly.

package/templates/dotnet-gate-service/__NAME__.csproj

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk.Worker">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <UserSecretsId>dotnet-{{projectName}}-secrets</UserSecretsId>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
+    <PackageReference Include="Beetech.OmniAutoId.Client" Version="1.0.0" />
+  </ItemGroup>
+
+</Project>

package/templates/dotnet-gate-service/appsettings.json

@@ -0,0 +1,13 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.Hosting.Lifetime": "Information"
+    }
+  },
+  "OmniAutoId": {
+    "GatewayUrl": "http://localhost:19090",
+    "ApiKey": "",
+    "UseSimulationFallback": true
+  }
+}

package/templates/node-stream-worker/README.md

@@ -0,0 +1,10 @@
+# {{projectName}}
+
+High-throughput Node.js stream processing worker for **Beetech OmniAuto-ID™ Edge Gateway**.
+
+## 🚀 Running the Worker
+
+```bash
+npm install
+npm start
+```

package/templates/node-stream-worker/index.js

@@ -0,0 +1,60 @@
+const WebSocket = require('ws');
+
+const GATEWAY_WS_URL = process.env.AUTOID_GATEWAY_WS || 'ws://localhost:19090/stream';
+console.log('===============================================================');
+console.log('  ⚡ OmniAuto-ID™ High-Throughput Stream Worker Daemon ⚡       ');
+console.log(`  Target Gateway: ${GATEWAY_WS_URL}`);
+console.log('===============================================================');
+
+let totalProcessed = 0;
+let tagsInLastSecond = 0;
+const inventoryCache = new Map();
+
+function startWorker() {
+  console.log(`Connecting to ${GATEWAY_WS_URL}...`);
+  const ws = new WebSocket(GATEWAY_WS_URL);
+
+  ws.on('open', () => {
+    console.log('✔ Connected to OmniAuto-ID Live Stream.');
+  });
+
+  ws.on('message', (data) => {
+    try {
+      const tag = JSON.parse(data.toString());
+      if (!tag.epc) return;
+
+      totalProcessed++;
+      tagsInLastSecond++;
+
+      const cache = inventoryCache.get(tag.epc) || { count: 0, firstSeen: Date.now() };
+      cache.count++;
+      cache.lastRssi = tag.rssi;
+      inventoryCache.set(tag.epc, cache);
+
+      if (cache.count === 1) {
+        console.log(`[NEW TAG DETECTED] EPC=${tag.epc} | Ant=${tag.antenna} | RSSI=${tag.rssi} dBm | TotalUnique=${inventoryCache.size}`);
+      }
+    } catch (err) {
+      console.error('Error parsing stream event:', err.message);
+    }
+  });
+
+  ws.on('error', (err) => {
+    console.warn(`Connection error (${err.message}). Retrying in 3s...`);
+  });
+
+  ws.on('close', () => {
+    console.warn('Stream closed. Reconnecting in 3s...');
+    setTimeout(startWorker, 3000);
+  });
+}
+
+// Stats summary interval
+setInterval(() => {
+  if (totalProcessed > 0) {
+    console.log(`[METRICS] Rate: ${tagsInLastSecond} tags/sec | Unique EPCs: ${inventoryCache.size} | Total Reads: ${totalProcessed}`);
+    tagsInLastSecond = 0;
+  }
+}, 2000);
+
+startWorker();

package/templates/node-stream-worker/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "High-throughput RFID tag stream processing worker daemon",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "ws": "^8.16.0"
+  }
+}

package/templates/web-radar-dashboard/README.md

@@ -0,0 +1,20 @@
+# {{projectName}}
+
+Real-time RFID Radar & Tag Inventory Dashboard built with **Beetech OmniAuto-ID™ Platform**.
+
+## 🚀 Getting Started
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Run local dev server
+npm run dev
+```
+
+Open your browser at the local URL (usually `http://localhost:5173`).
+
+## ⚡ Features
+* **Zero-Hardware Simulation:** Automatically starts in mock mode if the OmniAuto-ID Gateway (`ws://localhost:19090/stream`) is not detected.
+* **Canvas Radar Sweep:** Real-time spatial visualization of tag reads across antennas.
+* **Live In-Memory Deduplication:** Aggregates read counts, RSSI signals, and inbound/outbound direction tracking.

package/templates/web-radar-dashboard/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{projectName}} - OmniAuto-ID Live RFID Radar</title>
+  <link rel="stylesheet" href="./src/style.css">
+</head>
+<body>
+  <div class="app-container">
+    <header class="navbar">
+      <div class="brand">
+        <div class="pulse-indicator live" id="statusPulse"></div>
+        <div class="title-group">
+          <h1>OmniAuto-ID™ Live Radar</h1>
+          <span class="subtitle">{{projectName}} • Port 19090 Stream</span>
+        </div>
+      </div>
+      <div class="header-controls">
+        <button id="toggleSimBtn" class="btn btn-secondary">Simulation: <span id="simStateText">AUTO</span></button>
+        <button id="clearBtn" class="btn btn-secondary">Clear Table</button>
+        <span class="badge" id="connBadge">Connecting...</span>
+      </div>
+    </header>
+
+    <main class="dashboard-grid">
+      <!-- Top Metric Cards -->
+      <section class="metric-card">
+        <span class="card-label">TOTAL TAGS PROCESSED</span>
+        <div class="card-value" id="totalTagsCount">0</div>
+        <span class="card-hint">Deduplicated in memory</span>
+      </section>
+
+      <section class="metric-card">
+        <span class="card-label">CURRENT SCAN VELOCITY</span>
+        <div class="card-value text-accent" id="tagRate">0 <span class="unit">tags/s</span></div>
+        <span class="card-hint">Sub-millisecond processing</span>
+      </section>
+
+      <section class="metric-card">
+        <span class="card-label">ACTIVE ANTENNAS</span>
+        <div class="card-value" id="activeAntennas">4</div>
+        <span class="card-hint">Port 1, 2 (In) • 3, 4 (Out)</span>
+      </section>
+
+      <section class="metric-card">
+        <span class="card-label">GATEWAY LATENCY</span>
+        <div class="card-value text-green" id="latencyMs">1.2 <span class="unit">ms</span></div>
+        <span class="card-hint">Native AOT WebSocket engine</span>
+      </section>
+
+      <!-- Radar Visualizer -->
+      <section class="panel radar-panel">
+        <div class="panel-header">
+          <h2>Antenna Beam Coverage &amp; Tag Radar</h2>
+          <span class="hint">Spatial RSSI Distribution</span>
+        </div>
+        <div class="radar-container">
+          <canvas id="radarCanvas" width="400" height="400"></canvas>
+        </div>
+      </section>
+
+      <!-- Live Scanned Stream Table -->
+      <section class="panel table-panel">
+        <div class="panel-header">
+          <h2>Live EPC Tag Inventory Feed</h2>
+          <span class="counter-badge" id="tableRowCount">0 detected</span>
+        </div>
+        <div class="table-scroll">
+          <table class="tag-table">
+            <thead>
+              <tr>
+                <th>TIME</th>
+                <th>EPC / GS1 IDENTIFIER</th>
+                <th>ANTENNA</th>
+                <th>RSSI</th>
+                <th>DIRECTION</th>
+                <th>READS</th>
+              </tr>
+            </thead>
+            <tbody id="tagTableBody">
+              <!-- Dynamically populated rows -->
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <script type="module" src="./src/main.js"></script>
+</body>
+</html>

package/templates/web-radar-dashboard/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@beetech-autoid/smartsdk-client": "^1.0.3"
+  },
+  "devDependencies": {
+    "vite": "^5.1.0"
+  }
+}

package/templates/web-radar-dashboard/src/main.js

@@ -0,0 +1,276 @@
+// OmniAuto-ID Live RFID Radar Engine
+const canvas = document.getElementById('radarCanvas');
+const ctx = canvas.getContext('2d');
+const tableBody = document.getElementById('tagTableBody');
+const totalTagsEl = document.getElementById('totalTagsCount');
+const tagRateEl = document.getElementById('tagRate');
+const connBadge = document.getElementById('connBadge');
+const tableRowCountEl = document.getElementById('tableRowCount');
+const toggleSimBtn = document.getElementById('toggleSimBtn');
+const simStateText = document.getElementById('simStateText');
+const clearBtn = document.getElementById('clearBtn');
+
+const tagsMap = new Map();
+const radarBlips = [];
+let totalScans = 0;
+let scansLastSecond = 0;
+let isSimulating = false;
+let simulationTimer = null;
+let ws = null;
+
+// Synthetic Audio Bip Effect via Web Audio API
+let audioCtx = null;
+function playScanBeep(frequency = 1200) {
+  try {
+    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(frequency, audioCtx.currentTime);
+    gain.gain.setValueAtTime(0.04, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.05);
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.06);
+  } catch (e) {
+    // Audio context may require user gesture on some browsers
+  }
+}
+
+// 1. Process and Render Incoming Tag Event
+function handleTagEvent(tag) {
+  totalScans++;
+  scansLastSecond++;
+  totalTagsEl.textContent = totalScans.toLocaleString();
+
+  const isNew = !tagsMap.has(tag.epc);
+  const existing = tagsMap.get(tag.epc) || { count: 0, firstSeen: new Date() };
+  existing.count++;
+  existing.lastSeen = new Date();
+  existing.rssi = tag.rssi;
+  existing.antenna = tag.antenna || 1;
+  existing.direction = tag.direction || (tag.antenna <= 2 ? 'Inbound' : 'Outbound');
+  tagsMap.set(tag.epc, existing);
+
+  // Add radar blip
+  const angle = Math.random() * Math.PI * 2;
+  const distRatio = Math.min(1, Math.max(0.1, (Math.abs(tag.rssi) - 30) / 50));
+  const maxR = canvas.width / 2 - 20;
+  radarBlips.push({
+    x: canvas.width / 2 + Math.cos(angle) * (distRatio * maxR),
+    y: canvas.height / 2 + Math.sin(angle) * (distRatio * maxR),
+    alpha: 1.0,
+    color: existing.direction === 'Inbound' ? '#00ff88' : '#00f0ff'
+  });
+
+  playScanBeep(existing.direction === 'Inbound' ? 1400 : 980);
+  updateTableRow(tag.epc, existing, isNew);
+}
+
+function updateTableRow(epc, info, isNew) {
+  let row = document.getElementById(`row-${epc}`);
+  const timeStr = info.lastSeen.toLocaleTimeString();
+
+  if (!row) {
+    row = document.createElement('tr');
+    row.id = `row-${epc}`;
+    row.className = 'tag-row newly-added';
+    tableBody.insertBefore(row, tableBody.firstChild);
+    tableRowCountEl.textContent = `${tagsMap.size} unique EPCs`;
+  } else {
+    row.classList.remove('newly-added');
+    void row.offsetWidth; // Trigger reflow for CSS animation
+    row.classList.add('newly-added');
+  }
+
+  const dirClass = info.direction === 'Inbound' ? 'dir-in' : 'dir-out';
+  const rssiWidth = Math.min(100, Math.max(10, 100 - (Math.abs(info.rssi) - 30) * 2));
+
+  row.innerHTML = `
+    <td>${timeStr}</td>
+    <td><strong>${epc}</strong></td>
+    <td>Port ${info.antenna}</td>
+    <td>
+      <div class="rssi-bar-container">
+        <span>${info.rssi.toFixed(1)} dBm</span>
+        <div class="rssi-fill" style="width: ${rssiWidth}px;"></div>
+      </div>
+    </td>
+    <td><span class="dir-badge ${dirClass}">${info.direction}</span></td>
+    <td><strong>${info.count}</strong></td>
+  `;
+}
+
+// 2. Radar Canvas Visualizer Loop
+let sweepAngle = 0;
+function drawRadar() {
+  const cx = canvas.width / 2;
+  const cy = canvas.height / 2;
+  const radius = cx - 15;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Concentric radar circles
+  ctx.strokeStyle = '#1e293b';
+  ctx.lineWidth = 1;
+  for (let r = radius / 4; r <= radius; r += radius / 4) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.stroke();
+  }
+
+  // Crosshairs
+  ctx.beginPath();
+  ctx.moveTo(cx - radius, cy);
+  ctx.lineTo(cx + radius, cy);
+  ctx.moveTo(cx, cy - radius);
+  ctx.lineTo(cx, cy + radius);
+  ctx.stroke();
+
+  // Rotating sweep beam
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.rotate(sweepAngle);
+  const gradient = ctx.createLinearGradient(0, 0, radius, 0);
+  gradient.addColorStop(0, 'rgba(0, 240, 255, 0.4)');
+  gradient.addColorStop(1, 'rgba(0, 240, 255, 0)');
+  ctx.fillStyle = gradient;
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.arc(0, 0, radius, -0.3, 0.3);
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+
+  sweepAngle += 0.04;
+
+  // Render glowing blips
+  for (let i = radarBlips.length - 1; i >= 0; i--) {
+    const blip = radarBlips[i];
+    ctx.beginPath();
+    ctx.arc(blip.x, blip.y, 4, 0, Math.PI * 2);
+    ctx.fillStyle = blip.color;
+    ctx.globalAlpha = blip.alpha;
+    ctx.fill();
+    ctx.globalAlpha = 1.0;
+
+    blip.alpha -= 0.015;
+    if (blip.alpha <= 0) {
+      radarBlips.splice(i, 1);
+    }
+  }
+
+  requestAnimationFrame(drawRadar);
+}
+
+// 3. Rate Meter Interval
+setInterval(() => {
+  tagRateEl.innerHTML = `${scansLastSecond} <span class="unit">tags/s</span>`;
+  scansLastSecond = 0;
+}, 1000);
+
+// 4. WebSocket Connection with Auto-Fallback
+function connectGateway() {
+  const wsUrl = 'ws://localhost:19090/stream';
+  connBadge.textContent = 'Connecting...';
+  connBadge.className = 'badge';
+
+  try {
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      connBadge.textContent = 'LIVE GATEWAY';
+      connBadge.className = 'badge connected';
+      stopSimulation();
+      console.log('Connected to OmniAuto-ID Edge Gateway on port 19090');
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.epc) {
+          handleTagEvent(data);
+        }
+      } catch (err) {
+        console.error('Failed to parse tag event:', err);
+      }
+    };
+
+    ws.onerror = () => {
+      fallbackToSimulation();
+    };
+
+    ws.onclose = () => {
+      fallbackToSimulation();
+    };
+  } catch (e) {
+    fallbackToSimulation();
+  }
+}
+
+function fallbackToSimulation() {
+  if (isSimulating) return;
+  connBadge.textContent = 'SIMULATOR MODE';
+  connBadge.className = 'badge simulated';
+  startSimulation();
+}
+
+function startSimulation() {
+  isSimulating = true;
+  simStateText.textContent = 'ON';
+  const sampleEpcs = [
+    '3034257BF400B7800004FB11',
+    '3034257BF400B7800004FB12',
+    '3034257BF400B7800004FB13',
+    'E2801160600002047E7A1001',
+    'E2801160600002047E7A1002',
+    'E2000019380902481840E1B4'
+  ];
+
+  simulationTimer = setInterval(() => {
+    const epc = sampleEpcs[Math.floor(Math.random() * sampleEpcs.length)];
+    const antenna = Math.floor(Math.random() * 4) + 1;
+    const rssi = -42 - Math.random() * 25;
+    handleTagEvent({
+      epc,
+      antenna,
+      rssi,
+      direction: antenna <= 2 ? 'Inbound' : 'Outbound'
+    });
+  }, 120);
+}
+
+function stopSimulation() {
+  isSimulating = false;
+  simStateText.textContent = 'OFF';
+  if (simulationTimer) {
+    clearInterval(simulationTimer);
+    simulationTimer = null;
+  }
+}
+
+// User Actions
+toggleSimBtn.addEventListener('click', () => {
+  if (isSimulating) {
+    stopSimulation();
+    connBadge.textContent = 'PAUSED';
+    connBadge.className = 'badge';
+  } else {
+    startSimulation();
+    connBadge.textContent = 'SIMULATOR MODE';
+    connBadge.className = 'badge simulated';
+  }
+});
+
+clearBtn.addEventListener('click', () => {
+  tagsMap.clear();
+  tableBody.innerHTML = '';
+  tableRowCountEl.textContent = '0 detected';
+  totalScans = 0;
+  totalTagsEl.textContent = '0';
+});
+
+// Boot up
+drawRadar();
+connectGateway();

package/templates/web-radar-dashboard/src/style.css

@@ -0,0 +1,304 @@
+:root {
+  --bg-primary: #0a0d14;
+  --bg-surface: #121824;
+  --bg-surface-elevated: #1a2234;
+  --border: #232e45;
+  --accent-cyan: #00f0ff;
+  --accent-green: #00ff88;
+  --accent-amber: #ffaa00;
+  --text-main: #f0f4f8;
+  --text-muted: #8a99ad;
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-main);
+  font-family: var(--font-family);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  width: 100%;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pulse-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent-green);
+  box-shadow: 0 0 12px var(--accent-green);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { transform: scale(0.95); opacity: 0.8; }
+  50% { transform: scale(1.2); opacity: 1; }
+  100% { transform: scale(0.95); opacity: 0.8; }
+}
+
+.title-group h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(90deg, #fff, var(--accent-cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.btn {
+  background: var(--bg-surface-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-main);
+  padding: 0.45rem 0.9rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn:hover {
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+}
+
+.badge {
+  background: rgba(0, 240, 255, 0.1);
+  color: var(--accent-cyan);
+  border: 1px solid rgba(0, 240, 255, 0.3);
+  padding: 0.35rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge.connected {
+  background: rgba(0, 255, 136, 0.1);
+  color: var(--accent-green);
+  border-color: rgba(0, 255, 136, 0.3);
+}
+
+.badge.simulated {
+  background: rgba(255, 170, 0, 0.1);
+  color: var(--accent-amber);
+  border-color: rgba(255, 170, 0, 0.3);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.25rem;
+}
+
+.metric-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.card-value {
+  font-size: 2rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+}
+
+.unit {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.text-accent { color: var(--accent-cyan); }
+.text-green { color: var(--accent-green); }
+
+.card-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.4rem;
+}
+
+.panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.radar-panel {
+  grid-column: span 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-panel {
+  grid-column: span 3;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.panel-header h2 {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.panel-header .hint,
+.panel-header .counter-badge {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.radar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 0;
+  flex-grow: 1;
+}
+
+#radarCanvas {
+  background: #07090e;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08);
+}
+
+.table-scroll {
+  overflow-y: auto;
+  max-height: 380px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.tag-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+  text-align: left;
+}
+
+.tag-table th {
+  background: var(--bg-surface-elevated);
+  padding: 0.75rem 1rem;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.tag-table td {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.tag-row.newly-added {
+  animation: highlightRow 1.2s ease-out;
+}
+
+@keyframes highlightRow {
+  0% { background-color: rgba(0, 240, 255, 0.25); }
+  100% { background-color: transparent; }
+}
+
+.dir-badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.dir-in {
+  background: rgba(0, 255, 136, 0.15);
+  color: var(--accent-green);
+}
+
+.dir-out {
+  background: rgba(0, 240, 255, 0.15);
+  color: var(--accent-cyan);
+}
+
+.rssi-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rssi-fill {
+  height: 6px;
+  background: var(--accent-cyan);
+  border-radius: 3px;
+}
+
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  .radar-panel, .table-panel {
+    grid-column: span 1;
+  }
+}

package/test/cli.test.js

@@ -0,0 +1,37 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const testAppDir = path.join(__dirname, 'test-output-app');
+
+console.log('Testing create-autoid-app CLI scaffolding...');
+
+// Clean up previous test if exists
+if (fs.existsSync(testAppDir)) {
+  fs.rmSync(testAppDir, { recursive: true, force: true });
+}
+
+// Run CLI with args: [projectName, templateKey]
+const binPath = path.join(__dirname, '..', 'bin', 'index.js');
+execSync(`node "${binPath}" "${testAppDir}" web-radar-dashboard`, { stdio: 'inherit' });
+
+// Assertions
+const expectedFiles = [
+  path.join(testAppDir, 'package.json'),
+  path.join(testAppDir, 'index.html'),
+  path.join(testAppDir, 'src', 'main.js'),
+  path.join(testAppDir, 'src', 'style.css'),
+  path.join(testAppDir, 'README.md')
+];
+
+for (const f of expectedFiles) {
+  if (!fs.existsSync(f)) {
+    console.error(`❌ Expected file not found: ${f}`);
+    process.exit(1);
+  }
+}
+
+// Clean up test output
+fs.rmSync(testAppDir, { recursive: true, force: true });
+
+console.log('✅ All CLI Scaffolding tests passed successfully!');

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.