Migrate updater LAN and devkit features from old repo

src/lib/components/DevKitConfigPanel.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let running = false;
+  export let port = 50051;
+  export let framesSent = 0;
+  export let filterLiftEnabled = true;
+  export let saveAsXlsx = false;
+  export let locale: "zh-CN" | "en-US" = "zh-CN";
+  export let lastProcessResult: {
+    outputPath: string;
+    groupsUsed: number;
+    meanValue: number;
+    threshold: number;
+    rowsTotal: number;
+    rowsKept: number;
+  } | null = null;
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+    togglefilterlift: void;
+    togglexlsx: void;
+  }>();
+
+  $: labels = locale === "zh-CN"
+    ? {
+        title: "DevKit 配置",
+        status: "状态",
+        connected: "已连接",
+        disconnected: "未连接",
+        port: "端口",
+        framesSent: "已发送帧",
+        filterLift: "导出过滤抬起",
+        filterLiftHint: "导出 CSV 后自动调用 Python 做梯度过滤，过滤掉抬起的小值数据",
+        saveXlsx: "以 xlsx 保存",
+        saveXlsxHint: "Python 处理后输出 xlsx 格式并删除源 CSV 文件",
+        lastResult: "最近一次处理",
+        output: "输出文件",
+        groups: "分组数",
+        mean: "均值",
+        threshold: "阈值",
+        rows: "行数",
+        kept: "保留行数",
+      }
+    : {
+        title: "DevKit Config",
+        status: "Status",
+        connected: "Connected",
+        disconnected: "Disconnected",
+        port: "Port",
+        framesSent: "Frames sent",
+        filterLift: "Filter lift on export",
+        filterLiftHint: "After CSV export, automatically call Python to filter out small values",
+        saveXlsx: "Save as xlsx",
+        saveXlsxHint: "Python outputs xlsx format and deletes the source CSV file",
+        lastResult: "Last process",
+        output: "Output",
+        groups: "Groups",
+        mean: "Mean",
+        threshold: "Threshold",
+        rows: "Rows",
+        kept: "Kept rows",
+      };
+</script>
+
+<div class="dk-panel">
+  <header class="dk-head">
+    <h3 class="dk-title">{labels.title}</h3>
+    <button type="button" class="dk-close" on:click={() => dispatch("close")} aria-label="Close">
+      <span></span><span></span>
+    </button>
+  </header>
+
+  <section class="dk-section">
+    <div class="dk-status-row">
+      <span class="dk-dot" class:active={running}></span>
+      <span class="dk-label">{labels.status}</span>
+      <span class="dk-value">{running ? labels.connected : labels.disconnected}</span>
+    </div>
+    {#if running}
+      <div class="dk-info-grid">
+        <div class="dk-info">
+          <span class="dk-info-label">{labels.port}</span>
+          <span class="dk-info-value">:{port}</span>
+        </div>
+        <div class="dk-info">
+          <span class="dk-info-label">{labels.framesSent}</span>
+          <span class="dk-info-value">{framesSent}</span>
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  <section class="dk-section">
+    <button type="button" class="dk-toggle" class:active={filterLiftEnabled} on:click={() => dispatch("togglefilterlift")}>
+      <span class="dk-toggle-indicator"></span>
+      <div class="dk-toggle-text">
+        <span class="dk-toggle-label">{labels.filterLift}</span>
+        <span class="dk-toggle-hint">{labels.filterLiftHint}</span>
+      </div>
+    </button>
+  </section>
+
+  <section class="dk-section">
+    <button type="button" class="dk-toggle" class:active={saveAsXlsx} on:click={() => dispatch("togglexlsx")}>
+      <span class="dk-toggle-indicator"></span>
+      <div class="dk-toggle-text">
+        <span class="dk-toggle-label">{labels.saveXlsx}</span>
+        <span class="dk-toggle-hint">{labels.saveXlsxHint}</span>
+      </div>
+    </button>
+  </section>
+
+  {#if lastProcessResult}
+    <section class="dk-section dk-result">
+      <p class="dk-section-title">{labels.lastResult}</p>
+      <div class="dk-result-grid">
+        <div class="dk-result-item">
+          <span class="dk-result-label">{labels.output}</span>
+          <span class="dk-result-value">{lastProcessResult.outputPath}</span>
+        </div>
+        <div class="dk-result-item">
+          <span class="dk-result-label">{labels.groups}</span>
+          <span class="dk-result-value">{lastProcessResult.groupsUsed}</span>
+        </div>
+        <div class="dk-result-item">
+          <span class="dk-result-label">{labels.mean}</span>
+          <span class="dk-result-value">{lastProcessResult.meanValue.toFixed(3)}</span>
+        </div>
+        <div class="dk-result-item">
+          <span class="dk-result-label">{labels.threshold}</span>
+          <span class="dk-result-value">{lastProcessResult.threshold.toFixed(3)}</span>
+        </div>
+        <div class="dk-result-item">
+          <span class="dk-result-label">{labels.rows}</span>
+          <span class="dk-result-value">{lastProcessResult.rowsTotal} → {lastProcessResult.rowsKept}</span>
+        </div>
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .dk-panel {
+    display: grid;
+    gap: 0.7rem;
+    inline-size: min(22rem, 100%);
+    padding: 0.9rem 0.96rem 1rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.3);
+    border-radius: 0.82rem;
+    background:
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-deep-rgb) / 0.88)),
+      radial-gradient(circle at 100% 0, rgb(var(--hud-info-rgb) / 0.07), transparent 38%);
+    box-shadow:
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
+      0 18px 46px rgb(0 0 0 / 0.28);
+    backdrop-filter: blur(10px);
+  }
+
+  .dk-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dk-title {
+    margin: 0;
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .dk-close {
+    position: relative;
+    inline-size: 1.8rem;
+    block-size: 1.8rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
+    border-radius: 999px;
+    background: rgb(var(--hud-surface-deep-rgb) / 0.72);
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+
+  .dk-close span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: 0.7rem;
+    block-size: 1px;
+    background: rgb(var(--hud-text-main-rgb) / 0.9);
+    transform-origin: center;
+  }
+
+  .dk-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
+  .dk-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
+
+  .dk-section {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.6rem 0.7rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.22);
+    border-radius: 0.68rem;
+    background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.76), rgb(var(--hud-surface-deep-rgb) / 0.64));
+  }
+
+  .dk-status-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dk-dot {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    background: rgb(var(--hud-text-dim-rgb) / 0.8);
+    transition: background 200ms ease;
+  }
+
+  .dk-dot.active {
+    background: rgb(var(--hud-lime-rgb) / 0.95);
+    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
+  }
+
+  .dk-label {
+    color: rgb(var(--hud-text-dim-rgb) / 0.8);
+    font-size: 0.62rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .dk-value {
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
+    font-size: 0.82rem;
+    font-weight: 500;
+    margin-inline-start: auto;
+  }
+
+  .dk-info-grid {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .dk-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .dk-info-label {
+    color: rgb(var(--hud-text-dim-rgb) / 0.7);
+    font-size: 0.56rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .dk-info-value {
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    font-size: 0.82rem;
+    font-weight: 500;
+  }
+
+  .dk-toggle {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.24);
+    border-radius: 0.58rem;
+    padding: 0.55rem 0.65rem;
+    background: rgb(var(--hud-surface-rgb) / 0.82);
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 180ms ease, box-shadow 180ms ease;
+  }
+
+  .dk-toggle:hover {
+    border-color: rgb(var(--hud-cyan-rgb) / 0.36);
+  }
+
+  .dk-toggle.active {
+    border-color: rgb(var(--hud-lime-rgb) / 0.48);
+    box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08), 0 0 14px rgb(var(--hud-glow-alt-rgb) / 0.12);
+  }
+
+  .dk-toggle-indicator {
+    inline-size: 0.56rem;
+    block-size: 0.56rem;
+    min-inline-size: 0.56rem;
+    border-radius: 50%;
+    margin-block-start: 0.15rem;
+    background: rgb(var(--hud-text-dim-rgb) / 0.7);
+    transition: background 180ms ease;
+  }
+
+  .dk-toggle.active .dk-toggle-indicator {
+    background: rgb(var(--hud-lime-rgb) / 0.92);
+    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
+  }
+
+  .dk-toggle-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .dk-toggle-label {
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
+    font-size: 0.78rem;
+    font-weight: 500;
+  }
+
+  .dk-toggle-hint {
+    color: rgb(var(--hud-text-dim-rgb) / 0.7);
+    font-size: 0.64rem;
+    line-height: 1.35;
+  }
+
+  .dk-section-title {
+    margin: 0;
+    color: rgb(var(--hud-text-dim-rgb) / 0.8);
+    font-size: 0.58rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .dk-result {
+    display: grid;
+    gap: 0.45rem;
+  }
+
+  .dk-result-grid {
+    display: grid;
+    gap: 0.3rem;
+  }
+
+  .dk-result-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 0.2rem 0;
+    border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.14);
+  }
+
+  .dk-result-item:last-child {
+    border-bottom: none;
+  }
+
+  .dk-result-label {
+    color: rgb(var(--hud-text-dim-rgb) / 0.72);
+    font-size: 0.64rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .dk-result-value {
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    font-size: 0.76rem;
+    font-weight: 500;
+    text-align: right;
+    word-break: break-all;
+  }
+</style>

src/lib/components/HudPanel.svelte

@@ -41,6 +41,10 @@
   export let importActionLabel = "";
   export let connectionNotice = "";
   export let connectionNoticeTone: HudNoticeTone = "info";
+  export let noticeConfirmLabel = "";
+  export let noticeCancelLabel = "";
+  export let noticeShowActions = false;
+  export let noticeActionBusy = false;
   export let isRefreshingPorts = false;
   export let isConnectDisabled = false;
   export let isExporting = false;
@@ -58,6 +62,8 @@
     serialexport: void;
     csvimport: void;
     noticeclear: void;
+    noticeconfirm: void;
+    noticecancel: void;
   }>();
 
   const connectionToneByState: Record<ConnectionState, "ok" | "warn" | "idle"> = {
@@ -123,6 +129,14 @@
   function emitNoticeClear(): void {
     dispatch("noticeclear");
   }
+
+  function emitNoticeConfirm(): void {
+    dispatch("noticeconfirm");
+  }
+
+  function emitNoticeCancel(): void {
+    dispatch("noticecancel");
+  }
 </script>
 
 <section class="hud-panel" aria-label={controlAreaLabel}>
@@ -301,14 +315,25 @@
     {#if connectionNotice}
       <div class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
         <p class="connection-notice-text">{connectionNotice}</p>
-        <button
-          type="button"
-          class="notice-close-btn"
-          aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
-          on:click={emitNoticeClear}
-        >
-          ×
-        </button>
+        {#if noticeShowActions}
+          <div class="notice-actions">
+            <button type="button" class="notice-action-btn is-primary" disabled={noticeActionBusy} on:click={emitNoticeConfirm}>
+              {noticeActionBusy ? (locale === "zh-CN" ? "处理中..." : "Working...") : noticeConfirmLabel}
+            </button>
+            <button type="button" class="notice-action-btn" disabled={noticeActionBusy} on:click={emitNoticeCancel}>
+              {noticeCancelLabel}
+            </button>
+          </div>
+        {:else}
+          <button
+            type="button"
+            class="notice-close-btn"
+            aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
+            on:click={emitNoticeClear}
+          >
+            ×
+          </button>
+        {/if}
       </div>
     {/if}
 
@@ -921,6 +946,58 @@
     background: rgb(9 16 22 / 0.92);
   }
 
+  .notice-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.42rem;
+    flex-shrink: 0;
+  }
+
+  .notice-action-btn {
+    min-block-size: 1.55rem;
+    border: 1px solid rgb(116 151 176 / 0.38);
+    border-radius: 999px;
+    padding: 0.24rem 0.72rem;
+    background: rgb(7 12 16 / 0.76);
+    color: rgb(194 225 245 / 0.94);
+    font-size: 0.68rem;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      color 180ms ease,
+      background-color 180ms ease,
+      box-shadow 200ms ease,
+      opacity 180ms ease;
+  }
+
+  .notice-action-btn:hover:not(:disabled) {
+    border-color: rgb(62 232 255 / 0.46);
+    color: rgb(237 250 255 / 0.98);
+    background: rgb(9 16 22 / 0.92);
+  }
+
+  .notice-action-btn.is-primary {
+    border-color: rgb(var(--hud-lime-rgb) / 0.44);
+    background:
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.94), rgb(var(--hud-surface-rgb) / 0.88)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-lime-rgb) / 0.14), transparent 58%);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    box-shadow: 0 0 10px rgb(var(--hud-lime-rgb) / 0.08);
+  }
+
+  .notice-action-btn.is-primary:hover:not(:disabled) {
+    border-color: rgb(var(--hud-lime-rgb) / 0.62);
+    box-shadow:
+      inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.08),
+      0 0 13px rgb(var(--hud-lime-rgb) / 0.14);
+  }
+
+  .notice-action-btn:disabled {
+    cursor: default;
+    opacity: 0.64;
+  }
+
   .connection-notice.tone-warn .notice-close-btn:hover {
     border-color: rgb(255 91 63 / 0.6);
     color: rgb(255 227 220 / 0.98);
@@ -1139,4 +1216,4 @@
     }
 
   }
