@linxin666/dsh-remote-web-ui 0.4.2 → 0.4.3

package/src/client/UpdateEntry.tsx

@@ -1,144 +0,0 @@
-/**
- * The sidebar update seat: the download trigger beside the remote-control
- * trigger plus the update panel modal. Owns the flow — probe the registry
- * on open, show the result, and let the user start the update from the
- * result view (#507), then report the outcome (restart hint on success,
- * translated failure on error).
- * Component-local state per the client stack rules.
- */
-import { useCallback, useEffect, useRef, useState } from "react"
-import { createPortal } from "react-dom"
-import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
-import { IconDownloadOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { UpdateStatus } from '../update.ts'
-import { fetchUpdateStatus, runUpdate, UpdateStatusError } from "./update-api.ts"
-import { UpdatePanel, type UpdateView } from "./UpdatePanel.tsx"
-import css from "./remote.module.css"
-
-/** Entry props: the sidebar column state + the standard locale seat. */
-export interface UpdateEntryProps {
-  /** Whether the sidebar renders wide content (false = 56px rail). */
-  wide: boolean
-  t: TranslateNS<'remote'>
-}
-
-/**
- * Render the update trigger and panel.
- * @param props - column state and locale seat.
- * @returns the entry element tree.
- */
-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
-      // offline copy instead of a misleading "cannot reach update source".
-      if (error instanceof UpdateStatusError && error.status === 404) {
-        setView({ kind: "error", message: t("update.unmounted"), detail: t("update.unmountedDetail") })
-        return
-      }
-      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
-    }
-    // Checking never starts an update by itself (#507): the result view
-    // carries the confirmation button that calls startUpdate.
-    setView({ kind: "result", status })
-  }, [t])
-
-  const startUpdate = useCallback(async (status: UpdateStatus): Promise<void> => {
-    if (status.mode !== "npm" || !status.outdated) return
-    setView({ kind: "updating", status })
-    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 {
-      if (token !== runToken.current) return
-      setView({ kind: "error", message: t("update.error"), detail: t("update.offlineDetail") })
-    }
-  }, [t])
-
-  const openPanel = useCallback((): void => {
-    setOpen(true)
-    void check()
-  }, [check])
-
-  const closePanel = useCallback((): void => {
-    runToken.current++
-    setOpen(false)
-  }, [])
-
-  // 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 (
-    <>
-      <button
-        type="button"
-        className={css.trigger}
-        data-wide={wide ? (updateAvailable ? "wide" : undefined) : "rail"}
-        data-update-available={updateAvailable ? "true" : undefined}
-        aria-label={updateLabel}
-        aria-expanded={open}
-        title={updateLabel}
-        onClick={openPanel}
-      >
-        <IconDownloadOutlineRegular size={wide ? 16 : 18} />
-        {updateAvailable && wide && (
-          <span className={css.updateBadgeText}>{t("update.badge")}</span>
-        )}
-      </button>
-      {open && createPortal((
-        <div className={css.overlay} role="presentation">
-          <div className={css.mask} aria-hidden="true" onClick={closePanel} />
-          <UpdatePanel t={t} view={view} onClose={closePanel} onRecheck={() => { void check() }} onStartUpdate={(status) => { void startUpdate(status) }} />
-        </div>
-      ), document.body)}
-    </>
-  )
-}

package/src/client/UpdatePanel.tsx

