v0.2.3

Added localization in Device Simulator
v0.2.2
2026-06-16 10:21:41 +08:00 · 2026-06-16 10:20:49 +08:00 · 2026-06-15 13:55:05 +08:00 · 2026-06-08 22:35:56 +08:00 · 2026-06-08 22:31:02 +08:00 · 2026-06-08 19:43:17 +08:00
21 changed files with 9210 additions and 15 deletions
--- a/README.md
+++ b/README.md
@@ -85,3 +85,35 @@ Changed
    - Standalone navigation now uses a collapsible sidebar with compact tool initials.
    - Mintegral Checker UI now embeds the playable preview, checklist, runtime events, mute, and reload controls in one view.
 ```
+
+**v0.2.1**
+```
+Added
+    - Added Device Simulator to the VS Code extension and standalone app.
+    - Added editable Device Simulator device lists with add, delete, restore defaults, import, and export.
+    - Added drag-and-drop reordering for Device Simulator devices.
+    - Added iPhone 17, iPhone Air, iPhone 17 Pro, and iPhone 17 Pro Max defaults.
+    - Added drag-and-drop tool reordering with persisted order in the VS Code launcher and standalone Home/sidebar.
+
+Changed
+    - Device Simulator settings now use a modal list manager with multi-select, add/delete, and move up/down controls.
+    - Standalone Device Simulator sidebar abbreviation is now DS.
+    - Send To Mobile browser preview now opens playables in a delayed full-screen preview wrapper while Download still serves the original HTML.
+
+Fixed
+    - Fixed Device Simulator mute for HTML media and WebAudio playables.
+    - Fixed Device Simulator Add Device and Remove Device interactions inside embedded webviews.
+    - Fixed Send To Mobile browser preview spending the View button's initial tap as a premature playable click-through while preserving real user-initiated redirects.
+```
+
+**v0.2.2**
+```
+Added
+    - Added automatic update checking to the VS Code extension and standalone app.
+```
+
+**v0.2.3**
+```
+Added
+    - Added Localization dropdown in Device Simulator.
+```
--- a/aiAssets/arr_mip_grhpl_easylevelprogression_01_real_nougc_noseason_en_full_na_al.html
+++ b/aiAssets/arr_mip_grhpl_easylevelprogression_01_real_nougc_noseason_en_full_na_al.html
--- a/aiAssets/wrd_mip_grhpl_simplegameplaysounddark_01_real_nougc_noseason_en_full_na_al.html
+++ b/aiAssets/wrd_mip_grhpl_simplegameplaysounddark_01_real_nougc_noseason_en_full_na_al.html
--- a/dist/hpl-toolbox-0.2.0.vsix
+++ b/dist/hpl-toolbox-0.2.0.vsix
--- a/dist/hpl-toolbox-0.2.3.exe
+++ b/dist/hpl-toolbox-0.2.3.exe
--- a/dist/hpl-toolbox-0.2.3.vsix
+++ b/dist/hpl-toolbox-0.2.3.vsix
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "hpl-toolbox",
  "displayName": "HPL Toolbox",
  "description": "Bundled tools: PLEC Upload, AppLovin Playable Preview, Base64 Scanner, MRAID Checker. Local HTML Host.",
-  "version": "0.2.0",
+  "version": "0.2.3",
  "publisher": "hesukastro",
  "license": "UNLICENSED",
  "repository": {
@@ -47,6 +47,14 @@
      {
        "command": "hplToolbox.openMintegralChecker",
        "title": "HPL Toolbox: Open Mintegral Checker"
+      },
+      {
+        "command": "hplToolbox.openDeviceSimulator",
+        "title": "HPL Toolbox: Open Device Simulator"
+      },
+      {
+        "command": "hplToolbox.checkForUpdates",
+        "title": "HPL Toolbox: Check for Updates"
      }
    ],
    "viewsContainers": {
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -8,6 +8,8 @@ import { openSendToMobile } from './tools/sendToMobile';
 import { openPlayworksConverter } from './tools/playworksConverter';
 import { openMintegralChecker } from './tools/mintegralChecker';
 import { openChangelog } from './changelogView';
+import { openDeviceSimulator } from './tools/deviceSimulator';
+import { checkForUpdates } from './updateChecker';

 export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
@@ -18,9 +20,13 @@ export function activate(context: vscode.ExtensionContext) {
    vscode.commands.registerCommand('hplToolbox.openSendToMobile', () => openSendToMobile(context)),
    vscode.commands.registerCommand('hplToolbox.openPlayworksConverter', () => openPlayworksConverter(context)),
    vscode.commands.registerCommand('hplToolbox.openMintegralChecker', () => openMintegralChecker(context)),
+    vscode.commands.registerCommand('hplToolbox.openDeviceSimulator', () => openDeviceSimulator(context)),
    vscode.commands.registerCommand('hplToolbox.openChangelog', () => openChangelog(context)),
+    vscode.commands.registerCommand('hplToolbox.checkForUpdates', () => checkForUpdates(context)),
    vscode.window.registerWebviewViewProvider('hplToolbox.launcher', new LauncherViewProvider(context))
  );
+
+  void checkForUpdates(context);
 }

 export function deactivate() {}
--- a/src/launcherView.ts
+++ b/src/launcherView.ts
@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import * as path from 'path';

 const BETA_TOOLS_ENABLED_KEY = 'hplToolbox.betaTools.enabled';
+const TOOL_ORDER_KEY = 'hplToolbox.toolOrder.v1';

 interface ToolDefinition {
  id?: string;
@@ -54,15 +55,20 @@ export class LauncherViewProvider implements vscode.WebviewViewProvider {
    const version = this.context.extension.packageJSON.version as string;
    const tools = loadToolDefinitions(this.context.extensionPath);
    const betaToolsEnabled = this.context.globalState.get<boolean>(BETA_TOOLS_ENABLED_KEY, false);
-    view.webview.html = getHtml(version, betaToolsEnabled, tools);
+    const toolOrder = this.context.globalState.get<string[]>(TOOL_ORDER_KEY, []);
+    view.webview.html = getHtml(version, betaToolsEnabled, tools, toolOrder);
    view.webview.onDidReceiveMessage(async (msg) => {
      if (msg?.type === 'open' && typeof msg.command === 'string') {
        vscode.commands.executeCommand(msg.command);
      } else if (msg?.type === 'openChangelog') {
        vscode.commands.executeCommand('hplToolbox.openChangelog');
+      } else if (msg?.type === 'checkForUpdates') {
+        vscode.commands.executeCommand('hplToolbox.checkForUpdates');
      } else if (msg?.type === 'setBetaToolsEnabled' && typeof msg.enabled === 'boolean') {
        await this.context.globalState.update(BETA_TOOLS_ENABLED_KEY, msg.enabled);
-        view.webview.html = getHtml(version, msg.enabled, tools);
+        view.webview.html = getHtml(version, msg.enabled, tools, this.context.globalState.get<string[]>(TOOL_ORDER_KEY, []));
+      } else if (msg?.type === 'setToolOrder' && Array.isArray(msg.order)) {
+        await this.context.globalState.update(TOOL_ORDER_KEY, msg.order.filter((id: unknown) => typeof id === 'string'));
      }
    });
  }
@@ -88,8 +94,8 @@ function loadToolDefinitions(extensionPath: string): ToolDefinition[] {
  }
 }

-function getHtml(version: string, betaToolsEnabled: boolean, tools: ToolDefinition[]): string {
-  const visibleTools = sortToolsForDisplay(tools.filter(tool => betaToolsEnabled || !tool.beta));
+function getHtml(version: string, betaToolsEnabled: boolean, tools: ToolDefinition[], toolOrder: string[]): string {
+  const visibleTools = sortToolsForDisplay(tools.filter(tool => betaToolsEnabled || !tool.beta), toolOrder);
  const toolButtons = visibleTools.map(renderToolButton).join('\n');
  return `<!DOCTYPE html>
 <html>