-</style>
+</style>

src/lib/config/pressure-range.ts

@@ -1,2 +1,2 @@
 export const DEFAULT_PRESSURE_RANGE_MIN = 0;
-export const DEFAULT_PRESSURE_RANGE_MAX = 6000;
+export const DEFAULT_PRESSURE_RANGE_MAX = 7000;

src/routes/+page.svelte

@@ -3,9 +3,12 @@
   import { invoke } from "@tauri-apps/api/core";
   import { listen, type UnlistenFn } from "@tauri-apps/api/event";
   import { LogicalSize, currentMonitor, getCurrentWindow } from "@tauri-apps/api/window";
+  import { relaunch } from "@tauri-apps/plugin-process";
+  import { check } from "@tauri-apps/plugin-updater";
   import HudPanel from "$lib/components/HudPanel.svelte";
   import CenterStage from "$lib/components/CenterStage.svelte";
   import FileExplorerModal from "$lib/components/FileExplorerModal.svelte";
+  import DevKitConfigPanel from "$lib/components/DevKitConfigPanel.svelte";
   import { DEFAULT_PRESSURE_RANGE_MAX, DEFAULT_PRESSURE_RANGE_MIN } from "$lib/config/pressure-range";
   import { pressureColorPalettes } from "$lib/config/color-map";
   import "$lib/styles/theme.css";
