@linxin666/dsh-remote-web-ui 0.1.20 → 0.2.1

package/src/client/PluginSettingsCard.tsx

@@ -8,7 +8,7 @@
  * ui-plugin-config PluginCard in a self-contained slice.
  */
 
-import { useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'
 
@@ -56,6 +56,12 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
    * already provides the selection.
    */
   alwaysOpen?: boolean
+  /**
+   * Hide the save/discard footer: cards whose body applies its own changes
+   * immediately (an embedded external settings section) have no staged
+   * edits, so the footer would sit there permanently disabled.
+   */
+  hideFooter?: boolean
   /** The plugin's controls. */
   children: ReactNode
 }
@@ -140,6 +146,9 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
             {props.children}
+            {props.hideFooter === true
+              ? null
+              : (
             <div className={css.footer}>
               {state.failed
                 ? (
@@ -165,6 +174,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
                 {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
               </button>
             </div>
+              )}
           </div>
         )
         : null}
@@ -245,6 +255,210 @@ export function ValueField(props: FieldProps & {
   )
 }
 
+const NON_SKIN_BODY_MARKERS = new Set(['dshSkinCenter', 'dshSidebarCollapsed'])
+// 检测使用使用皮肤，用了皮肤退回原生select样式，防止样式冲突。默认外观下使用优化后的select样式。
+function isSkinActive(): boolean {
+  const datasetList = Object.keys(document.body.dataset)
+  const isActive = datasetList.some(key => key.startsWith('dsh') && !NON_SKIN_BODY_MARKERS.has(key))
+  return isActive
+}
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+const SELECT_CLOSE_MS = 100
+
+/**
+ * The shared dual-mode select control. While an appearance skin is active it
+ * renders the legacy native `<select>` untouched, so element-level skin
+ * selectors keep working; under the default appearance it renders a
+ * self-drawn `role="listbox"` popup whose open/close is transition-animated.
+ * Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+ * editors (the side-card prefs) bind it directly through onEdit.
+ * 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+ */
+export function SelectField(props: {
+  id: string
+  options: ReadonlyArray<SelectOption>
+  value: string
+  disabled: boolean
+  invalid: boolean
+  onEdit: (text: string) => void
+}) {
+  const { id, options, value } = props
+  const [open, setOpen] = useState(false)
+  const [closing, setClosing] = useState(false)
+  const [phase, setPhase] = useState<'initial' | 'open'>('initial')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const currentIndex = () => {
+    const index = options.findIndex(option => option.value === value)
+    return index >= 0 ? index : 0
+  }
+
+  const close = useCallback(() => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setClosing(true)
+    closeTimer.current = setTimeout(() => {
+      setClosing(false)
+      setOpen(false)
+    }, SELECT_CLOSE_MS)
+  }, [])
+
+  const openPopup = () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setActiveIndex(currentIndex())
+    setPhase('initial')
+    setClosing(false)
+    setOpen(true)
+  }
+
+  const commit = (index: number) => {
+    const option = options[index]
+    if (option) props.onEdit(option.value)
+    close()
+  }
+
+  const onTriggerClick = () => {
+    if (props.disabled) return
+    if (open && !closing) close()
+    else openPopup()
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (props.disabled) return
+    const count = options.length
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (!open) {
+          openPopup()
+        } else if (!closing) {
+          if (event.key === 'ArrowDown') setActiveIndex(index => (index + 1) % count)
+          else if (event.key === 'ArrowUp') setActiveIndex(index => (index - 1 + count) % count)
+          else commit(activeIndex)
+        }
+        break
+      case 'Escape':
+        if (open) {
+          event.preventDefault()
+          event.stopPropagation()
+          close()
+        }
+        break
+      case 'Tab':
+        if (open) close()
+        break
+    }
+  }
+
+  useEffect(() => () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+  }, [])
+  useLayoutEffect(() => {
+    if (open && !closing && phase === 'initial') {
+      void popupRef.current?.offsetHeight
+      setPhase('open')
+    }
+  }, [open, closing, phase])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && !wrapRef.current?.contains(target)) close()
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open, close])
+
+  useEffect(() => {
+    if (props.disabled && open) close()
+  }, [props.disabled, open, close])
+
+  // 使用了皮肤则退回原生select样式防止样式冲突。
+  if (isSkinActive()) {
+    return (
+      <select
+        id={id}
+        className={css.select}
+        value={value}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    )
+  }
+
+  const label = options.find(option => option.value === value)?.label ?? ''
+  const popupClass = closing
+    ? `${css.selectPopup} ${css.selectPopupClose}`
+    : phase === 'open'
+      ? `${css.selectPopup} ${css.selectPopupOpen}`
+      : css.selectPopup
+  return (
+    <div className={css.selectWrap} ref={wrapRef}>
+      <button
+        type="button"
+        id={id}
+        className={`${css.select} ${css.selectButton}`}
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-activedescendant={open ? `${id}-o${activeIndex}` : undefined}
+        aria-invalid={props.invalid || undefined}
+        onClick={onTriggerClick}
+        onKeyDown={onKeyDown}
+      >
+        <span className={css.selectLabel}>{label}</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.selectChevron} ${css.selectChevronOpen}` : css.selectChevron}
+          aria-hidden="true"
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      {open
+        ? (
+          <div className={popupClass} role="listbox" ref={popupRef}>
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                id={`${id}-o${index}`}
+                role="option"
+                aria-selected={option.value === value}
+                className={`${css.selectOption}${option.value === value ? ` ${css.selectOptionSelected}` : ''}${index === activeIndex && !closing ? ` ${css.selectOptionActive}` : ''}`}
+                onClick={() => { commit(index) }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )
+        : null}
+    </div>
+  )
+}
+
 /** A staged boolean field: 继承 / 开 / 关. */
 export function BooleanField(props: FieldProps & {
   /** Copy for the inherit option. */
@@ -274,17 +488,18 @@ export function BooleanField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[
+          { value: '', label: props.inheritLabel },
+          { value: 'true', label: props.onLabel },
+          { value: 'false', label: props.offLabel },
+        ]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        <option value="true">{props.onLabel}</option>
-        <option value="false">{props.offLabel}</option>
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
@@ -317,18 +532,14 @@ export function ChoiceField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[{ value: '', label: props.inheritLabel }, ...props.choices]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        {props.choices.map(choice => (
-          <option key={choice.value} value={choice.value}>{choice.label}</option>
-        ))}
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={props.invalid ? css.invalid : css.hint}>
         {props.invalid ? props.invalidLabel : props.hint}
       </p>

package/src/client/RemoteEntry.tsx

@@ -57,6 +57,10 @@ export function RemoteEntry({ wide, useWorkspaces, t }: RemoteEntryProps) {
   useEffect(() => { stateRef.current = state }, [state])
   const [copied, setCopied] = useState(false)
   const eventSource = useRef<EventSource | undefined>(undefined)
+  // Generation counter for the open flow: closing (or re-opening) the panel
+  // bumps it, so an in-flight issue() that resolves after a close does not
+  // spawn a stray EventSource.
+  const openSeq = useRef(0)
 
   // The current workspace (the recent-workspace projection the shell's New
   // Session flow targets) — the deep-link target for the phone.
@@ -104,8 +108,13 @@ export function RemoteEntry({ wide, useWorkspaces, t }: RemoteEntryProps) {
   }, [workspaceId])
 
   const openPanel = useCallback(async (): Promise<void> => {
+    const seq = ++openSeq.current
     setOpen(true)
     const next = await mint()
+    // A close (or re-open) during the await invalidates this issue: skip the
+    // state write and the stream so a panel closed mid-mint neither leaks an
+    // EventSource nor resurrects a stale QR.
+    if (seq !== openSeq.current) return
     setState(next)
     // Live status: the desktop panel mirrors the pairing service state. The
     // stream makes sense in the ready state and on the lan-required banner —
@@ -143,6 +152,7 @@ export function RemoteEntry({ wide, useWorkspaces, t }: RemoteEntryProps) {
   }, [mint])
 
   const closePanel = useCallback(() => {
+    openSeq.current += 1
     closeEventSource()
     setOpen(false)
   }, [closeEventSource])
@@ -222,13 +232,13 @@ export function RemoteEntry({ wide, useWorkspaces, t }: RemoteEntryProps) {
   )
 }
 
-/** The trigger: an icon button matching the settings rail/row geometry. */
+/** The trigger: an icon-only control with a persistent accessible label. */
 function TooltipAnchor({ wide, label, onClick }: { wide: boolean; label: string; onClick: () => void }) {
   return (
     <button
       type="button"
       className={css.trigger}
-      data-wide={wide ? undefined : 'rail'}
+      data-wide={wide ? 'wide' : 'rail'}
       aria-label={label}
       title={label}
       onClick={onClick}

package/src/client/RemoteSettingsCard.tsx

@@ -1,7 +1,7 @@
 /**
  * The remote-control settings card: pairing security and device limits.
- * Registers into the `settings.plugin.item` slot the plugin-configuration
- * section renders, bound to the `remote-web-ui` settings namespace.
+ * Registers into the `web-ui.plugin.item` child slot the Web UI plugin group
+ * renders, bound to the `remote-web-ui` settings namespace.
  */
 
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
@@ -140,6 +140,7 @@ export function RemoteSettingsCard(props: RemoteSettingsCardProps) {
       t={t}
       titleKey="settings.title"
       descriptionKey="settings.description"
+      defaultOpen={false}
       state={state}
       onSave={props.save}
       onDiscard={props.discard}

package/src/client/UpdateEntry.tsx

@@ -29,14 +29,31 @@ export interface UpdateEntryProps {
 export function UpdateEntry({ wide, t }: UpdateEntryProps) {
   const [open, setOpen] = useState(false)
   const [view, setView] = useState<UpdateView>({ kind: "checking" })
+  const [updateAvailable, setUpdateAvailable] = useState(false)
   const runToken = useRef(0)
+  const availabilityToken = useRef(0)
+  const mounted = useRef(false)
+
+  const probeAvailability = useCallback(async (): Promise<void> => {
+    const token = ++availabilityToken.current
+    try {
+      const status = await fetchUpdateStatus()
+      if (token === availabilityToken.current) {
+        setUpdateAvailable(status.mode === "npm" && status.outdated)
+      }
+    } catch {
+      if (token === availabilityToken.current) setUpdateAvailable(false)
+    }
+  }, [])
 
   const check = useCallback(async (): Promise<void> => {
+    const availabilityCheck = ++availabilityToken.current
     setView({ kind: "checking" })
     let status: UpdateStatus
     try {
       status = await fetchUpdateStatus()
     } catch (error) {
+      if (availabilityCheck === availabilityToken.current) setUpdateAvailable(false)
       // HTTP 404: the update route is not mounted — the host process runs an
       // older plugin build (client refreshed, host did not). Restarting dsh
       // web loads the new plugin; a plain network failure gets the generic
@@ -48,6 +65,9 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
       setView({ kind: "error", message: t("update.offline"), detail: t("update.offlineDetail") })
       return
     }
+    if (availabilityCheck === availabilityToken.current) {
+      setUpdateAvailable(status.mode === "npm" && status.outdated)
+    }
     if (status.error === "registry-unreachable") {
       setView({ kind: "result", status })
       return
@@ -60,6 +80,7 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
     const token = ++runToken.current
     try {
       const result = await runUpdate()
+      if (result.ok && mounted.current) setUpdateAvailable(false)
       if (token !== runToken.current) return
       setView({ kind: "done", result })
     } catch {
@@ -78,8 +99,18 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
     setOpen(false)
   }, [])
 
-  // Unmount safety: an in-flight update must not land on a dead component.
-  useEffect(() => () => { runToken.current++ }, [])
+  // Check once after mount without opening the panel or starting an update.
+  useEffect(() => {
+    mounted.current = true
+    void probeAvailability()
+    return () => {
+      mounted.current = false
+      runToken.current++
+      availabilityToken.current++
+    }
+  }, [probeAvailability])
+
+  const updateLabel = updateAvailable ? t("update.availableLabel") : t("update.label")
 
   return (
     <>
@@ -87,8 +118,9 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
         type="button"
         className={css.trigger}
         data-wide={wide ? undefined : "rail"}
-        aria-label={t("update.label")}
-        title={t("update.label")}
+        data-update-available={updateAvailable ? "true" : undefined}
+        aria-label={updateLabel}
+        title={updateLabel}
         onClick={openPanel}
       >
         <IconDownloadOutline16 size={wide ? 16 : 18} />

package/src/client/UpdatePanel.tsx

@@ -63,6 +63,7 @@ export function UpdatePanel({ t, view, onClose, onRecheck }: UpdatePanelProps) {
           <p className={css.updateStatus}>
             {t("update.updating", { name: anchorName(status) ?? "", version: anchorLatest(status) ?? "" })}
           </p>
+          <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
           <PackageList status={status} />
         </div>
       )}
@@ -136,6 +137,7 @@ function ResultBody({ t, status }: { t: TranslateNS<"remote">; status: UpdateSta
         <p className={css.updateDetail}>
           {anchor !== undefined ? t("update.foundDetail", { name: anchor, version: latest ?? "" }) : ""}
         </p>
+        <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
       </div>
     )
   }

package/src/client/deep-link.ts

@@ -95,7 +95,7 @@ async function runAccept(token: string, page: PageSurface): Promise<void> {
     // mobile surface can open the intended workspace instead of losing the
     // QR context at this navigation boundary.
     if (isMobileSurface()) {
-      url.pathname = '/m'
+      url.pathname = '/m/'
       page.navigate(`${url.pathname}${url.search}${url.hash}`)
     } else {
       page.reload()

package/src/client/locales.ts

@@ -74,6 +74,7 @@ export const zh = {
   'settings.invalidNumber': '请输入数字，留空则使用默认值。',
   // 更新面板（侧边栏更新按钮）。
   'update.label': '检查更新',
+  'update.availableLabel': '发现新版本，检查更新',
   'update.title': '检查更新',
   'update.checking': '正在检查远程仓库中的新版本…',
   'update.upToDate': '当前已是最新版本',
@@ -81,6 +82,7 @@ export const zh = {
   'update.found': '发现新版本',
   'update.foundDetail': '{name} 有新版本 v{version}，正在自动更新…',
   'update.updating': '正在更新 {name} 至 v{version}，可能需要 1-2 分钟…',
+  'update.cooldownNotice': '本次更新由你主动触发，将跳过 pnpm 的 24 小时发布冷却期（供应链保护）直接安装所选版本。',
   'update.updatingTitle': '正在自动更新…',
   'update.done': '更新完成',
   'update.doneDetail': '所有组件已更新到最新版本。',
@@ -187,6 +189,7 @@ export const en = {
   'settings.invalidNumber': 'Enter a number, or leave blank to use the default.',
   // Update panel (the sidebar update trigger).
   'update.label': 'Check for updates',
+  'update.availableLabel': 'New version available. Check for updates',
   'update.title': 'Check for updates',
   'update.checking': 'Checking the remote repository for newer releases…',
   'update.upToDate': 'Everything is up to date',
@@ -194,6 +197,7 @@ export const en = {
   'update.found': 'A new version is available',
   'update.foundDetail': '{name} has a newer release v{version}; updating automatically…',
   'update.updating': 'Updating {name} to v{version}; this may take 1-2 minutes…',
+  'update.cooldownNotice': 'This user-initiated update bypasses pnpm\'s 24-hour release cooldown (supply-chain protection) and installs the selected version immediately.',
   'update.updatingTitle': 'Updating automatically…',
   'update.done': 'Update complete',
   'update.doneDetail': 'All components are up to date.',

package/src/client/remote.module.css

@@ -21,6 +21,7 @@
 /* Trigger: settings row height beside the trigger row (wide), or the 36px
    rail circle; the seat's owner (ui-sidebar) lays out the geometry. */
 .trigger {
+  position: relative;
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -37,6 +38,30 @@
   transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
 }
 
+.trigger[data-update-available]::after {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 8px;
+  height: 8px;
+  box-sizing: border-box;
+  border: 2px solid var(--dsw-alias-bg-layer-1);
+  border-radius: 50%;
+  background: var(--dsw-alias-brand-primary);
+  content: '';
+  pointer-events: none;
+}
+
+.trigger[data-wide='wide'] {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  width: auto;
+  min-width: 0;
+  border-radius: 8px;
+  gap: 8px;
+  padding: 0 10px;
+}
+
 .trigger:hover:not(:disabled) {
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);
@@ -429,6 +454,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
 }
 
 .entryRow[data-rail='rail'] {

package/src/client/settings-card.module.css

@@ -290,6 +290,92 @@
   border-color: var(--dsw-alias-label-error);
 }
 
+.selectWrap {
+  position: relative;
+}
+
+.selectButton {
+  appearance: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  display: flex;
+}
+
+.selectLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectChevron {
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
+}
+
+.selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+.selectPopup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  flex-direction: column;
+  max-height: 240px;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  box-shadow: 0 8px 24px var(--dsw-alias-bg-mask-2);
+  padding: 4px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.1s ease, transform 0.1s ease;
+  display: flex;
+}
+
+.selectPopupOpen {
+  opacity: 1;
+  transform: none;
+}
+
+.selectPopupClose {
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+
+.selectOption {
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selectOption:hover,
+.selectOptionActive {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.selectOptionSelected {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 500;
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 10%, transparent);
+}
+
 .invalid {
   color: var(--dsw-alias-label-error);
   margin: 0;
@@ -310,7 +396,10 @@
   .chevron,
   .chevronOpen,
   .discard,
-  .save {
+  .save,
+  .selectChevron,
+  .selectChevronOpen,
+  .selectPopup {
     transition: none;
   }
 }

package/src/gate.ts

@@ -89,8 +89,22 @@ export function makeGateListener(
     if (!active) return false
     const require = typeof requirePairingForLan === 'function' ? requirePairingForLan() : requirePairingForLan
     if (!require) return next()
-    const deviceId = readCookie(request.headers.cookie, service.config.cookieName)
-    if (deviceId === undefined) return false
-    return service.touchDevice(deviceId) ? next() : false
+    // The paired-device cookie is a full host-API credential: it passes this
+    // gate for the whole ApiProxy surface, not just the /m/api allowlist.
+    return isPairedDeviceRequest(service, request) ? next() : false
   }
 }
+
+/**
+ * Whether a request carries a live, non-revoked paired-device cookie for
+ * this service. Sibling host routes outside /api (aionui-panel, etc.) use
+ * the same check via the remoteWebUiPairing service.
+ * @param service - the pairing service that owns the device table.
+ * @param request - the incoming HTTP request.
+ * @returns true when the cookie names a live session (and lastSeenAt was refreshed).
+ */
+export function isPairedDeviceRequest(service: PairingService, request: IncomingMessage): boolean {
+  const deviceId = readCookie(request.headers.cookie, service.config.cookieName)
+  if (deviceId === undefined) return false
+  return service.touchDevice(deviceId)
+}