@linxin666/dsh-remote-web-ui 0.1.17 → 0.1.19

package/src/client/PluginSettingsCard.tsx

@@ -45,6 +45,17 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
   onSave: () => void
   /** Drop every staged edit. */
   onDiscard: () => void
+  /**
+   * Render the controls expanded on arrival (still collapsible). Defaults to
+   * true: promoted first-level sections show their settings immediately.
+   */
+  defaultOpen?: boolean
+  /**
+   * Render without the collapse affordance: a static header and an always
+   * visible body. Used by first-level settings sections whose nav entry
+   * already provides the selection.
+   */
+  alwaysOpen?: boolean
   /** The plugin's controls. */
   children: ReactNode
 }
@@ -55,57 +66,27 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
  * @returns the card, or nothing while the namespace is still loading.
  */
 export function PluginSettingsCard<TKey extends string = string>(props: PluginSettingsCardProps<TKey>) {
-  const [open, setOpen] = useState(false)
-  const { state } = props
+  const [open, setOpen] = useState(props.defaultOpen ?? true)
+  const { state, alwaysOpen } = props
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const description = props.t(props.descriptionKey)
   const blocked = !state.dirty || state.invalid || state.saving
-  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
-  // The namespace exists but the Host does not serve it to this client (the
-  // official settings allowlist omits third-party namespaces): show a card
-  // that explains the gap instead of vanishing, so a missing card never
-  // reads as a missing plugin.
-  if (!state.exposed) {
-    return (
-      <li className={cardClass}>
-        <button
-          type="button"
-          className={css.header}
-          aria-expanded={open}
-          aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
-          onClick={() => { setOpen(!open) }}
-        >
-          <span className={css.headText}>
-            <span className={css.name} title={title}>{title}</span>
-            <span className={css.description} title={description}>{description}</span>
-          </span>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
-          >
-            <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={css.body}>
-              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
-            </div>
-          )
-          : null}
-      </li>
+  const expanded = alwaysOpen === true || open
+  const cardClass = expanded ? `${css.cardOpen} ${css.card}` : css.card
+  // With alwaysOpen the nav entry already provides the selection, so the
+  // header is a static title row instead of a disclosure button.
+  const header = alwaysOpen === true
+    ? (
+      <div className={css.headerStatic}>
+        <span className={css.headText}>
+          <span className={css.name} title={title}>{title}</span>
+          <span className={css.description} title={description}>{description}</span>
+        </span>
+        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
+      </div>
     )
-  }
-  return (
-    <li className={cardClass}>
+    : (
       <button
         type="button"
         className={css.header}
@@ -132,7 +113,29 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
           />
         </svg>
       </button>
-      {open
+    )
+  // The namespace exists but the Host does not serve it to this client (the
+  // official settings allowlist omits third-party namespaces): show a card
+  // that explains the gap instead of vanishing, so a missing card never
+  // reads as a missing plugin.
+  if (!state.exposed) {
+    return (
+      <li className={cardClass}>
+        {header}
+        {expanded
+          ? (
+            <div className={css.body}>
+              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
+            </div>
+          )
+          : null}
+      </li>
+    )
+  }
+  return (
+    <li className={cardClass}>
+      {header}
+      {expanded
         ? (
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}

package/src/client/RemoteSettingsCard.tsx

@@ -104,6 +104,14 @@ export class RemoteSettingsCardController {
   inject(): RemoteSettingsCardFace {
     return { hooks: { remoteSettingsCard: this.store }, ...this.form.actions() }
   }
+
+  /**
+   * Release the card's scope subscription and bound stores; the slot
+   * disposer calls this on teardown.
+   */
+  dispose(): void {
+    this.form.dispose()
+  }
 }
 
 /** Props the renderer binds for the remote-control card. */

package/src/client/index.ts

@@ -157,13 +157,19 @@ export function apply(ctx: ClientContext): void {
   // Plugin configuration card: one staged form over the `remote-web-ui`
   // settings namespace, contributed to the Web UI plugin group.
   const remoteSettings = new RemoteSettingsCardController(settingsScope)
-  ctx.slots.inject('web-ui.plugin.item', () => ctx.slots.register({
-    name: 'web-ui.plugin.item',
-    id: 'remote-web-ui',
-    order: 90,
-    locale: NS,
-    inject: () => remoteSettings.inject(),
-  }, RemoteSettingsCard))
+  ctx.slots.inject('web-ui.plugin.item', () => {
+    const unregister = ctx.slots.register({
+      name: 'web-ui.plugin.item',
+      id: 'remote-web-ui',
+      order: 90,
+      locale: NS,
+      inject: () => remoteSettings.inject(),
+    }, RemoteSettingsCard)
+    return () => {
+      remoteSettings.dispose()
+      unregister()
+    }
+  })
 
   // Phone-side boot flow + heartbeats. Loopback pages (the desktop) never
   // heartbeat; the server ignores unpaired heartbeats anyway. Both run only

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

@@ -42,6 +42,15 @@
   outline-offset: -2px;
 }
 
+.headerStatic {
+  width: 100%;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
+}
+
 .headText {
   flex-direction: column;
   flex: 1;

package/src/client/settings-form.ts

@@ -234,6 +234,9 @@ export class CardForm<T> {
   private readonly specs: Map<string, FieldSpec>
   private readonly staged = new Map<string, StagedEdit>()
   private readonly listeners = new Set<() => void>()
+  /** The scope subscription installed in the constructor; released by dispose(). */
+  private readonly disposeScope: () => void
+  private disposed = false
   private saving = false
   private failed = false
   private failedReason: string | undefined
@@ -244,7 +247,18 @@ export class CardForm<T> {
     specs: FieldSpec[],
   ) {
     this.specs = new Map(specs.map(spec => [spec.field, spec]))
-    scope.subscribe(() => { this.publish() })
+    this.disposeScope = scope.subscribe(() => { this.publish() })
+  }
+
+  /**
+   * Release the scope subscription and every bound store listener. The card
+   * must call this on teardown; later calls are no-ops.
+   */
+  dispose(): void {
+    if (this.disposed) return
+    this.disposed = true
+    this.disposeScope()
+    this.listeners.clear()
   }
 
   /** Publish a projection of this form, rebuilt whenever the scope or a draft changes. */

package/src/gate.ts

@@ -13,41 +13,16 @@
 
 import type { IncomingMessage } from 'node:http'
 import type { PairingService } from './pairing.ts'
+import { isLoopbackAddress, isLoopbackHostname } from './loopback.ts'
 
 /**
- * Whether a normalized URL hostname names the local loopback authority.
- * Semantics mirror the connection package's internal predicate (localhost,
- * IPv6 loopback, any IPv4 address in 127/8); it is reimplemented here because
- * the connection package no longer exports it — the fence now lives inside
- * the connection plugin, and external host plugins only need the
- * classification, not the whole trust decision.
+ * Loopback classification for the desktop client. The predicates now live in
+ * the shared synced copy (shared/host/loopback.ts, mirrored to ./loopback.ts
+ * by scripts/sync-shared.mjs): localhost, IPv6 loopback, and any IPv4 address
+ * in 127/8.
  * @param hostname - WHATWG URL hostname (IPv6 literals retain brackets).
  * @returns true for localhost, IPv6 loopback, or any IPv4 address in 127/8.
  */
-export function isLoopbackHostname(hostname: string): boolean {
-  if (hostname === 'localhost' || hostname === '[::1]') return true
-  const parts = hostname.split('.')
-  return parts.length === 4
-    && parts[0] === '127'
-    && parts.every(part => /^\d{1,3}$/.test(part) && Number(part) <= 255)
-}
-
-/** Whether a socket remote address names the loopback range (127/8, ::1, IPv4-mapped). */
-export function isLoopbackAddress(address: string | undefined): boolean {
-  if (address === undefined) return false
-  const normalized = address.toLowerCase()
-  if (normalized === '::1') return true
-  if (normalized.startsWith('::ffff:')) return isIPv4Loopback(normalized.slice('::ffff:'.length))
-  return isIPv4Loopback(normalized)
-}
-
-/** IPv4 127/8 predicate (four decimal octets, first == 127). */
-function isIPv4Loopback(v4: string): boolean {
-  const parts = v4.split('.')
-  return parts.length === 4
-    && parts[0] === '127'
-    && parts.every(part => /^\d{1,3}$/.test(part) && Number(part) <= 255)
-}
 
 /**
  * Read one cookie value from a Cookie header.

package/src/loopback.ts

@@ -0,0 +1,63 @@
+// Generated by scripts/sync-shared.mjs from shared/host/loopback.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Loopback trust fence shared by the host route families: socket address,
+ * Host header, and browser same-origin markers. Packages receive this file as
+ * a generated copy via scripts/sync-shared.mjs; edit the shared source and
+ * re-run the sync instead of editing a copy.
+ *
+ * Semantics: RFC 5735 IPv4 127/8, ::1, IPv4-mapped ::ffff:127/8 (matching the
+ * remote-web-ui gate), localhost hostnames, plus the browser same-origin
+ * markers (sec-fetch-site and Origin) for the request-level fence.
+ * @module dsh-web-ui-shared/host/loopback
+ */
+
+import type { IncomingMessage } from 'node:http'
+
+/** IPv4 127/8 predicate (four decimal octets, first == 127). */
+export function isIPv4Loopback(v4: string): boolean {
+  const parts = v4.split('.')
+  return parts.length === 4
+    && parts[0] === '127'
+    && parts.every(part => /^\d{1,3}$/.test(part) && Number(part) <= 255)
+}
+
+/** Whether a socket remote address names the loopback range (127/8, ::1, IPv4-mapped). */
+export function isLoopbackAddress(address: string | undefined): boolean {
+  if (address === undefined) return false
+  const normalized = address.toLowerCase()
+  if (normalized === '::1') return true
+  if (normalized.startsWith('::ffff:')) return isIPv4Loopback(normalized.slice('::ffff:'.length))
+  return isIPv4Loopback(normalized)
+}
+
+/** Whether a normalized URL hostname names the loopback authority (localhost, [::1], 127/8). */
+export function isLoopbackHostname(hostname: string): boolean {
+  if (hostname === 'localhost' || hostname === '[::1]') return true
+  return isIPv4Loopback(hostname)
+}
+
+/**
+ * Request-level trust fence: a loopback socket address AND a loopback Host
+ * header, plus browser same-origin markers. The socket address is
+ * authoritative; X-Forwarded-For is never trusted.
+ */
+export function isLoopbackRequest(request: IncomingMessage): boolean {
+  if (!isLoopbackAddress(request.socket.remoteAddress)) return false
+  const host = request.headers.host
+  if (typeof host !== 'string') return false
+  let hostUrl: URL
+  try {
+    hostUrl = new URL('http://' + host)
+  } catch {
+    return false
+  }
+  if (!isLoopbackHostname(hostUrl.hostname)) return false
+  if (request.headers['sec-fetch-site'] === 'cross-site') return false
+  const origin = request.headers.origin
+  if (origin === undefined) return true
+  try {
+    return new URL(origin).host === hostUrl.host
+  } catch {
+    return false
+  }
+}

package/src/mobile/markdown.test.ts

@@ -0,0 +1,77 @@
+/**
+ * Mobile markdown renderer tests: GFM subset coverage plus the security
+ * contract — raw HTML escapes, dangerous link/image protocols are
+ * stripped, and code fences never parse their content.
+ */
+import { describe, expect, it } from 'vitest'
+import { escapeHtml, renderInline, renderMarkdown, safeUrl } from './markdown.ts'
+
+describe('safeUrl', () => {
+  it('allows http/https/mailto/fragments and scheme-less targets', () => {
+    expect(safeUrl('https://example.com/a')).toBe('https://example.com/a')
+    expect(safeUrl('http://example.com')).toBe('http://example.com')
+    expect(safeUrl('mailto:a@b.c')).toBe('mailto:a@b.c')
+    expect(safeUrl('#top')).toBe('#top')
+    expect(safeUrl('./rel/path')).toBe('./rel/path')
+  })
+
+  it('rejects javascript:/data:/vbscript: and blanks', () => {
+    expect(safeUrl('javascript:alert(1)')).toBeNull()
+    expect(safeUrl('data:text/html,x')).toBeNull()
+    expect(safeUrl('vbscript:x')).toBeNull()
+    expect(safeUrl('')).toBeNull()
+    expect(safeUrl('   ')).toBeNull()
+  })
+})
+
+describe('renderInline', () => {
+  it('renders code, bold, italic, strikethrough and links', () => {
+    expect(renderInline('`a<b`')).toBe('<code>a&lt;b</code>')
+    expect(renderInline('**b**')).toBe('<strong>b</strong>')
+    expect(renderInline('*i*')).toBe('<em>i</em>')
+    expect(renderInline('~~d~~')).toBe('<del>d</del>')
+    expect(renderInline('[x](https://e.com)')).toBe('<a href="https://e.com" target="_blank" rel="noopener noreferrer">x</a>')
+  })
+
+  it('strips unsafe link targets and renders the label as plain text', () => {
+    expect(renderInline('[x](javascript:alert(1))')).toBe('x')
+    expect(renderInline('![a](data:text/html,x)')).toBe('a')
+  })
+
+  it('escapes raw HTML instead of passing it through', () => {
+    expect(renderInline('<script>alert(1)</script>')).toBe('&lt;script&gt;alert(1)&lt;/script&gt;')
+  })
+})
+
+describe('renderMarkdown', () => {
+  it('renders headings, hr, paragraphs', () => {
+    const html = renderMarkdown('# T\n\npara\n\n---')
+    expect(html).toContain('<h1>T</h1>')
+    expect(html).toContain('<p>para</p>')
+    expect(html).toContain('<hr />')
+  })
+
+  it('renders fenced code without parsing its content', () => {
+    const html = renderMarkdown('```ts\nconst a = **bold** <x>\n```')
+    expect(html).toBe('<pre class="language-ts"><code>const a = **bold** &lt;x&gt;</code></pre>')
+  })
+
+  it('renders lists, blockquotes and tables', () => {
+    const html = renderMarkdown('- a\n- b\n\n1. x\n2. y\n\n> quote\n\n| h1 | h2 |\n| --- | --- |\n| c1 | c2 |')
+    expect(html).toContain('<ul><li>a</li><li>b</li></ul>')
+    expect(html).toContain('<ol><li>x</li><li>y</li></ol>')
+    expect(html).toContain('<blockquote><p>quote</p></blockquote>')
+    expect(html).toContain('<thead><tr><th>h1</th><th>h2</th></tr></thead>')
+    expect(html).toContain('<td>c1</td><td>c2</td>')
+  })
+
+  it('normalizes CRLF and keeps user-visible text intact', () => {
+    expect(renderMarkdown('a\r\nb')).toBe('<p>a\nb</p>')
+  })
+})
+
+describe('escapeHtml', () => {
+  it('escapes all five HTML-significant characters', () => {
+    expect(escapeHtml('<&>"\'')).toBe('&lt;&amp;&gt;&quot;&#39;')
+  })
+})