@huakirax/dsh-plugin-pocket 0.0.0-stage → 0.1.1

package/src/client/styles.ts

@@ -0,0 +1,76 @@
+import type { CSSProperties } from 'react'
+
+const text = 'var(--dsw-alias-label-primary)'
+const muted = 'var(--dsw-alias-label-secondary)'
+const border = '1px solid var(--dsw-alias-border-l2)'
+const surface = 'var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-base))'
+const button: CSSProperties = {
+  appearance: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+  gap: 8, border: 'none', borderRadius: 8, background: 'transparent', color: muted,
+  cursor: 'pointer', font: 'inherit', fontSize: 13, lineHeight: '20px', padding: '8px 10px',
+}
+
+export const styles = {
+  settingsRoot: { width: '100%', padding: '8px 0 24px', color: text, containerType: 'inline-size' },
+  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 24 },
+  title: { margin: 0, fontSize: 24, fontWeight: 650, lineHeight: '32px' },
+  service: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: muted },
+  pairingCard: { border, borderRadius: 16, background: surface, padding: '24px 24px 0' },
+  pairingTop: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, minHeight: 168, paddingBottom: 24 },
+  pairControls: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, minWidth: 0 },
+  rowTitle: { margin: 0, fontSize: 16, lineHeight: '24px', fontWeight: 600, color: text },
+  illustration: { width: 180, maxWidth: '30%', flexShrink: 0, color: 'var(--dsw-alias-label-tertiary)', opacity: .55, marginRight: 20 },
+  segments: { display: 'inline-flex', padding: 3, borderRadius: 10, gap: 2, background: 'var(--dsw-alias-bg-overlay)' },
+  segment: { ...button, minWidth: 88, padding: '6px 16px' },
+  segmentActive: { color: text, background: 'var(--dsw-alias-bg-base)', boxShadow: '0 1px 4px rgba(0,0,0,.08)' },
+  footer: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: '8px 16px', borderTop: border, padding: '14px 0' },
+  address: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, minWidth: 0, fontSize: 12, color: muted },
+  addressValue: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontSize: 12, color: text, overflowWrap: 'anywhere' },
+  footerActions: { display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' },
+  divider: { width: 1, height: 16, background: 'var(--dsw-alias-border-l2)', flexShrink: 0 },
+  iconBtn: { ...button, padding: 8 },
+  textBtn: button,
+  primaryBtn: { ...button, height: 40, padding: '0 18px', fontSize: 14, fontWeight: 550, borderRadius: 10, background: 'var(--dsw-alias-button-primary-fill)', color: 'var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-base))' },
+  outlineBtn: { ...button, border, color: text },
+  outlineBtnSm: { ...button, padding: '5px 8px', color: text },
+  destructiveBtn: { ...button, background: 'var(--dsw-alias-state-error-primary)', color: '#fff', padding: '8px 14px' },
+  ghostBtn: { ...button, border, color: text },
+  hint: { margin: 0, fontSize: 12, lineHeight: '20px', color: muted },
+  errorText: { margin: '0 0 16px', fontSize: 12, lineHeight: '20px', color: 'var(--dsw-alias-state-error-primary)' },
+  stateDotSlot: (state: 'done' | 'error' | 'idle'): CSSProperties => ({
+    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 10, height: 10, flexShrink: 0,
+    color: state === 'done' ? 'var(--dsw-alias-state-success-primary)' : state === 'error' ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-label-tertiary)',
+  }),
+  stateDotCore: { width: 6, height: 6, borderRadius: '50%', background: 'currentColor' },
+  pairingContent: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 24, padding: '0 0 24px' },
+  code: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontSize: 28, letterSpacing: '.16em', fontWeight: 600, margin: '4px 0 8px' },
+  qrBox: { padding: 10, borderRadius: 10, background: '#fff', lineHeight: 0 },
+  actionRow: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 },
+  devicesSection: { marginTop: 30 },
+  devicesHeader: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 },
+  count: { background: surface, color: muted, borderRadius: 8, minWidth: 24, textAlign: 'center', fontSize: 12, padding: '2px 4px' },
+  deviceList: { display: 'flex', flexDirection: 'column', gap: 10 },
+  deviceRow: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 14, padding: '18px 20px', border, borderRadius: 14 },
+  deviceIcon: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 48, borderRadius: 11, background: surface, color: muted },
+  deviceInfo: { flex: '1 1 120px', minWidth: 0 },
+  deviceHeading: { display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 },
+  deviceName: { fontSize: 14, lineHeight: '22px', fontWeight: 550, color: text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  deviceMeta: { marginTop: 4, fontSize: 12, lineHeight: '18px', color: muted },
+  deviceActions: { display: 'flex', alignItems: 'center', gap: 6, marginLeft: 'auto' },
+  input: { boxSizing: 'border-box', width: '100%', minWidth: 0, height: 34, border, borderRadius: 8, padding: '0 10px', background: 'var(--dsw-alias-bg-base)', color: text, font: 'inherit', fontSize: 13 },
+  dialogMask: { position: 'fixed', inset: 0, zIndex: 1100, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'auto', background: 'rgba(0,0,0,.45)', padding: 24 },
+  dialogCard: { width: 'min(560px, calc(100vw - 48px))', maxHeight: '80vh', overflow: 'auto', borderRadius: 14, border, background: 'var(--dsw-alias-bg-base)', color: text, boxShadow: '0 12px 40px rgba(0,0,0,.2)', padding: 24, display: 'flex', flexDirection: 'column', gap: 12 },
+  dialogTitle: { margin: 0, fontSize: 16, fontWeight: 600, lineHeight: '24px' },
+  dialogBody: { margin: 0, fontSize: 14, lineHeight: '22px', color: muted },
+  dialogActions: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 },
+} satisfies Record<string, CSSProperties | ((state: 'done' | 'error' | 'idle') => CSSProperties)>
+
+export const panelCss = `
+[data-pocket-panel] button:disabled { opacity: .45; cursor: not-allowed !important; }
+[data-pocket-panel] button:not(:disabled):hover { filter: brightness(.94); }
+[data-pocket-panel] button:focus-visible { outline: 2px solid var(--dsw-alias-label-secondary); outline-offset: 3px; }
+@container (max-width: 440px) {
+  [data-pocket-panel] .pocket-illustration { display: none; }
+  [data-pocket-panel] .pocket-device-actions { width: 100%; justify-content: flex-end; }
+}
+`

