@dimina-kit/inspect 0.3.0-dev.20260711141929

package/src/panel-view.tsx

@@ -0,0 +1,355 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import type { ElementInspection, WxmlNode } from './types.js'
+
+interface WxmlPanelProps {
+  tree: WxmlNode | null
+  onInspectElement?: (sid: string) => Promise<ElementInspection | null>
+  onClearInspection?: () => Promise<void>
+  /** Whether the mini-program's runtime session is `running` — distinguishes "小程序未运行" from the normal "waiting for the tree" empty state below. Defaults to true so callers that don't track runtime status keep the plain waiting text. */
+  isRuntimeRunning?: boolean
+}
+
+interface WxmlTreeNodeProps {
+  node: WxmlNode
+  depth: number
+  inspectedSid?: string | null
+  onInspect?: (node: WxmlNode) => void
+}
+
+/**
+ * 默认是否展开：对齐微信开发者工具的 wxml 面板。
+ * - `#shadow-root` 永远默认展开（组件边界标记，展开后才能看到内部结构）
+ * - 路径式 tag（含 `/`）= 页面或自定义组件，默认展开（让用户一眼看清组件层级）
+ * - 普通 DOM 节点（view/text 等）默认折叠，需要用户手动点开
+ */
+function isDefaultExpanded(node: WxmlNode): boolean {
+  if (node.tagName === '#shadow-root') return true
+  if (node.tagName.includes('/')) return true
+  return false
+}
+
+/** Renders a `[key, value]` attr list as `{' '}key="value"` pairs. */
+function AttrList({ entries }: { entries: Array<[string, string]> }) {
+  return (
+    <>
+      {entries.map(([k, v]) => (
+        <span key={k}>
+          {' '}
+          <span className="text-code-blue">{k}</span>
+          <span className="text-text-dim">=</span>
+          <span className="text-code-orange">&quot;{v}&quot;</span>
+        </span>
+      ))}
+    </>
+  )
+}
+
+// Text node — render as plain text.
+function WxmlTextNode({ node, depth }: { node: WxmlNode, depth: number }) {
+  return (
+    <div
+      className="py-px leading-[18px] hover:bg-surface-2"
+      style={{ paddingLeft: depth * 16 }}
+    >
+      <span className="w-3 inline-block" />
+      <span className="text-text">{node.text}</span>
+    </div>
+  )
+}
+
+// Fragment — transparent root wrapper; render children directly without extra depth/tag.
+function WxmlFragmentNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
+  return (
+    <>
+      {(node.children ?? []).map((child, i) => (
+        <WxmlTreeNode
+          key={i}
+          node={child}
+          depth={depth}
+          inspectedSid={inspectedSid}
+          onInspect={onInspect}
+        />
+      ))}
+    </>
+  )
+}
+
+// Shadow root — synthetic boundary for custom component internals.
+// Clickable to collapse like WeChat DevTools; default expanded; no closing tag.
+function WxmlShadowRootNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
+  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node))
+  const indent = depth * 16
+  const hasShadowChildren = (node.children ?? []).length > 0
+  return (
+    <div>
+      <div
+        className="py-px leading-[18px] hover:bg-surface-2 cursor-pointer"
+        style={{ paddingLeft: indent }}
+        onClick={() => hasShadowChildren && setExpanded(!expanded)}
+      >
+        <span className="text-text-dim w-3 shrink-0 inline-block text-center select-none">
+          {hasShadowChildren ? (expanded ? '▾' : '▸') : ' '}
+        </span>
+        <span className="text-text-dim italic">#shadow-root</span>
+      </div>
+      {expanded && node.children.map((child, i) => (
+        <WxmlTreeNode
+          key={i}
+          node={child}
+          depth={depth + 1}
+          inspectedSid={inspectedSid}
+          onInspect={onInspect}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface WxmlRowProps {
+  node: WxmlNode
+  indent: number
+  attrEntries: Array<[string, string]>
+  isInspected: boolean
+  onMouseEnter: () => void
+}
+
+// Single text child — render inline: <tag>text</tag>
+function WxmlInlineTextRow({
+  node,
+  indent,
+  attrEntries,
+  isInspected,
+  onMouseEnter,
+  inlineText,
+}: WxmlRowProps & { inlineText: string }) {
+  const rowClassName = `py-px leading-[18px] hover:bg-surface-2${isInspected ? ' bg-surface-2' : ''}`
+  return (
+    <div
+      className={rowClassName}
+      style={{ paddingLeft: indent }}
+      onMouseEnter={onMouseEnter}
+      data-wxml-sid={node.sid}
+    >
+      <span className="w-3 inline-block" />
+      <span className="text-code-keyword">{'<'}{node.tagName}</span>
+      <AttrList entries={attrEntries} />
+      <span className="text-code-keyword">{'>'}</span>
+      <span className="text-text">{inlineText}</span>
+      <span className="text-code-keyword">{'</'}{node.tagName}{'>'}</span>
+    </div>
+  )
+}
+
+interface WxmlBlockRowProps extends WxmlRowProps {
+  depth: number
+  hasChildren: boolean
+  expanded: boolean
+  inspectedSid?: string | null
+  onInspect?: (node: WxmlNode) => void
+  onToggle: () => void
+}
+
+// Full open/close-tag row, with children rendered underneath when expanded.
+function WxmlBlockRow({
+  node,
+  depth,
+  indent,
+  attrEntries,
+  hasChildren,
+  expanded,
+  isInspected,
+  inspectedSid,
+  onInspect,
+  onToggle,
+  onMouseEnter,
+}: WxmlBlockRowProps) {
+  return (
+    <div>
+      <div
+        className={`flex items-start hover:bg-surface-2 py-px leading-[18px]${hasChildren ? ' cursor-pointer' : ''}${isInspected ? ' bg-surface-2' : ''}`}
+        style={{ paddingLeft: indent }}
+        onMouseEnter={onMouseEnter}
+        onClick={() => {
+          if (hasChildren) onToggle()
+        }}
+        data-wxml-sid={node.sid}
+      >
+        <span className="text-text-dim w-3 shrink-0 text-center select-none">
+          {hasChildren ? (expanded ? '▾' : '▸') : ' '}
+        </span>
+        <span>
+          <span className="text-code-keyword">{'<'}{node.tagName}</span>
+          <AttrList entries={attrEntries} />
+          <span className="text-code-keyword">{hasChildren ? '>' : ' />'}</span>
+        </span>
+      </div>
+      {expanded && hasChildren && (
+        <>
+          {node.children.map((child, i) => (
+            <WxmlTreeNode
+              key={i}
+              node={child}
+              depth={depth + 1}
+              inspectedSid={inspectedSid}
+              onInspect={onInspect}
+            />
+          ))}
+          <div style={{ paddingLeft: indent }} className="py-px leading-[18px]">
+            <span className="w-3 inline-block" />
+            <span className="text-code-keyword">{'</'}{node.tagName}{'>'}</span>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+// Ordinary element node — decides between the inline-text and block layouts.
+function WxmlElementNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
+  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node))
+  const indent = depth * 16
+  const isInspected = Boolean(node.sid && node.sid === inspectedSid)
+  const hasChildren = (node.children ?? []).length > 0
+  const attrEntries = Object.entries(node.attrs) as Array<[string, string]>
+  const inspect = () => {
+    if (node.sid) onInspect?.(node)
+  }
+
+  // Single text child — render inline: <tag>text</tag>
+  const inlineText = hasChildren && node.children.length === 1 && node.children[0]!.tagName === '#text'
+    ? node.children[0]!.text
+    : null
+
+  if (inlineText) {
+    return (
+      <WxmlInlineTextRow
+        node={node}
+        indent={indent}
+        attrEntries={attrEntries}
+        isInspected={isInspected}
+        onMouseEnter={inspect}
+        inlineText={inlineText}
+      />
+    )
+  }
+
+  return (
+    <WxmlBlockRow
+      node={node}
+      depth={depth}
+      indent={indent}
+      attrEntries={attrEntries}
+      hasChildren={hasChildren}
+      expanded={expanded}
+      isInspected={isInspected}
+      inspectedSid={inspectedSid}
+      onInspect={onInspect}
+      onToggle={() => setExpanded(!expanded)}
+      onMouseEnter={inspect}
+    />
+  )
+}
+
+function WxmlTreeNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
+  if (node.tagName === '#text') return <WxmlTextNode node={node} depth={depth} />
+  if (node.tagName === '#fragment') {
+    return <WxmlFragmentNode node={node} depth={depth} inspectedSid={inspectedSid} onInspect={onInspect} />
+  }
+  if (node.tagName === '#shadow-root') {
+    return <WxmlShadowRootNode node={node} depth={depth} inspectedSid={inspectedSid} onInspect={onInspect} />
+  }
+  return <WxmlElementNode node={node} depth={depth} inspectedSid={inspectedSid} onInspect={onInspect} />
+}
+
+function InspectionFooter({ inspection }: { inspection: ElementInspection | null }) {
+  if (!inspection) return null
+  const { rect, style } = inspection
+  const styleParts = [
+    style.display,
+    style.position !== 'static' ? style.position : null,
+    style.boxSizing,
+  ].filter(Boolean)
+  return (
+    <div className="border-t border-border-subtle bg-bg-panel px-2.5 py-1.5 font-mono text-[11px] text-text-dim shrink-0">
+      <span className="text-text">box</span>
+      {' '}
+      {Math.round(rect.width)} x {Math.round(rect.height)}
+      {' @ '}
+      {Math.round(rect.x)}, {Math.round(rect.y)}
+      <span className="mx-2 text-border-subtle">|</span>
+      {styleParts.join(' / ')}
+      <span className="mx-2 text-border-subtle">|</span>
+      font {style.fontSize}
+    </div>
+  )
+}
+
+export function WxmlPanel({
+  tree,
+  onInspectElement,
+  onClearInspection,
+  isRuntimeRunning = true,
+}: WxmlPanelProps) {
+  const [inspection, setInspection] = useState<ElementInspection | null>(null)
+  // 序号 + rAF 用于解决 hover 触发的两个独立问题：
+  // - reqSeqRef：防止 await 完成顺序与 hover 顺序不一致导致 footer 抖动；
+  //   每次发起请求自增，写入前比对，落后的响应直接丢弃。
+  // - rafRef：把 hover 触发的 IPC 合并到下一帧，连续扫过列表只会留最后一帧。
+  const reqSeqRef = useRef(0)
+  const rafRef = useRef<number | null>(null)
+
+  useEffect(() => () => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+  }, [])
+
+  const inspectNode = useCallback((node: WxmlNode) => {
+    if (!node.sid || !onInspectElement) return
+    const sid = node.sid
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null
+      const seq = ++reqSeqRef.current
+      onInspectElement(sid).then((next) => {
+        if (seq !== reqSeqRef.current) return
+        setInspection(next)
+      }).catch(() => {
+        if (seq !== reqSeqRef.current) return
+        setInspection(null)
+      })
+    })
+  }, [onInspectElement])
+
+  const clearInspection = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+    // 让所有 in-flight 响应被序号校验丢弃，避免它们在 clear 之后又把 inspection 写回来。
+    reqSeqRef.current++
+    setInspection(null)
+    void onClearInspection?.()
+  }, [onClearInspection])
+
+  if (!tree) {
+    return (
+      <div className="flex flex-col flex-1 overflow-hidden" data-testid="wxml-panel">
+        <div className="text-[12px] text-text-dim text-center px-4 py-6">
+          {isRuntimeRunning ? '等待小程序加载...' : '小程序未运行'}
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col flex-1 overflow-hidden" onMouseLeave={clearInspection} data-testid="wxml-panel">
+      <div className="flex-1 overflow-y-auto p-2 font-mono text-[12px]">
+        <WxmlTreeNode
+          node={tree}
+          depth={0}
+          inspectedSid={inspection?.sid ?? null}
+          onInspect={inspectNode}
+        />
+      </div>
+      <InspectionFooter inspection={inspection} />
+    </div>
+  )
+}