@@ -203,6 +206,9 @@
   let isRefreshingPorts = false;
   let connectionNotice = "";
   let connectionNoticeTone: HudNoticeTone = "info";
+  let updateNoticeVisible = false;
+  let updateInstallBusy = false;
+  let pendingUpdate: Awaited<ReturnType<typeof check>> | null = null;
   let isExporting = false;
   let deviceValue = "JE-Skin-F";
   let sampleRateValue = "100Hz";
@@ -238,6 +244,22 @@
   let fileExplorerRoots: FileExplorerRoot[] = [];
   let fileExplorerSelectedPath = "";
   let fileExplorerFileName = "";
+  let isDevKitConfigOpen = false;
+  let devkitEnabled = false;
+  let devkitRunning = false;
+  let devkitPort = 50051;
+  let devkitFramesSent = 0;
+  let devkitFilterLift = true;
+  let devkitSaveXlsx = false;
+  let devkitLastResult: {
+    outputPath: string;
+    groupsUsed: number;
+    meanValue: number;
+    threshold: number;
+    rowsTotal: number;
+    rowsKept: number;
+  } | null = null;
+  let devkitStatusTimer: number | null = null;
 
   $: uiCopy = copyByLocale[locale];
   $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen, isPrecisionTestOpen);
@@ -1012,7 +1034,7 @@
             settings: "Setup"
           };
 