@@ -127,6 +133,9 @@ function getHtml(version: string, betaToolsEnabled: boolean, tools: ToolDefiniti
    cursor: pointer;
    font: inherit;
  }
+  .tool-btn.dragging {
+    opacity: 0.55;
+  }
  .tool-btn:hover {
    background: var(--vscode-list-hoverBackground, var(--vscode-button-secondaryHoverBackground));
    border-color: var(--vscode-focusBorder, var(--vscode-panel-border));
@@ -197,6 +206,7 @@ function getHtml(version: string, betaToolsEnabled: boolean, tools: ToolDefiniti
    opacity: 0.75;
    text-align: center;
    white-space: nowrap;
+    justify-self: center;
  }
  .changelog-link {
    justify-self: end;
@@ -210,16 +220,51 @@ ${toolButtons}
  </div>
  <div class="footer">
    <button id="betaToggle" class="footer-action" data-enabled="${betaToolsEnabled ? 'true' : 'false'}">${betaToolsEnabled ? 'Hide beta' : 'Show beta'}</button>
-    <span class="footer-version">${version} - JJGC 00784</span>
+    <button id="updateCheck" class="footer-action footer-version" title="Check for updates">${version} - JJGC 00784</button>
    <button id="changelogLink" class="footer-action changelog-link">Changelog</button>
  </div>
 <script>
  const vscode = acquireVsCodeApi();
  document.querySelectorAll('.tool-btn').forEach((btn) => {
    btn.addEventListener('click', () => {
+      if (btn.dataset.dragging === 'true') {
+        btn.dataset.dragging = 'false';
+        return;
+      }
      vscode.postMessage({ type: 'open', command: btn.dataset.cmd });
    });
  });
+  const toolsEl = document.querySelector('.tools');
+  let dragged = null;
+  toolsEl.querySelectorAll('.tool-btn').forEach((btn) => {
+    btn.draggable = true;
+    btn.addEventListener('dragstart', (event) => {
+      dragged = btn;
+      btn.classList.add('dragging');
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', btn.dataset.id || '');
+    });
+    btn.addEventListener('dragend', () => {
+      btn.classList.remove('dragging');
+      btn.dataset.dragging = 'true';
+      dragged = null;
+      persistToolOrder();
+      setTimeout(() => { btn.dataset.dragging = 'false'; }, 0);
+    });
+    btn.addEventListener('dragover', (event) => {
+      event.preventDefault();
+      if (!dragged || dragged === btn) return;
+      const rect = btn.getBoundingClientRect();
+      const after = event.clientY > rect.top + rect.height / 2;
+      toolsEl.insertBefore(dragged, after ? btn.nextSibling : btn);
+    });
+  });
+  function persistToolOrder() {
+    vscode.postMessage({
+      type: 'setToolOrder',
+      order: Array.from(toolsEl.querySelectorAll('.tool-btn')).map(btn => btn.dataset.id).filter(Boolean),
+    });
+  }
  document.getElementById('betaToggle').addEventListener('click', (event) => {
    const enabled = event.currentTarget.dataset.enabled === 'true';
    vscode.postMessage({ type: 'setBetaToolsEnabled', enabled: !enabled });
@@ -227,22 +272,37 @@ ${toolButtons}
  document.getElementById('changelogLink').addEventListener('click', () => {
    vscode.postMessage({ type: 'openChangelog' });
  });
+  document.getElementById('updateCheck').addEventListener('click', () => {
+    vscode.postMessage({ type: 'checkForUpdates' });
+  });
 </script>
 </body>
 </html>`;
 }

-function sortToolsForDisplay(tools: ToolDefinition[]): ToolDefinition[] {
-  return [...tools].sort((a, b) => Number(Boolean(a.beta)) - Number(Boolean(b.beta)));
+function sortToolsForDisplay(tools: ToolDefinition[], toolOrder: string[]): ToolDefinition[] {
+  const order = new Map(toolOrder.map((id, index) => [id, index]));
+  return [...tools].sort((a, b) => {
+    const aId = toolId(a);
+    const bId = toolId(b);
+    const ai = order.has(aId) ? order.get(aId)! : Number.MAX_SAFE_INTEGER;
+    const bi = order.has(bId) ? order.get(bId)! : Number.MAX_SAFE_INTEGER;
+    if (ai !== bi) return ai - bi;
+    return Number(Boolean(a.beta)) - Number(Boolean(b.beta));
+  });
 }

 function renderToolButton(tool: ToolDefinition): string {
-  return `  <button class="tool-btn" data-cmd="${escapeHtml(tool.command)}">
+  return `  <button class="tool-btn" data-id="${escapeHtml(toolId(tool))}" data-cmd="${escapeHtml(tool.command)}">
    <span class="tool-title">${escapeHtml(tool.title)}${tool.beta ? ' <span class="beta-badge">Beta</span>' : ''}</span>
    <span class="tool-desc">${escapeHtml(tool.description)}</span>
  </button>`;
 }

+function toolId(tool: ToolDefinition): string {
+  return tool.id || tool.command;
+}
+
 function escapeHtml(value: string): string {
  return value.replace(/[&<>"']/g, ch => ({
    '&': '&amp;',
--- a/src/tools/deviceSimulator.ts
+++ b/src/tools/deviceSimulator.ts
--- a/src/tools/sendToMobile.ts
+++ b/src/tools/sendToMobile.ts
@@ -234,7 +234,7 @@ function handleRequest(req: http.IncomingMessage, res: http.ServerResponse, shar
      'Content-Type': 'text/html; charset=utf-8',
      'Cache-Control': 'no-store',
    });
-    res.end(file.buf);
+    res.end(mobilePreviewPage(file));
    return;
  }

@@ -296,6 +296,35 @@ function chooserPage(files: SharedFile[]): string {
 </body></html>`;
 }

+function mobilePreviewPage(file: SharedFile): string {
+  const playableJson = JSON.stringify(file.buf.toString('utf8')).replace(/<\/script/gi, '<\\/script');
+  const title = file.filename.replace(/[&<>"]/g, (c) =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c] as string)
+  );
+  return `<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>${title}</title>
+<style>
+  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
+  iframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
+  .boot { position: fixed; inset: 0; display: grid; place-items: center; color: #777; font: 12px system-ui, sans-serif; }
+</style>
+</head><body>
+  <div id="boot" class="boot">Loading preview...</div>
+  <iframe id="playable" sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"></iframe>
+  <script>
+    const playableHtml = ${playableJson};
+    setTimeout(() => {
+      const frame = document.getElementById('playable');
+      document.getElementById('boot').style.display = 'none';
+      frame.srcdoc = playableHtml;
+    }, 750);
+  </script>
+</body></html>`;
+}
+
 interface LanIp { address: string; iface: string; }

 function getLanIps(): LanIp[] {
--- a/src/updateChecker.ts
+++ b/src/updateChecker.ts
@@ -0,0 +1,80 @@
+import * as vscode from 'vscode';
+
+const REMOTE_PACKAGE_JSON_URL = 'https://gitea.hesukastro.com/hesukastro/vsix-hpl-toolbox/raw/branch/main/package.json';
+
+interface RemotePackageJson {
+  version?: unknown;
+}
+
+export async function checkForUpdates(context: vscode.ExtensionContext): Promise<void> {
+  const currentVersion = String(context.extension.packageJSON.version ?? '').trim();
+
+  if (!currentVersion) {
+    vscode.window.showWarningMessage('HPL Toolbox could not read the installed version.');
+    return;
+  }
+
+  try {
+    const remoteVersion = await fetchRemoteVersion();
+    const comparison = compareVersions(remoteVersion, currentVersion);
+
+    if (comparison > 0) {
+      const action = await vscode.window.showInformationMessage(
+        `HPL Toolbox update available: ${remoteVersion} (installed: ${currentVersion}).`,
+        'Open Repository'
+      );
+
+      if (action === 'Open Repository') {
+        await vscode.env.openExternal(vscode.Uri.parse('https://gitea.hesukastro.com/hesukastro/vsix-hpl-toolbox'));
+      }
+      return;
+    }
+
+    vscode.window.showInformationMessage(`HPL Toolbox is up to date (${currentVersion}).`);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    vscode.window.showWarningMessage(`HPL Toolbox update check failed: ${message}`);
+  }
+}
+
+async function fetchRemoteVersion(): Promise<string> {
+  const response = await fetch(REMOTE_PACKAGE_JSON_URL, {
+    headers: {
+      Accept: 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`remote package.json returned HTTP ${response.status}`);
+  }
+
+  const packageJson = await response.json() as RemotePackageJson;
+  if (typeof packageJson.version !== 'string' || !packageJson.version.trim()) {
+    throw new Error('remote package.json is missing a version');
+  }
+
+  return packageJson.version.trim();
+}
+
+function compareVersions(left: string, right: string): number {
+  const leftParts = parseVersion(left);
+  const rightParts = parseVersion(right);
+  const length = Math.max(leftParts.length, rightParts.length);
+
+  for (let index = 0; index < length; index += 1) {
+    const leftPart = leftParts[index] ?? 0;
+    const rightPart = rightParts[index] ?? 0;
+
+    if (leftPart > rightPart) return 1;
+    if (leftPart < rightPart) return -1;
+  }
+
+  return 0;
+}
+
+function parseVersion(version: string): number[] {
+  return version
+    .split(/[.-]/)
+    .map(part => Number.parseInt(part, 10))
+    .filter(part => Number.isFinite(part));
+}
--- a/standalone/device_simulator.go
+++ b/standalone/device_simulator.go
--- a/standalone/home.go
+++ b/standalone/home.go
@@ -16,7 +16,7 @@ func HomePage(w http.ResponseWriter, r *http.Request) {
 		if n.Beta {
 			badge = ` <span class="beta-pill">Beta</span>`
 		}
-		items.WriteString(`<button type="button" class="home-tool" data-path="` + n.Path + `"><span class="home-tool-title">` + n.Label + badge + `</span><span class="home-tool-desc">` + n.Description + `</span></button>`)
+		items.WriteString(`<button type="button" class="home-tool" draggable="true" data-path="` + n.Path + `"><span class="home-tool-title">` + n.Label + badge + `</span><span class="home-tool-desc">` + n.Description + `</span></button>`)
 	}

 	body := `
@@ -43,6 +43,7 @@ func HomePage(w http.ResponseWriter, r *http.Request) {
    font:inherit;
  }
  .home-tool:hover { background:#33373a; border-color:#007fd4; }
+  .home-tool.dragging { opacity:0.55; }
  .home-tool-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; }
  .home-tool-desc { display:block; margin-top:4px; color:#a7a7a7; font-size:11px; line-height:1.35; }
 </style>
--- a/standalone/hpl.ico
+++ b/standalone/hpl.ico
--- a/standalone/layout.go
+++ b/standalone/layout.go
@@ -104,6 +104,7 @@ const SharedCSS = `
  }
  .sidebar .nav-link:hover { background: #2a2d2e; }
  .sidebar .nav-link.active { background: #094771; color: #fff; }
+  .sidebar .nav-link.dragging { opacity: 0.55; }
  .nav-icon {
    width: 28px;
    height: 26px;
@@ -158,6 +159,55 @@ const SharedCSS = `
  .app-footer-version { opacity: 0.75; text-align: center; white-space: nowrap; }
  .app-footer-link { justify-self: end; padding: 0; background: transparent; color: #a7a7a7; border: 0; cursor: pointer; font: inherit; opacity: 0.72; }
  .app-footer-link:hover { background: transparent; opacity: 1; text-decoration: underline; }
+  .app-footer-version-button { justify-self: center; padding: 0; background: transparent; color: #a7a7a7; border: 0; cursor: pointer; font: inherit; opacity: 0.75; text-align: center; white-space: nowrap; }
+  .app-footer-version-button:hover { background: transparent; opacity: 1; text-decoration: underline; }
+  .toast-box {
+    position: fixed;
+    right: 18px;
+    bottom: 18px;
+    z-index: 50;
+    max-width: min(420px, calc(100vw - 36px));
+    padding: 10px 12px;
+    display: none;
+    align-items: center;
+    gap: 10px;
+    color: #ddd;
+    background: #252526;
+    border: 1px solid #444;
+    border-left: 3px solid #007fd4;
+    border-radius: 5px;
+    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
+    font-size: 12px;
+    line-height: 1.35;
+  }
+  .toast-box.is-visible { display: flex; }
+  .toast-box.is-update { border-left-color: #ffd580; }
+  .toast-box.is-current { border-left-color: #89d185; }
+  .toast-box.is-error { border-left-color: #f48771; }
+  .toast-message { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+  .toast-action {
+    flex: 0 0 auto;
+    padding: 4px 8px;
+    background: #0e639c;
+    color: #fff;
+    border: 0;
+    border-radius: 2px;
+    font-size: 12px;
+  }
+  .toast-close {
+    flex: 0 0 auto;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    color: #a7a7a7;
+    border: 0;
+    font-size: 16px;
+    line-height: 1;
+  }
+  .toast-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
  body.sidebar-collapsed .sidebar { align-items: stretch; }
  body.sidebar-collapsed .sidebar-title,
  body.sidebar-collapsed .nav-text,
@@ -433,6 +483,7 @@ var navItems = []navItem{
 	{Path: "/mraid", Label: "MRAID Checker", Description: "Check MRAID requirements and best practices"},
 	{Path: "/mintegral", Label: "Mintegral Checker", Description: "Validate Mintegral playable ZIPs against PlayTurbo checks"},
 	{Path: "/playworks", Label: "Playworks Converter", Description: "Convert Playworks HTML to per-network variants", Beta: true},
+	{Path: "/device-simulator", Label: "Device Simulator", Description: "Preview HTML playables inside mobile device frames"},
 }

 func visibleNavItems(betaToolsEnabled bool) []navItem {
@@ -476,6 +527,8 @@ func navInitials(label string) string {
 		return "APP"
 	case "Mintegral Checker":
 		return "MiC"
+	case "Device Simulator":
+		return "DS"
 	}
 	words := strings.Fields(label)
 	if len(words) == 0 {
@@ -509,7 +562,7 @@ func Page(activePath, title, body string) string {
 		if n.Beta {
 			label += `<span class="beta-pill">Beta</span>`
 		}
-		tabs.WriteString(`<button type="button" class="nav-link` + cls + `" data-path="` + n.Path + `" title="` + n.Label + `"><span class="nav-icon">` + navInitials(n.Label) + `</span><span class="nav-text">` + label + `</span></button>`)
+		tabs.WriteString(`<button type="button" class="nav-link` + cls + `" data-path="` + n.Path + `" draggable="` + boolAttr(n.Path != "/") + `" title="` + n.Label + `"><span class="nav-icon">` + navInitials(n.Label) + `</span><span class="nav-text">` + label + `</span></button>`)
 	}

 	betaButtonLabel := "Show beta"
@@ -535,10 +588,15 @@ func Page(activePath, title, body string) string {
  <div class="content">` + body + `</div>
  <div class="app-footer">
    <button id="betaToolsToggle" class="beta-tools-toggle" data-enabled="` + boolAttr(betaToolsEnabled) + `">` + betaButtonLabel + `</button>
-    <span class="app-footer-version">` + AppVersion + ` - JJGC 00784</span>
+    <button id="updateCheck" type="button" class="app-footer-version-button" title="Check for updates">` + AppVersion + ` - JJGC 00784</button>
    <button type="button" class="app-footer-link" data-path="/changelog">Changelog</button>
  </div>
 </div>
+<div id="toastBox" class="toast-box" role="status" aria-live="polite">
+  <span id="toastMessage" class="toast-message"></span>
+  <button id="toastAction" type="button" class="toast-action is-hidden">Open Repository</button>
+  <button id="toastClose" type="button" class="toast-close" aria-label="Close">x</button>
+</div>
 <script>
 if (localStorage.getItem('hplSidebarCollapsed') === 'true') {
  document.body.classList.add('sidebar-collapsed');
@@ -549,10 +607,72 @@ document.getElementById('sidebarToggle').addEventListener('click', () => {
 });
 document.querySelectorAll('[data-path]').forEach((element) => {
  element.addEventListener('click', () => {
+    if (element.dataset.dragging === 'true') {
+      element.dataset.dragging = 'false';
+      return;
+    }
    const path = element.dataset.path;
    if (path) window.location.href = path;
  });
 });
+const TOOL_ORDER_KEY = 'hplToolbox.toolOrder.v1';
+function getToolOrder() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(TOOL_ORDER_KEY) || '[]');
+    return Array.isArray(parsed) ? parsed.filter(path => typeof path === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+function setToolOrder(paths) {
+  localStorage.setItem(TOOL_ORDER_KEY, JSON.stringify(paths));
+}
+function applyStoredToolOrder(container, selector) {
+  if (!container) return;
+  const order = getToolOrder();
+  if (!order.length) return;
+  const elements = Array.from(container.querySelectorAll(selector));
+  const byPath = new Map(elements.map(el => [el.dataset.path, el]));
+  const home = byPath.get('/');
+  const ordered = order.map(path => byPath.get(path)).filter(Boolean);
+  const orderedSet = new Set(ordered);
+  const remaining = elements.filter(el => el !== home && !orderedSet.has(el));
+  if (home) container.appendChild(home);
+  ordered.concat(remaining).forEach(el => container.appendChild(el));
+}
+function setupToolReorder(container, selector) {
+  if (!container) return;
+  applyStoredToolOrder(container, selector);
+  let dragged = null;
+  container.querySelectorAll(selector).forEach(element => {
+    if (element.dataset.path === '/') return;
+    element.addEventListener('dragstart', event => {
+      dragged = element;
+      element.classList.add('dragging');
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', element.dataset.path || '');
+    });
+    element.addEventListener('dragend', () => {
+      element.classList.remove('dragging');
+      element.dataset.dragging = 'true';
+      dragged = null;
+      const paths = Array.from(container.querySelectorAll(selector))
+        .map(el => el.dataset.path)
+        .filter(path => path && path !== '/');
+      setToolOrder(paths);
+      setTimeout(() => { element.dataset.dragging = 'false'; }, 0);
+    });
+    element.addEventListener('dragover', event => {
+      event.preventDefault();
+      if (!dragged || dragged === element || element.dataset.path === '/') return;
+      const rect = element.getBoundingClientRect();
+      const after = event.clientY > rect.top + rect.height / 2;
+      container.insertBefore(dragged, after ? element.nextSibling : element);
+    });
+  });
+}
+setupToolReorder(document.querySelector('.sidebar-nav'), '.nav-link');
+setupToolReorder(document.querySelector('.home-tools'), '.home-tool');
 document.getElementById('betaToolsToggle').addEventListener('click', async (event) => {
  const enabled = event.currentTarget.dataset.enabled === 'true';
  await fetch('/api/betaTools', {
@@ -562,6 +682,51 @@ document.getElementById('betaToolsToggle').addEventListener('click', async (even
  });
  window.location.reload();
 });
+const toastBox = document.getElementById('toastBox');
+const toastMessage = document.getElementById('toastMessage');
+const toastAction = document.getElementById('toastAction');
+const toastClose = document.getElementById('toastClose');
+let toastTimer = null;
+let updateRepositoryUrl = '';
+function showToast(message, status, repositoryUrl) {
+  window.clearTimeout(toastTimer);
+  updateRepositoryUrl = repositoryUrl || '';
+  toastMessage.textContent = message || '';
+  toastAction.classList.toggle('is-hidden', !updateRepositoryUrl);
+  toastBox.className = 'toast-box is-visible is-' + (status || 'current');
+  toastTimer = window.setTimeout(() => {
+    toastBox.classList.remove('is-visible');
+  }, updateRepositoryUrl ? 9000 : 5000);
+}
+async function checkForUpdates(showCurrent) {
+  try {
+    const response = await fetch('/api/update/check');
+    const result = await response.json();
+    if (result.status === 'current' && !showCurrent) return;
+    showToast(result.message || 'HPL Toolbox update check finished.', result.status, result.repositoryUrl);
+  } catch (error) {
+    showToast('HPL Toolbox update check failed: ' + (error.message || error), 'error');
+  }
+}
+document.getElementById('updateCheck').addEventListener('click', () => {
+  checkForUpdates(true);
+});
+toastClose.addEventListener('click', () => {
+  window.clearTimeout(toastTimer);
+  toastBox.classList.remove('is-visible');
+});
+toastAction.addEventListener('click', async () => {
+  if (!updateRepositoryUrl) return;
+  await fetch('/api/open', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url: updateRepositoryUrl }),
+  });
+});
+if (sessionStorage.getItem('hplToolboxUpdateChecked') !== 'true') {
+  sessionStorage.setItem('hplToolboxUpdateChecked', 'true');
+  checkForUpdates(true);
+}
 </script>
 </body></html>`
 }
--- a/standalone/main.go
+++ b/standalone/main.go
@@ -114,6 +114,7 @@ func buildMux() *http.ServeMux {
 	mux.HandleFunc("GET /mintegral", MintegralPage)
 	mux.HandleFunc("GET /mobile", MobilePage)
 	mux.HandleFunc("GET /playworks", PlayworksPage)
+	mux.HandleFunc("GET /device-simulator", DeviceSimulatorPage)
 	mux.HandleFunc("GET /changelog", ChangelogPage)
 	mux.HandleFunc("GET /assets/qrcode.min.js", MobileQrScript)

@@ -122,6 +123,7 @@ func buildMux() *http.ServeMux {
 	mux.HandleFunc("POST /api/open", OpenEndpoint)
 	mux.HandleFunc("POST /api/focus", FocusEndpoint)
 	mux.HandleFunc("POST /api/betaTools", BetaToolsEndpoint)
+	mux.HandleFunc("GET /api/update/check", UpdateCheckEndpoint)
 	mux.HandleFunc("POST /api/drop/resolve", DropResolveEndpoint)

 	// PLEC
@@ -165,6 +167,11 @@ func buildMux() *http.ServeMux {
 	mux.HandleFunc("POST /api/playworks/pickOutput", PlayworksPickOutput)
 	mux.HandleFunc("POST /api/playworks/convert", PlayworksConvert)

+	// Device Simulator
+	mux.HandleFunc("POST /api/device-simulator/pick", DeviceSimulatorPick)
+	mux.HandleFunc("POST /api/device-simulator/load", DeviceSimulatorLoad)
+	mux.HandleFunc("GET /api/device-simulator/preview/", DeviceSimulatorPreview)
+
 	return mux
 }

--- a/standalone/mobile.go
+++ b/standalone/mobile.go
@@ -457,7 +457,7 @@ func shareHandler(s *activeShare) http.Handler {
 			}
 			w.Header().Set("Content-Type", "text/html; charset=utf-8")
 			w.Header().Set("Cache-Control", "no-store")
-			_, _ = w.Write(s.files[0].buf)
+			_, _ = w.Write([]byte(mobilePreviewPage(s.files[0])))
 		case "/file":
 			fallthrough
 		case "/file/0":
@@ -481,7 +481,7 @@ func shareHandler(s *activeShare) http.Handler {
 						if parts[0] == "view" {
 							w.Header().Set("Content-Type", "text/html; charset=utf-8")
 							w.Header().Set("Cache-Control", "no-store")
-							_, _ = w.Write(file.buf)
+							_, _ = w.Write([]byte(mobilePreviewPage(file)))
 							return
 						}
 						safeName := safeFilename(file.filename)
@@ -499,6 +499,35 @@ func shareHandler(s *activeShare) http.Handler {
 	})
 }

+func mobilePreviewPage(file sharedFile) string {
+	playableJSON, _ := json.Marshal(string(file.buf))
+	playableScriptValue := strings.ReplaceAll(string(playableJSON), "</script", "<\\/script")
+	playableScriptValue = strings.ReplaceAll(playableScriptValue, "</SCRIPT", "<\\/SCRIPT")
+	title := html.EscapeString(file.filename)
+	return `<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>` + title + `</title>
+<style>
+  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
+  iframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
+  .boot { position: fixed; inset: 0; display: grid; place-items: center; color: #777; font: 12px system-ui, sans-serif; }
+</style>
+</head><body>
+  <div id="boot" class="boot">Loading preview...</div>
+  <iframe id="playable" sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"></iframe>
+  <script>
+    const playableHtml = ` + playableScriptValue + `;
+    setTimeout(() => {
+      const frame = document.getElementById('playable');
+      document.getElementById('boot').style.display = 'none';
+      frame.srcdoc = playableHtml;
+    }, 750);
+  </script>
+</body></html>`
+}
+
 var unsafeFilenameRx = regexp.MustCompile(`[^A-Za-z0-9._-]`)

 func safeFilename(s string) string { return unsafeFilenameRx.ReplaceAllString(s, "_") }
--- a/standalone/rsrc.syso
+++ b/standalone/rsrc.syso
--- a/standalone/update_checker.go
+++ b/standalone/update_checker.go
@@ -0,0 +1,127 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+)
+
+const remotePackageJSONURL = "https://gitea.hesukastro.com/hesukastro/vsix-hpl-toolbox/raw/branch/main/package.json"
+const updateRepositoryURL = "https://gitea.hesukastro.com/hesukastro/vsix-hpl-toolbox"
+
+type updateCheckResponse struct {
+	OK             bool   `json:"ok"`
+	Status         string `json:"status"`
+	CurrentVersion string `json:"currentVersion"`
+	RemoteVersion  string `json:"remoteVersion,omitempty"`
+	Message        string `json:"message"`
+	RepositoryURL  string `json:"repositoryUrl,omitempty"`
+}
+
+func UpdateCheckEndpoint(w http.ResponseWriter, r *http.Request) {
+	remoteVersion, err := fetchRemoteVersion()
+	if err != nil {
+		writeJSON(w, updateCheckResponse{
+			OK:             false,
+			Status:         "error",
+			CurrentVersion: AppVersion,
+			Message:        "HPL Toolbox update check failed: " + err.Error(),
+		})
+		return
+	}
+
+	comparison := compareVersions(remoteVersion, AppVersion)
+	if comparison > 0 {
+		writeJSON(w, updateCheckResponse{
+			OK:             true,
+			Status:         "update",
+			CurrentVersion: AppVersion,
+			RemoteVersion:  remoteVersion,
+			Message:        fmt.Sprintf("HPL Toolbox update available: %s (installed: %s).", remoteVersion, AppVersion),
+			RepositoryURL:  updateRepositoryURL,
+		})
+		return
+	}
+
+	writeJSON(w, updateCheckResponse{
+		OK:             true,
+		Status:         "current",
+		CurrentVersion: AppVersion,
+		RemoteVersion:  remoteVersion,
+		Message:        fmt.Sprintf("HPL Toolbox is up to date (%s).", AppVersion),
+	})
+}
+
+func fetchRemoteVersion() (string, error) {
+	client := http.Client{Timeout: 10 * time.Second}
+	req, err := http.NewRequest(http.MethodGet, remotePackageJSONURL, nil)
+	if err != nil {
+		return "", err
+	}
+	req.Header.Set("Accept", "application/json")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		return "", fmt.Errorf("remote package.json returned HTTP %d", resp.StatusCode)
+	}
+
+	var packageJSON struct {
+		Version string `json:"version"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&packageJSON); err != nil {
+		return "", err
+	}
+	if strings.TrimSpace(packageJSON.Version) == "" {
+		return "", fmt.Errorf("remote package.json is missing a version")
+	}
+
+	return strings.TrimSpace(packageJSON.Version), nil
+}
+
+func compareVersions(left, right string) int {
+	leftParts := parseVersionParts(left)
+	rightParts := parseVersionParts(right)
+	length := len(leftParts)
+	if len(rightParts) > length {
+		length = len(rightParts)
+	}
+	for i := 0; i < length; i++ {
+		leftPart := 0
+		rightPart := 0
+		if i < len(leftParts) {
+			leftPart = leftParts[i]
+		}
+		if i < len(rightParts) {
+			rightPart = rightParts[i]
+		}
+		if leftPart > rightPart {
+			return 1
+		}
+		if leftPart < rightPart {
+			return -1
+		}
+	}
+	return 0
+}
+
+func parseVersionParts(version string) []int {
+	fields := strings.FieldsFunc(version, func(r rune) bool {
+		return r == '.' || r == '-'
+	})
+	parts := make([]int, 0, len(fields))
+	for _, field := range fields {
+		part, err := strconv.Atoi(field)
+		if err == nil {
+			parts = append(parts, part)
+		}
+	}
+	return parts
+}
--- a/tools.json
+++ b/tools.json
@@ -54,5 +54,13 @@
    "command": "hplToolbox.openMintegralChecker",
    "path": "/mintegral",
    "beta": false
+  },
+  {
+    "id": "device-simulator",
+    "title": "Device Simulator",
+    "description": "Preview HTML playables inside accurate mobile device frames with notch and Dynamic Island overlays",
+    "command": "hplToolbox.openDeviceSimulator",
+    "path": "/device-simulator",
+    "beta": false
  }
 ]
Author	SHA1	Message	Date
hesukastro	5fa1ce949c	v0.2.3	2026-06-16 10:21:41 +08:00
hesukastro	e50b4c2133	Added localization in Device Simulator	2026-06-16 10:20:49 +08:00
hesukastro	cebb65fb35	v0.2.2	2026-06-15 13:55:05 +08:00
hesukastro	7094e6c3b0	0.2.1	2026-06-08 22:35:56 +08:00
hesukastro	6c09beea43	0.2.1	2026-06-08 22:31:02 +08:00
hesukastro	ad6403f3e4	device simulator	2026-06-08 19:43:17 +08:00
hesukastro	700bb135ad	update icon.	2026-06-05 09:26:49 +08:00