package/src/panel.tsx

@@ -0,0 +1,7 @@
+// Public React entry (`@dimina-kit/inspect/panel`): the pure views plus the
+// source-connected containers. Split into files so a pure view stays
+// importable without its data-wiring layer.
+export { WxmlPanel } from './panel-view.js'
+export { ConnectedWxmlPanel, type ConnectedWxmlPanelProps } from './connected-panel.js'
+export { StoragePanel, type StoragePanelProps } from './storage-panel-view.js'
+export { ConnectedStoragePanel, type ConnectedStoragePanelProps } from './connected-storage-panel.js'

package/src/sid-registry.ts

@@ -0,0 +1,45 @@
+// Stable-id registry for WXML nodes, shared by every extractor that walks a
+// render-layer document (host iframe extractors, injected guest inspectors,
+// browser preview bridges). It is dependency-free so injected bundles stay
+// small and don't drag in host-specific machinery.
+
+// 合成 sid 注册表：用 WeakMap 把元素 ↔ sid 双向绑定，避免在源 DOM 上写
+// `data-*` 属性（提取本应只读，且属性形式会污染用户的快照/选择器）。
+// elBySyntheticSid 为反向查找用 WeakRef，元素被 GC 后下次 lookup 自动清理。
+export const SYNTHETIC_SID_PREFIX = 'devtools-'
+const syntheticSidByEl = new WeakMap<HTMLElement, string>()
+const elBySyntheticSid = new Map<string, WeakRef<HTMLElement>>()
+let nextSyntheticSid = 1
+
+export function registerSyntheticSid(el: HTMLElement): string {
+  const existing = syntheticSidByEl.get(el)
+  if (existing) return existing
+  const synthetic = `${SYNTHETIC_SID_PREFIX}${nextSyntheticSid++}`
+  syntheticSidByEl.set(el, synthetic)
+  elBySyntheticSid.set(synthetic, new WeakRef(el))
+  return synthetic
+}
+
+export function findElementBySid(doc: Document, sid: string): HTMLElement | null {
+  if (sid.startsWith(SYNTHETIC_SID_PREFIX)) {
+    const ref = elBySyntheticSid.get(sid)
+    if (!ref) return null
+    const el = ref.deref()
+    if (!el || !el.isConnected) {
+      elBySyntheticSid.delete(sid)
+      return null
+    }
+    if (el.ownerDocument !== doc) return null
+    return el
+  }
+  return doc.querySelector(`[data-sid="${escapeForAttrSelector(sid)}"]`) as HTMLElement | null
+}
+
+// `CSS.escape` only exists in real browser realms (jsdom has no `window.CSS`).
+// Inside a double-quoted attribute selector, escaping backslashes and quotes
+// is sufficient, so fall back to that when the host lacks the API.
+function escapeForAttrSelector(value: string): string {
+  const impl = (globalThis as { CSS?: { escape?: (v: string) => string } }).CSS?.escape
+  if (impl) return impl(value)
+  return value.replace(/[\\"]/g, '\\$&')
+}

package/src/storage-panel-view.tsx

@@ -0,0 +1,252 @@
+// The pure Storage table view: items in, write callbacks out. No data
+// wiring lives here (seed/subscribe/visibility belong to
+// ConnectedStoragePanel); no host UI kit either — the couple of buttons are
+// plain elements styled with the same Tailwind utility tokens as the rest of
+// the panel, so any host that maps the CSS variables gets the native look.
+import React, { useEffect, useState } from 'react'
+import type { StorageItem, StorageWriteResult } from './storage-types.js'
+
+export interface StoragePanelProps {
+  items: StorageItem[]
+  onSet: (key: string, value: string) => Promise<StorageWriteResult>
+  onRemove: (key: string) => Promise<StorageWriteResult>
+  onClear: () => Promise<StorageWriteResult>
+  /** Origin-wide wipe across every appId. Hosts whose localStorage is shared
+   * with non-mini-program data (e.g. a browser workbench living on the same
+   * origin) must omit it; the「清空所有」button then never renders. */
+  onClearAll?: () => Promise<StorageWriteResult>
+  getPrefix: () => Promise<string>
+  /** Whether the mini-program's runtime session is running — distinguishes
+   * "小程序未运行" from a true empty-data vacuum below. Defaults to true so
+   * callers that don't track runtime status keep the plain empty-data text. */
+  isRuntimeRunning?: boolean
+}
+
+const BUTTON_CLASS
+  = 'inline-flex items-center justify-center gap-1.5 font-medium transition-colors '
+    + 'focus:outline-none disabled:opacity-35 disabled:cursor-not-allowed whitespace-nowrap shrink-0 '
+    + 'border border-border text-text-muted hover:text-text rounded h-5 px-2 text-[11px]'
+
+export function StoragePanel({
+  items,
+  onSet,
+  onRemove,
+  onClear,
+  onClearAll,
+  getPrefix,
+  isRuntimeRunning = true,
+}: StoragePanelProps) {
+  const [editing, setEditing] = useState<{ key: string, draft: string } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [prefix, setPrefix] = useState('')
+  const [addKey, setAddKey] = useState('')
+  const [addValue, setAddValue] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | undefined
+    // The panel can mount before the host has resolved the active appId, so
+    // `getPrefix()` initially returns '' and the key un-prefixing below would
+    // never engage. The prefix is empty only transiently during session
+    // warmup, so poll until it resolves non-empty (then stop). Once set it is
+    // stable for the session's lifetime.
+    const load = () => {
+      void getPrefix().then((p) => {
+        if (cancelled) return
+        if (p) { setPrefix(p); return }
+        timer = setTimeout(load, 300)
+      })
+    }
+    load()
+    return () => { cancelled = true; if (timer) clearTimeout(timer) }
+  }, [getPrefix])
+
+  async function withBusy<T extends StorageWriteResult>(op: () => Promise<T>): Promise<T | null> {
+    setBusy(true)
+    setError(null)
+    try {
+      const r = await op()
+      if (!r.ok) { setError(r.error); return null }
+      return r
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function startEdit(item: StorageItem) {
+    setEditing({ key: item.key, draft: item.value })
+  }
+
+  async function commitEdit() {
+    if (!editing) return
+    const { key, draft } = editing
+    setEditing(null)
+    await withBusy(() => onSet(key, draft))
+  }
+
+  async function handleRemove(key: string) {
+    await withBusy(() => onRemove(key))
+  }
+
+  async function handleClear() {
+    if (items.length === 0) return
+    await withBusy(() => onClear())
+  }
+
+  async function handleClearAll() {
+    if (!onClearAll) return
+    // Origin-wide wipe affects every appId's keys in the shared storage
+    // partition. Use `window.confirm` so the user has to opt in explicitly.
+    if (typeof window !== 'undefined' && !window.confirm('清空所有 appId 的 Storage 数据？该操作不可撤销。')) return
+    await withBusy(() => onClearAll())
+  }
+
+  async function handleAdd() {
+    const trimmedKey = addKey.trim()
+    if (!trimmedKey) { setError('key 不能为空'); return }
+    const fullKey = prefix + trimmedKey
+    const r = await withBusy(() => onSet(fullKey, addValue))
+    if (r) {
+      setAddKey('')
+      setAddValue('')
+    }
+  }
+
+  return (
+    <div className="flex flex-col overflow-hidden flex-1" data-testid="storage-panel">
+      <div className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-border-subtle shrink-0 bg-bg-panel">
+        <button
+          type="button"
+          onClick={() => void handleClear()}
+          disabled={busy || items.length === 0}
+          className={`${BUTTON_CLASS} hover:border-status-error hover:text-status-error`}
+          title="仅清空当前 appId 的 Storage"
+        >
+          清空
+        </button>
+        {onClearAll && (
+          <button
+            type="button"
+            onClick={() => void handleClearAll()}
+            disabled={busy}
+            className={`${BUTTON_CLASS} hover:border-status-error hover:text-status-error`}
+            title="清空所有 appId 的 Storage"
+          >
+            清空所有
+          </button>
+        )}
+        {error && (
+          <span className="ml-2 text-[11px] text-status-error truncate" title={error}>
+            {error}
+          </span>
+        )}
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <table className="w-full border-collapse text-[12px]">
+          <thead>
+            <tr>
+              <th className="text-left text-code-label font-normal px-2.5 py-1 border-b border-border-subtle text-[11px] sticky top-0 bg-bg-panel z-10 w-px pr-5">
+                Key
+              </th>
+              <th className="text-left text-code-label font-normal px-2.5 py-1 border-b border-border-subtle text-[11px] sticky top-0 bg-bg-panel z-10">
+                Value
+              </th>
+              <th className="w-px sticky top-0 bg-bg-panel z-10 border-b border-border-subtle" />
+            </tr>
+          </thead>
+          <tbody>
+            {items.length === 0
+              ? (
+                  <tr>
+                    <td colSpan={3} className="text-[12px] text-text-dim text-center px-4 py-6">
+                      {isRuntimeRunning ? '暂无 Storage 数据' : '小程序未运行'}
+                    </td>
+                  </tr>
+                )
+              : items.map((item) => {
+                  const isEditing = editing?.key === item.key
+                  // Display keys without the active appId namespace prefix
+                  // (`${appId}_`), the way Chrome's Local Storage panel shows
+                  // clean keys. The full key (used for every read/write below)
+                  // stays in the `title` for discoverability.
+                  const displayKey = prefix && item.key.startsWith(prefix)
+                    ? item.key.slice(prefix.length)
+                    : item.key
+                  return (
+                    <tr key={item.key} className="hover:[&>td]:bg-surface">
+                      <td className="px-2.5 py-0.5 border-b border-border-subtle w-px pr-5 align-top">
+                        <div className="font-mono text-code-blue max-w-[240px] truncate" title={item.key}>
+                          {displayKey}
+                        </div>
+                      </td>
+                      <td
+                        className="px-2.5 py-0.5 border-b border-border-subtle font-mono text-code-orange break-all align-top cursor-text"
+                        onClick={() => { if (!isEditing) startEdit(item) }}
+                      >
+                        {isEditing
+                          ? (
+                              <input
+                                autoFocus
+                                type="text"
+                                value={editing.draft}
+                                onChange={e => setEditing({ key: item.key, draft: e.target.value })}
+                                onBlur={() => void commitEdit()}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') { e.preventDefault(); void commitEdit() }
+                                  else if (e.key === 'Escape') { e.preventDefault(); setEditing(null) }
+                                }}
+                                className="w-full bg-transparent outline-none border border-accent/60 rounded px-1 py-0 font-mono text-code-orange"
+                              />
+                            )
+                          : item.value}
+                      </td>
+                      <td className="px-1 py-0.5 border-b border-border-subtle align-top">
+                        <button
+                          type="button"
+                          onClick={() => void handleRemove(item.key)}
+                          disabled={busy}
+                          title="删除"
+                          className="text-text-dim hover:text-status-error px-1 leading-none"
+                        >
+                          ×
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+          </tbody>
+        </table>
+      </div>
+      <div className="flex items-center gap-1.5 px-2.5 py-1.5 border-t border-border-subtle shrink-0 bg-bg-panel">
+        {/* New keys are auto-namespaced with the active appId prefix (see
+            handleAdd); the raw prefix is intentionally not shown — Chrome's
+            Local Storage panel likewise hides the storage-key namespace. */}
+        <input
+          type="text"
+          placeholder="key"
+          value={addKey}
+          onChange={e => setAddKey(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); void handleAdd() } }}
+          className="w-32 bg-transparent border border-border-subtle rounded px-1.5 py-0.5 text-[12px] font-mono outline-none focus:border-accent"
+        />
+        <input
+          type="text"
+          placeholder="value"
+          value={addValue}
+          onChange={e => setAddValue(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); void handleAdd() } }}
+          className="flex-1 bg-transparent border border-border-subtle rounded px-1.5 py-0.5 text-[12px] font-mono outline-none focus:border-accent"
+        />
+        <button
+          type="button"
+          onClick={() => void handleAdd()}
+          disabled={busy || !addKey.trim()}
+          className={`${BUTTON_CLASS} hover:border-accent hover:text-accent`}
+        >
+          + 新增
+        </button>
+      </div>
+    </div>
+  )
+}