-    return [
+    const links: HudConfigLink[] = [
       {
         id: "stream-on",
         label: labels.streamOn,
@@ -1044,6 +1066,17 @@
         active: isSettingsOpen
       }
     ];
+
+    if (devkitEnabled) {
+      links.push({
+        id: "devkit",
+        label: "DevKit",
+        tone: "cyan",
+        active: isDevKitConfigOpen
+      });
+    }
+
+    return links;
   }
 
   async function ensureDefaultWindowSize(): Promise<void> {
@@ -1097,6 +1130,71 @@
     const context = canvas.getContext("webgl2");
   }
 
+  async function checkForAppUpdate(): Promise<void> {
+    if (!isTauriRuntime()) {
+      return;
+    }
+
+    const updateDismissKey = "je-skin-update-dismissed-version";
+
+    try {
+      const update = await check();
+      if (!update) {
+        return;
+      }
+
+      if (window.sessionStorage.getItem(updateDismissKey) === update.version) {
+        return;
+      }
+
+      const message =
+        locale === "zh-CN"
+          ? `发现新版本 ${update.version}，是否现在下载并安装？`
+          : `Version ${update.version} is available. Download and install now?`;
+
+      pendingUpdate = update;
+      updateNoticeVisible = true;
+      updateInstallBusy = false;
+      connectionNotice = message;
+      connectionNoticeTone = "info";
+    } catch (error) {
+      console.error("App update check failed:", error);
+    }
+  }
+
+  async function handleUpdateConfirm(): Promise<void> {
+    if (!pendingUpdate || updateInstallBusy) {
+      return;
+    }
+
+    updateInstallBusy = true;
+    connectionNotice = locale === "zh-CN" ? "正在下载并安装更新..." : "Downloading and installing update...";
+    connectionNoticeTone = "info";
+
+    try {
+      await pendingUpdate.downloadAndInstall();
+      await relaunch();
+    } catch (error) {
+      updateInstallBusy = false;
+      updateNoticeVisible = false;
+      pendingUpdate = null;
+      connectionNotice = locale === "zh-CN" ? "更新安装失败，请稍后重试。" : "Update failed. Please try again later.";
+      connectionNoticeTone = "warn";
+      console.error("App update install failed:", error);
+    }
+  }
+
+  function handleUpdateCancel(): void {
+    if (pendingUpdate) {
+      window.sessionStorage.setItem("je-skin-update-dismissed-version", pendingUpdate.version);
+    }
+
+    pendingUpdate = null;
+    updateNoticeVisible = false;
+    updateInstallBusy = false;
+    connectionNotice = "";
+  }
+
   function handleLocaleChange(event: CustomEvent<LocaleCode>): void {
     locale = event.detail;
   }