package/src/completion-route.js

@@ -0,0 +1,87 @@
+import { randomUUID } from 'node:crypto'
+import { isTrustedRequest } from './trust.js'
+
+const json = (res, status, body) => {
+  res.writeHead(status, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' })
+  res.end(JSON.stringify(body))
+}
+
+/** Same local-operator trust fence as the existing Pocket management routes. */
+export function registerCompletionRoutes(ctx, tracker) {
+  ctx.effect(() => {
+    const clients = new Map()
+    const gate = (req, res) => {
+      if (isTrustedRequest(req)) return true
+      json(res, 403, { error: 'forbidden' })
+      return false
+    }
+    const unregisterEvents = ctx.webServer.register({
+      kind: 'exact', path: '/pocket/completion/events',
+      handler: (req, res) => {
+        if (!gate(req, res)) return
+        if (req.method !== 'GET') return json(res, 405, { error: 'method not allowed' })
+        const clientId = randomUUID()
+        let closed = false
+        let unsubscribe = () => {}
+        let heartbeat
+        const close = () => {
+          if (closed) return
+          closed = true
+          clearInterval(heartbeat)
+          unsubscribe()
+          clients.delete(clientId)
+          tracker.disconnect(clientId)
+          res.end()
+        }
+        const send = (snapshot) => {
+          if (closed) return
+          // Disconnect slow consumers instead of retaining unbounded snapshots.
+          if (!res.write(`data: ${JSON.stringify({ clientId, ...snapshot })}\n\n`)) close()
+        }
+        clients.set(clientId, close)
+        res.on('close', close)
+        res.on('error', close)
+        res.writeHead(200, {
+          'content-type': 'text/event-stream; charset=utf-8',
+          'cache-control': 'no-store',
+          'x-accel-buffering': 'no',
+        })
+        unsubscribe = tracker.subscribe(send)
+        send(tracker.snapshot())
+        if (!closed) {
+          heartbeat = setInterval(() => { if (!res.write(': keepalive\n\n')) close() }, 30_000)
+          heartbeat.unref()
+        }
+      },
+    })
+    const unregisterView = ctx.webServer.register({
+      kind: 'exact', path: '/pocket/completion/view',
+      handler: async (req, res) => {
+        if (!gate(req, res)) return
+        if (req.method !== 'POST') return json(res, 405, { error: 'method not allowed' })
+        let body = ''
+        try {
+          for await (const chunk of req) {
+            body += chunk
+            if (body.length > 4096) return json(res, 413, { error: 'too large' })
+          }
+          body = JSON.parse(body)
+        } catch {
+          return json(res, 400, { error: 'invalid json' })
+        }
+        if (!body || typeof body.clientId !== 'string'
+          || !(body.sessionId === null || (typeof body.sessionId === 'string' && body.sessionId.length > 0))) {
+          return json(res, 400, { error: 'clientId and sessionId (string or null) required' })
+        }
+        // Checked after reading the body: the SSE may have disconnected meanwhile.
+        if (!clients.has(body.clientId)) return json(res, 409, { error: 'completion/client-expired' })
+        return json(res, 200, tracker.view(body.clientId, body.sessionId))
+      },
+    })
+    return () => {
+      unregisterEvents()
+      unregisterView()
+      for (const close of clients.values()) close()
+    }
+  })
+}

package/src/completion-tracker.js

@@ -0,0 +1,95 @@
+import { randomUUID } from 'node:crypto'
+
+/** Host-owned unread state. A follow subscription is deliberately not a view. */
+export class CompletionTracker {
+  constructor({ initializing = false } = {}) {
+    this.epoch = randomUUID()
+    this.revision = 0
+    this.running = new Set()
+    this.unread = new Set()
+    this.views = new Map()
+    this.listeners = new Set()
+    this.pending = initializing ? [] : null
+  }
+
+  snapshot() {
+    return { epoch: this.epoch, revision: this.revision, unreadIds: [...this.unread] }
+  }
+
+  subscribe(listener) {
+    this.listeners.add(listener)
+    return () => this.listeners.delete(listener)
+  }
+
+  publish() {
+    this.revision++
+    const snapshot = this.snapshot()
+    for (const listener of this.listeners) listener(snapshot)
+  }
+
+  /** Seed once, then replay events received while the asynchronous list was read. */
+  seed(items) {
+    if (this.pending === null) return
+    const pending = this.pending
+    this.pending = null
+    for (const item of items) {
+      if (item?.running === true && typeof item.sessionId === 'string') this.running.add(item.sessionId)
+    }
+    const observed = new Set()
+    for (const [method, args] of pending) {
+      const sessionId = args[0]
+      if (method === 'status' || method === 'added' || method === 'remove') {
+        // The list may already reflect this stop. Before the first baseline,
+        // a live stop is completion evidence unless an earlier event says idle
+        // or removed; historical idle rows alone are never completion evidence.
+        if (method === 'status' && args[1] === false && !observed.has(sessionId)) this.running.add(sessionId)
+        observed.add(sessionId)
+      }
+      this[method](...args)
+    }
+  }
+
+  status(sessionId, running) {
+    if (typeof sessionId !== 'string' || !sessionId) return
+    if (this.pending !== null) { this.pending.push(['status', [sessionId, running]]); return }
+    const wasRunning = this.running.has(sessionId)
+    if (running) {
+      this.running.add(sessionId)
+      if (this.unread.delete(sessionId)) this.publish()
+    } else {
+      this.running.delete(sessionId)
+      if (wasRunning && ![...this.views.values()].includes(sessionId) && !this.unread.has(sessionId)) {
+        this.unread.add(sessionId)
+        this.publish()
+      }
+    }
+  }
+
+  /** An added summary establishes running state; it is not a stop event. */
+  added(sessionId, running) {
+    if (typeof sessionId !== 'string' || !sessionId) return
+    if (this.pending !== null) { this.pending.push(['added', [sessionId, running]]); return }
+    if (running) this.status(sessionId, true)
+    else this.running.delete(sessionId)
+  }
+
+  remove(sessionId) {
+    if (this.pending !== null) { this.pending.push(['remove', [sessionId]]); return }
+    this.running.delete(sessionId)
+    for (const [client, viewed] of this.views) if (viewed === sessionId) this.views.delete(client)
+    if (this.unread.delete(sessionId)) this.publish()
+  }
+
+  view(client, sessionId) {
+    if (this.pending !== null) { this.pending.push(['view', [client, sessionId]]); return this.snapshot() }
+    if (sessionId === null) this.views.delete(client)
+    else this.views.set(client, sessionId)
+    if (this.unread.delete(sessionId)) this.publish()
+    return this.snapshot()
+  }
+
+  disconnect(client) {
+    if (this.pending !== null) { this.pending.push(['disconnect', [client]]); return }
+    this.views.delete(client)
+  }
+}

package/src/devices.js

@@ -0,0 +1,60 @@
+import { createHash, randomBytes, randomUUID, timingSafeEqual } from 'node:crypto'
+import { chmodSync, existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+const hash = (s) => createHash('sha256').update(String(s)).digest('hex')
+const eq = (a, b) => timingSafeEqual(Buffer.from(a, 'hex'), Buffer.from(b, 'hex'))
+
+/**
+ * Paired-device store. Tokens are stored as sha256 only.
+ * The owner token (M0 `token` file / config) authenticates as device "owner"
+ * and is the only identity allowed to open pairing windows.
+ */
+export function createDeviceStore({ dataDir, ownerToken, persist = true, now = Date.now }) {
+  const path = dataDir ? join(dataDir, 'devices.json') : undefined
+  let devices = []
+  if (persist && path && existsSync(path)) {
+    try { devices = JSON.parse(readFileSync(path, 'utf8')).devices ?? [] } catch { devices = [] }
+  }
+  const save = () => {
+    if (!persist || !path) return
+    mkdirSync(dataDir, { recursive: true, mode: 0o700 })
+    const tmp = `${path}.tmp`
+    writeFileSync(tmp, JSON.stringify({ version: 1, devices }, null, 2), { mode: 0o600 })
+    chmodSync(tmp, 0o600)
+    renameSync(tmp, path)
+  }
+  const ownerHash = hash(ownerToken)
+  return {
+    /** @returns {{id: string, name: string, owner: boolean} | undefined} */
+    authenticate(token) {
+      if (typeof token !== 'string' || token.length === 0) return undefined
+      const h = hash(token)
+      if (eq(h, ownerHash)) return { id: 'owner', name: 'owner', owner: true }
+      const d = devices.find((x) => eq(x.tokenHash, h))
+      if (!d) return undefined
+      d.lastSeenAt = now(); save()
+      return { id: d.id, name: d.name, owner: false }
+    },
+    add(name) {
+      const token = randomBytes(32).toString('base64url')
+      const d = { id: randomUUID(), name: String(name || 'device').slice(0, 64), tokenHash: hash(token), createdAt: now(), lastSeenAt: null }
+      devices.push(d); save()
+      return { deviceId: d.id, token }
+    },
+    list: () => devices.map(({ id, name, createdAt, lastSeenAt }) => ({ id, name, createdAt, lastSeenAt })),
+    rename(id, name) {
+      const d = devices.find((x) => x.id === id)
+      if (!d) return false
+      d.name = String(name || 'device').slice(0, 64)
+      save()
+      return true
+    },
+    revoke(id) {
+      const before = devices.length
+      devices = devices.filter((d) => d.id !== id)
+      if (devices.length !== before) save()
+      return devices.length !== before
+    },
+  }
+}