@@ -1,256 +0,0 @@
-/**
- * The update panel body: check progress, version comparison, the
- * auto-update in-flight state, and the outcome (restart hint on success,
- * translated failure on error). Pure presentation — all state arrives
- * through props from the entry behavior component.
- */
-import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
-import { IconCloseOutlineRegular, IconRefreshOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { UpdateReleaseNotes, UpdateRunResult, UpdateStatus } from '../update.ts'
-import css from "./remote.module.css"
-
-/** The panel view state, owned by the entry component. */
-export type UpdateView =
-  | { kind: 'checking' }
-  | { kind: 'result'; status: UpdateStatus }
-  | { kind: 'updating'; status: UpdateStatus }
-  | { kind: 'done'; result: UpdateRunResult }
-  | { kind: 'error'; message: string; detail?: string }
-
-/** Full panel props: copy + view state + actions. */
-export interface UpdatePanelProps {
-  t: TranslateNS<'remote'>
-  view: UpdateView
-  onClose(): void
-  /** Re-run the check from a terminal state. */
-  onRecheck(): void
-  /** Start the update from the result view (the confirmation step, #507). */
-  onStartUpdate(status: UpdateStatus): void
-}
-
-/** The anchor package name (aggregate first) for copy purposes. */
-function anchorName(status: UpdateStatus | undefined): string | undefined {
-  return status?.anchor ?? status?.packages[0]?.name
-}
-
-/** The latest npm release of the anchor, for reference copy. */
-function anchorLatest(status: UpdateStatus | undefined): string | undefined {
-  return status?.packages[0]?.latest
-}
-
-/**
- * Render the update panel.
- * @param props - copy, view state, and actions.
- * @returns the panel element tree.
- */
-export function UpdatePanel({ t, view, onClose, onRecheck, onStartUpdate }: UpdatePanelProps) {
-  const status = view.kind === "result" || view.kind === "updating" ? view.status : undefined
-  const title = view.kind === "done" && view.result.ok ? t("update.done") : t("update.title")
-  const subtitle = subtitleOf(t, view)
-  return (
-    <div className={css.panel} role="dialog" aria-modal="true" aria-label={title}>
-      <div className={css.header}>
-        <div className={css.heading}>
-          <h2 className={css.title}>{title}</h2>
-          {subtitle !== undefined && <p className={css.subtitle}>{subtitle}</p>}
-        </div>
-        <button type="button" className={css.close} aria-label={t("update.close")} onClick={onClose}>
-          <IconCloseOutlineRegular />
-        </button>
-      </div>
-      {view.kind === "checking" && <p className={css.updateStatus}>{t("update.checking")}</p>}
-      {view.kind === "result" && status !== undefined && <ResultBody t={t} status={status} />}
-      {view.kind === "result" && status !== undefined && status.mode === "npm" && status.outdated && status.error === undefined && (
-        <div className={css.updateActions}>
-          <button type="button" className={css.updateRetry} onClick={() => onStartUpdate(status)}>
-            {t("update.start")}
-          </button>
-        </div>
-      )}
-      {view.kind === "updating" && status !== undefined && (
-        <div>
-          <p className={css.updateStatus}>
-            {t("update.updating", { name: anchorName(status) ?? "", version: anchorLatest(status) ?? "" })}
-          </p>
-          <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
-          <PackageSummary t={t} status={status} />
-        </div>
-      )}
-      {view.kind === "done" && <DoneBody t={t} result={view.result} />}
-      {view.kind === "error" && (
-        <div>
-          <p className={css.updateError}>{view.message}</p>
-          {view.detail !== undefined && <pre className={css.updateOutput}>{view.detail}</pre>}
-        </div>
-      )}
-      {(view.kind === "done" || view.kind === "error") && (
-        <div className={css.updateActions}>
-          <button type="button" className={css.updateRetry} onClick={onRecheck}>
-            <IconRefreshOutlineRegular /> {t("update.retry")}
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/** The subtitle copy per view state (absent on plain results). */
-function subtitleOf(t: TranslateNS<"remote">, view: UpdateView): string | undefined {
-  switch (view.kind) {
-    case "checking":
-      return t("update.checking")
-    case "updating":
-      return t("update.updatingTitle")
-    case "result":
-      return undefined
-    case "done":
-      return view.result.ok ? t("update.doneDetail") : t("update.error")
-    case "error":
-      // The error body below carries the message; no subtitle duplication.
-      return undefined
-  }
-}
-
-/** The checked result body: mode banner + version list. */
-function ResultBody({ t, status }: { t: TranslateNS<"remote">; status: UpdateStatus }) {
-  const anchor = anchorName(status)
-  const latest = anchorLatest(status)
-  if (status.mode === "link") {
-    return (
-      <div>
-        <p className={css.updateStatus}>{t("update.linkMode")}</p>
-        <p className={css.updateDetail}>{t("update.linkModeDetail", { version: latest ?? "-" })}</p>
-      </div>
-    )
-  }
-  if (status.mode === "missing") {
-    return (
-      <div>
-        <p className={css.updateStatus}>{t("update.missing")}</p>
-        <p className={css.updateDetail}>{t("update.missingDetail")}</p>
-      </div>
-    )
-  }
-  if (status.error === "registry-unreachable") {
-    return (
-      <div>
-        <p className={css.updateStatus}>{t("update.offline")}</p>
-        <p className={css.updateDetail}>{t("update.offlineDetail")}</p>
-      </div>
-    )
-  }
-  if (status.outdated) {
-    return (
-      <div>
-        <p className={css.updateStatus}>{t("update.found")}</p>
-        <p className={css.updateDetail}>
-          {anchor !== undefined ? t("update.foundDetail", { name: anchor, version: latest ?? "" }) : ""}
-        </p>
-        <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
-        <PackageSummary t={t} status={status} />
-      </div>
-    )
-  }
-  return (
-    <div>
-      <p className={css.updateStatus}>{t("update.upToDate")}</p>
-      {anchor !== undefined && latest !== undefined && (
-        <p className={css.updateDetail}>{t("update.upToDateDetail", { name: anchor, version: latest })}</p>
-      )}
-      <PackageSummary t={t} status={status} />
-    </div>
-  )
-}
-
-/** Release-note summary when available; otherwise fall back to the package list. */
-function PackageSummary({ t, status }: { t: TranslateNS<'remote'>; status: UpdateStatus }) {
-  if (status.notes === undefined) return <PackageList status={status} />
-  return (
-    <div>
-      <ReleaseNotes t={t} notes={status.notes} />
-      <details className={css.updateVersions}>
-        <summary className={css.updateVersionsSummary}>{t("update.componentVersions")}</summary>
-        <PackageList status={status} />
-      </details>
-    </div>
-  )
-}
-
-/** Render GitHub Release sections as a compact three-group list. */
-function ReleaseNotes({ t, notes }: { t: TranslateNS<'remote'>; notes: UpdateReleaseNotes }) {
-  const sections = [
-    { key: 'features', title: t("update.releaseFeatures"), items: notes.features },
-    { key: 'fixes', title: t("update.releaseFixes"), items: notes.fixes },
-    { key: 'other', title: t("update.releaseOther"), items: notes.other },
-  ].filter(section => section.items.length > 0)
-  if (sections.length === 0) return <p className={css.updateDetail}>{t("update.releaseUnavailable")}</p>
-  return (
-    <div className={css.updateNotes}>
-      <h3 className={css.updateNotesTitle}>{t("update.releaseNotes", { version: notes.version })}</h3>
-      {sections.map(section => (
-        <section key={section.key} className={css.updateNoteSection}>
-          <h4 className={css.updateNoteHeading}>{section.title}</h4>
-          <ul className={css.updateNoteList}>
-            {section.items.map((item, index) => (
-              <li key={index} className={css.updateNoteItem}>{item}</li>
-            ))}
-          </ul>
-        </section>
-      ))}
-    </div>
-  )
-}
-
-/** The per-package current → latest comparison list. */
-function PackageList({ status }: { status: UpdateStatus }) {
-  if (status.packages.length === 0) return null
-  return (
-    <ul className={css.updateList}>
-      {status.packages.map(packageStatus => (
-        <li key={packageStatus.name} className={css.updateListItem}>
-          <span className={css.updateListName}>{packageStatus.name}</span>
-          <span className={css.updateListVersions}>
-            {packageStatus.current}
-            {packageStatus.latest !== undefined && packageStatus.latest !== packageStatus.current && (
-              <> → {packageStatus.latest}</>
-            )}
-          </span>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-/** The outcome body: success + restart hint, or the translated failure. */
-function DoneBody({ t, result }: { t: TranslateNS<"remote">; result: UpdateRunResult }) {
-  if (result.ok) {
-    // The title already reads "Update complete"; the body carries the details.
-    return (
-      <div>
-        <p className={css.updateDetail}>{t("update.doneDetail")}</p>
-        <p className={css.updateDetail}>{t("update.restartHint")}</p>
-      </div>
-    )
-  }
-  const message = errorMessageOf(t, result)
-  return (
-    <div>
-      <p className={css.updateError}>{message}</p>
-      {result.output.trim() !== "" && <pre className={css.updateOutput}>{result.output.trim()}</pre>}
-    </div>
-  )
-}
-
-/** Translate a structured failure code; fall back to the raw message. */
-function errorMessageOf(t: TranslateNS<"remote">, result: UpdateRunResult): string {
-  switch (result.errorCode) {
-    case "pnpm-missing": return t("update.error.pnpmMissing")
-    case "timeout": return t("update.error.timeout")
-    case "not-found": return t("update.error.notFound")
-    case "link": return t("update.error.link")
-    case "pnpm-failed": return t("update.error.pnpmFailed", { code: String(result.exitCode ?? "?") })
-    case "stale": return t("update.error.stale")
-    case "verify-failed": return t("update.error.verifyFailed")
-    default: return result.error ?? t("update.error.unknown")
-  }
-}

package/src/client/update-api.ts

@@ -1,49 +0,0 @@
-/**
- * Browser-side wire helpers for the /api/update surface. Plain fetch over
- * same-origin /api like the pairing client; the host half enforces the
- * loopback-only fence and owns the pnpm run.
- */
-
-import type { UpdateRunResult, UpdateStatus } from '../update.ts'
-
-/**
- * Error thrown when the update status probe fails: carries the HTTP status
- * so the panel can tell "the update route is not mounted" (404 — the host
- * process runs an older plugin build) apart from real network failures.
- */
-export class UpdateStatusError extends Error {
-  /** HTTP status of the failed response (0 when the fetch never returned). */
-  readonly status: number
-  constructor(status: number) {
-    super('update status unavailable (HTTP ' + String(status) + ')')
-    this.status = status
-  }
-}
-
-/**
- * Probe the update status: install mode, owning profile, and the
- * current-vs-latest comparison for every family package.
- * @returns the status snapshot.
- */
-export async function fetchUpdateStatus(): Promise<UpdateStatus> {
-  let response: Response
-  try {
-    response = await fetch('api/update/status')
-  } catch {
-    // Network-level failure: nothing came back at all.
-    throw new UpdateStatusError(0)
-  }
-  if (!response.ok) throw new UpdateStatusError(response.status)
-  return await response.json() as UpdateStatus
-}
-
-/**
- * Run the update (pnpm update in the owning profile). Blocks until pnpm
- * exits — the panel shows an in-flight state meanwhile.
- * @returns the run outcome.
- */
-export async function runUpdate(): Promise<UpdateRunResult> {
-  const response = await fetch('api/update/run', { method: 'POST' })
-  if (!response.ok) throw new Error('update run unavailable')
-  return await response.json() as UpdateRunResult
-}

package/src/console-output.ts

@@ -1,97 +0,0 @@
-// Generated by scripts/sync-shared.mjs from shared/host/console-output.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
-/**
- * Console-output capture shared by the family's Host halves.
- *
- * A child process's stdout/stderr are raw bytes, and on Windows a console
- * program writes the OEM code page (CP936/GBK on a zh-CN system), not UTF-8.
- * Decoding each chunk on its own corrupts the text twice over: the
- * encoding is guessed wrong, and a multi-byte character split across two reads
- * decodes into two replacement characters. This capture accumulates raw bytes
- * under a byte budget and decodes exactly once, at read time.
- */
-
-/** Bounded byte accumulator for one child process's interleaved stdout/stderr. */
-export interface OutputCapture {
-  /** Append one raw chunk (the bytes are copied into the budget). */
-  push(chunk: Uint8Array): void
-  /**
-   * Decode everything captured so far. Idempotent, so a caller may read the
-   * tail both after a failure branch and at settlement.
-   */
-  read(): string
-}
-
-/** Count the U+FFFD replacement characters one candidate decode produced. */
-function replacementCount(text: string): number {
-  let count = 0
-  for (const character of text) {
-    if (character === '\uFFFD') count += 1
-  }
-  return count
-}
-
-/**
- * Decode one console byte buffer. Strict UTF-8 wins whenever it is valid;
- * otherwise the bytes are not UTF-8 at all and the console wrote its own code
- * page, so the candidate that loses the least text is taken.
- * @param bytes - the captured bytes.
- * @returns the decoded text.
- */
-export function decodeConsoleBytes(bytes: Uint8Array): string {
-  try {
-    return new TextDecoder('utf-8', { fatal: true }).decode(bytes)
-  } catch {
-    // Not valid UTF-8. Prefer whichever candidate leaves the fewest
-    // replacement characters so real UTF-8 text carrying one bad byte is not
-    // rewritten wholesale as GBK gibberish; without the legacy code page
-    // (small-ICU builds) the lenient UTF-8 pass is all that is left.
-    let best: string | undefined
-    let bestLoss = Number.POSITIVE_INFINITY
-    for (const label of ['gbk', 'utf-8']) {
-      let text: string
-      try {
-        text = new TextDecoder(label).decode(bytes)
-      } catch {
-        continue
-      }
-      const loss = replacementCount(text)
-      if (loss < bestLoss) {
-        best = text
-        bestLoss = loss
-      }
-    }
-    /* v8 ignore next 3 -- reachable only without the legacy code page AND without the lenient pass */
-    if (best === undefined) return Buffer.from(bytes).toString('utf8')
-    return best
-  }
-}
-
-/**
- * Create a capture bounded to a byte budget. Overflow drops from the FRONT
- * (the tail is what carries a failure reason), and the cut never lands inside
- * a character: leading UTF-8 continuation bytes are dropped with it, and a
- * legacy code page's dangling lead byte — indistinguishable from a real byte
- * without knowing the encoding until the whole buffer is decoded — is removed
- * with the one replacement character it produced, so an over-long stream still
- * reads cleanly at the seam.
- * @param maxBytes - maximum retained bytes.
- * @returns the capture.
- */
-export function createOutputCapture(maxBytes: number): OutputCapture {
-  let buffer = Buffer.alloc(0)
-  let trimmed = false
-  return {
-    push(chunk: Uint8Array): void {
-      buffer = buffer.length === 0 ? Buffer.from(chunk) : Buffer.concat([buffer, Buffer.from(chunk)])
-      if (buffer.length <= maxBytes) return
-      let start = buffer.length - maxBytes
-      while (start < buffer.length && (buffer[start] & 0xc0) === 0x80) start += 1
-      buffer = Buffer.from(buffer.subarray(start))
-      trimmed = true
-    },
-    read(): string {
-      const text = decodeConsoleBytes(buffer)
-      return trimmed && text.startsWith('\uFFFD') ? text.slice(1) : text
-    },
-  }
-}

package/src/update-routes.ts

@@ -1,65 +0,0 @@
-/**
- * The /api/update route family: the status probe and the update run. Both
- * are loopback-only control surfaces — the run endpoint triggers a real
- * pnpm install inside the owning profile, so it must never be reachable
- * from a LAN/phone origin.
- */
-
-import type { IncomingMessage, ServerResponse } from 'node:http'
-import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
-import type { UpdateRunResult, UpdateStatus } from './update.ts'
-import { writeJson } from './http.ts'
-
-/** Route paths (exact matches under /api). */
-export const UPDATE_PATHS = {
-  status: '/api/update/status',
-  run: '/api/update/run',
-} as const
-
-/** Route-family dependencies (test seam). */
-export interface UpdateRoutesDeps {
-  /** Loopback-only fence: the control endpoints are host-surface only. */
-  fence(request: IncomingMessage): boolean
-  /** Probe registry versions and report the comparison. */
-  check(): Promise<UpdateStatus>
-  /** Run the pnpm update (resolves when pnpm exits). */
-  run(): Promise<UpdateRunResult>
-}
-
-/**
- * Build the /api/update route family.
- * @param deps - fence + check/run seams.
- * @returns the exact routes to register on webServer.
- */
-export function makeUpdateRoutes(deps: UpdateRoutesDeps): WebRoute[] {
-  const handleStatus = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
-    if (req.method !== 'GET') {
-      res.writeHead(405, { 'content-type': 'text/plain; charset=utf-8' })
-      res.end('method not allowed')
-      return
-    }
-    if (!deps.fence(req)) {
-      writeJson(res, 403, { ok: false, code: "forbidden" })
-      return
-    }
-    writeJson(res, 200, await deps.check())
-  }
-
-  const handleRun = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
-    if (req.method !== 'POST') {
-      res.writeHead(405, { 'content-type': 'text/plain; charset=utf-8' })
-      res.end('method not allowed')
-      return
-    }
-    if (!deps.fence(req)) {
-      writeJson(res, 403, { ok: false, code: "forbidden" })
-      return
-    }
-    writeJson(res, 200, await deps.run())
-  }
-
-  return [
-    { kind: 'exact', path: UPDATE_PATHS.status, handler: handleStatus },
-    { kind: 'exact', path: UPDATE_PATHS.run, handler: handleRun },
-  ]
-}