@@ -1318,6 +1416,57 @@
         ? await invoke<SerialExportResult>("serial_export_csv_to_path", { filePath })
         : await invoke<SerialExportResult>("serial_export_csv");
 
+      if (devkitEnabled && devkitRunning && devkitFilterLift) {
+        try {
+          const processResult = await invoke<{
+            ok: boolean;
+            outputPath: string;
+            groupsUsed: number;
+            meanValue: number;
+            threshold: number;
+            rowsTotal: number;
+            rowsKept: number;
+            message: string;
+          }>("devkit_process_export", {
+            csvPath: result.path,
+            saveAsXlsx: devkitSaveXlsx
+          });
+
+          if (processResult.ok) {
+            devkitLastResult = {
+              outputPath: processResult.outputPath,
+              groupsUsed: processResult.groupsUsed,
+              meanValue: processResult.meanValue,
+              threshold: processResult.threshold,
+              rowsTotal: processResult.rowsTotal,
+              rowsKept: processResult.rowsKept
+            };
+
+            connectionNotice =
+              locale === "zh-CN"
+                ? `CSV 已导出并完成 DevKit 处理（${result.frameCount} 帧）：${processResult.outputPath}`
+                : `CSV exported and processed by DevKit (${result.frameCount} frames): ${processResult.outputPath}`;
+            connectionNoticeTone = "ok";
+            return true;
+          }
+
+          connectionNotice =
+            locale === "zh-CN"
+              ? `CSV 已导出，但 DevKit 处理失败：${processResult.message}`
+              : `CSV exported, but DevKit processing failed: ${processResult.message}`;
+          connectionNoticeTone = "warn";
+          return true;
+        } catch (error) {
+          connectionNotice =
+            locale === "zh-CN"
+              ? "CSV 已导出，但 DevKit 后处理调用失败。"
+              : "CSV exported, but DevKit post-processing failed.";
+          connectionNoticeTone = "warn";
+          console.error("DevKit export post-process failed:", error);
+          return true;
+        }
+      }
+
       connectionNotice =
         locale === "zh-CN"
           ? `CSV 导出成功（${result.frameCount} 帧）：${result.path}`
@@ -1477,17 +1626,27 @@
     if (event.detail === "precision-test") {
       isPrecisionTestOpen = !isPrecisionTestOpen;
       isConfigPanelOpen = false;
+      isDevKitConfigOpen = false;
       return;
     }
 
     if (event.detail === "settings") {
       isPrecisionTestOpen = false;
       isConfigPanelOpen = !isConfigPanelOpen;
+      isDevKitConfigOpen = false;
+      return;
+    }
+
+    if (event.detail === "devkit") {
+      isPrecisionTestOpen = false;
+      isConfigPanelOpen = false;
+      isDevKitConfigOpen = !isDevKitConfigOpen;
       return;
     }
 
     isPrecisionTestOpen = false;
     isConfigPanelOpen = false;
+    isDevKitConfigOpen = false;
     activeConfigLinkId = event.detail;
     console.info("[hud] config link clicked:", event.detail);
   }
@@ -1511,6 +1670,55 @@
     }
   }
 
+  // ── DevKit Functions ────────────────────────────────────────────
+
+  async function pollDevKitStatus(): Promise<void> {
+    if (!isTauriRuntime()) return;
+    try {
+      const status = await invoke<{
+        enabled: boolean;
+        running: boolean;
+        port: number;
+        framesSent: number;
+        config: { filterLiftEnabled: boolean; saveAsXlsx: boolean };
+      }>("devkit_status");
+      devkitEnabled = status.enabled;
+      devkitRunning = status.running;
+      devkitPort = status.port;
+      devkitFramesSent = status.framesSent;
+      devkitFilterLift = status.config.filterLiftEnabled;
+      devkitSaveXlsx = status.config.saveAsXlsx;
+    } catch {
+      devkitEnabled = false;
+      devkitRunning = false;
+      isDevKitConfigOpen = false;
+    }
+  }
+
+  async function handleDevKitToggleFilterLift(): Promise<void> {
+    if (!isTauriRuntime()) return;
+    try {
+      const newConfig = { filterLiftEnabled: !devkitFilterLift, saveAsXlsx: devkitSaveXlsx };
+      const result = await invoke<{ filterLiftEnabled: boolean; saveAsXlsx: boolean }>("devkit_set_config", { config: newConfig });
+      devkitFilterLift = result.filterLiftEnabled;
+      devkitSaveXlsx = result.saveAsXlsx;
+    } catch (error) {
+      console.error("DevKit config update failed:", error);
+    }
+  }
+
+  async function handleDevKitToggleXlsx(): Promise<void> {
+    if (!isTauriRuntime()) return;
+    try {
+      const newConfig = { filterLiftEnabled: devkitFilterLift, saveAsXlsx: !devkitSaveXlsx };
+      const result = await invoke<{ filterLiftEnabled: boolean; saveAsXlsx: boolean }>("devkit_set_config", { config: newConfig });
+      devkitFilterLift = result.filterLiftEnabled;
+      devkitSaveXlsx = result.saveAsXlsx;
+    } catch (error) {
+      console.error("DevKit config update failed:", error);
+    }
+  }
+
   function handleMatrixDisplayToggle(event: CustomEvent<boolean>): void {
     matrixDisplayMode = event.detail ? "dots" : "numeric";
   }
@@ -1526,6 +1734,9 @@
 
     if (isTauriRuntime()) {
       void refreshSerialPorts();
+      void checkForAppUpdate();
+      void pollDevKitStatus();
+      devkitStatusTimer = window.setInterval(() => void pollDevKitStatus(), 3000);
       void startTauriHudStream(applyPacket)
         .then((unlisten) => {
           if (disposed) {
@@ -1547,6 +1758,10 @@
       pauseReplayPlayback();
       stopMockFeed?.();
       unlistenHudStream?.();
+      if (devkitStatusTimer != null) {
+        window.clearInterval(devkitStatusTimer);
+        devkitStatusTimer = null;
+      }
     };
   });
 </script>
@@ -1591,6 +1806,10 @@
       importActionLabel={uiCopy.importActionLabel}
       {connectionNotice}
       {connectionNoticeTone}
+      noticeConfirmLabel={locale === "zh-CN" ? "确定" : "Confirm"}
+      noticeCancelLabel={locale === "zh-CN" ? "取消" : "Cancel"}
+      noticeShowActions={updateNoticeVisible}
+      noticeActionBusy={updateInstallBusy}
       {configLinks}
       {isRefreshingPorts}
       {isExporting}
@@ -1606,7 +1825,12 @@
       on:serialconnect={handleSerialConnect}
       on:serialexport={handleSerialExportRequest}
       on:csvimport={handleReplayImportRequest}
-      on:noticeclear={() => (connectionNotice = "")}
+      on:noticeclear={() => {
+        connectionNotice = "";
+        updateNoticeVisible = false;
+      }}
+      on:noticeconfirm={handleUpdateConfirm}
+      on:noticecancel={handleUpdateCancel}
     />
 
     <CenterStage
@@ -1693,6 +1917,25 @@
     on:navigate={handleFileExplorerNavigate}
     on:confirm={handleFileExplorerConfirm}
   />
+
+  {#if isDevKitConfigOpen && devkitEnabled}
+    <div class="devkit-overlay" role="dialog" aria-label="DevKit Config">
+      <div class="devkit-float">
+        <DevKitConfigPanel
+          running={devkitRunning}
+          port={devkitPort}
+          framesSent={devkitFramesSent}
+          filterLiftEnabled={devkitFilterLift}
+          saveAsXlsx={devkitSaveXlsx}
+          locale={locale}
+          lastProcessResult={devkitLastResult}
+          on:close={() => (isDevKitConfigOpen = false)}
+          on:togglefilterlift={handleDevKitToggleFilterLift}
+          on:togglexlsx={handleDevKitToggleXlsx}
+        />
+      </div>
+    </div>
+  {/if}
 </main>
 
 <style>
@@ -1871,4 +2114,20 @@
       grid-template-columns: 1fr;
     }
   }
+
+  .devkit-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(6px);
+  }
+
+  .devkit-float {
+    position: relative;
+    z-index: 1;
+  }
 </style>