dsh-plugin-cicd 0.5.0 → 0.5.1

package/client.js

@@ -200,6 +200,14 @@ window.__ModuleLoader__.load({
       'meta.version': '本地',
       'meta.expectedTag': '期望 tag {tag}',
       'meta.noLocal': '未配置本地路径，无法对比本地状态',
+      'clone.title': '本地检出',
+      'clone.why.none': '还没有本地检出。克隆下来之后，提交 / 构建 / 发布才有东西可作用于它——这些动作都需要一份工作区。',
+      'clone.why.broken': '配置的路径不可用（{path}）：{reason}',
+      'clone.urlPlaceholder': '仓库地址，如 https://github.com/owner/repo.git',
+      'clone.action': '克隆',
+      'clone.target': '将克隆到 {path}',
+      'clone.noRoot': '还没设置检出根目录：请在 profile 的 cordis.patch.yml 里给 `projectsRoot` 一个绝对路径，否则不知道该克隆到哪里。',
+      'clone.done': '已克隆到 {path}。',
       'meta.assets': '{count} 个资产',
       'meta.path': '路径',
       'meta.scopes': '权限',
@@ -377,8 +385,10 @@ window.__ModuleLoader__.load({
       'bili.credential.source': '凭据文件 {path}',
       'bili.credential.external': '这份凭据来自配置指定的外部文件（不是面板写入的）：{path}',
       'bili.signIn': '登录 B 站',
-      'bili.signIn.hint': '点一下会生成一个登录链接：用手机 B 站扫码，或在你已经登录 B 站的浏览器里打开并确认。这里会自动继续，不需要终端。',
-      'bili.openLogin': '打开登录页面',
+      'bili.signIn.hint': '点一下会生成一个二维码：用手机 B 站 App 扫，然后在手机上确认。这里会自动继续，不需要终端。扫不动就用下面粘贴的方式。',
+      'bili.qrLabel': 'B 站登录二维码',
+      'bili.qrHint': '用手机 B 站 App 扫码。二维码约 3 分钟后过期，过期就再点一次【登录 B 站】。',
+      'bili.qrTooLong': '这条登录链接太长，画不成二维码——请改用下面粘贴 SESSDATA 的方式。',
       'bili.waiting': '等待扫码…',
       'bili.waitingScanned': '已扫码，请在手机上确认…',
       'bili.signIn.done': '已登录：{uname}',
@@ -401,6 +411,7 @@ window.__ModuleLoader__.load({
       'bili.bind.placeholder': 'BV 号，如 BV1RopP6FEJp',
       'bili.bind.save': '绑定',
       'bili.bind.unbind': '解绑',
+      'bili.bind.locked': '已绑定：要换视频先【解绑】。',
       'bili.bind.done': '已绑定 {bvid}{baseline}',
       'bili.bind.baseline': '（基线 {tag}：只有之后发布的新版本会自动播报）',
       'bili.bind.baselineUnknown': '（读不到 Release 列表，绑定时刻之前的版本都按已公开处理）',
@@ -414,7 +425,10 @@ window.__ModuleLoader__.load({
       'bili.announce.confirm': '确认发送',
       'bili.announce.force': '仍然发送',
       'bili.announce.cancel': '取消',
-      'bili.announce.sent': '已发送到 {bvid} 的评论区（{tag}）。',
+      'bili.announce.sent': '已发送到 {bvid} 的评论区（{tag}），并且已经能公开读到。',
+      'bili.announce.unverified': 'B 站收下了这条评论（{bvid} · {tag}），但公开列表里读不到——可能还在审核，也可能已被移除。要重发就用【仍然发送】。',
+      'bili.visible.false': '已发送但读不到',
+      'bili.visible.hint': 'B 站接受了这条评论，但公开列表里读不到它（B 站原话：{code}）。审核中的和被移除的，从接口上看一模一样。可以用【仍然发送】重发。',
       'bili.announce.previewFailed': '预览失败：{reason}',
       'bili.repo.none': '这个仓库还没有绑定 B 站视频。',
       'bili.state.already': '{tag} 已经播报过了。',
@@ -534,6 +548,14 @@ window.__ModuleLoader__.load({
       'meta.version': 'local',
       'meta.expectedTag': 'expected tag {tag}',
       'meta.noLocal': 'no local path, so local state cannot be compared',
+      'clone.title': 'Local checkout',
+      'clone.why.none': 'There is no local checkout yet. Cloning one is what gives 提交, 构建 and 发布 something to act on — all three need a working tree.',
+      'clone.why.broken': 'The configured path is unusable ({path}): {reason}',
+      'clone.urlPlaceholder': 'Repository address, e.g. https://github.com/owner/repo.git',
+      'clone.action': 'Clone',
+      'clone.target': 'Will clone into {path}',
+      'clone.noRoot': 'No checkout root is set: give `projectsRoot` an absolute path in the profile\'s cordis.patch.yml, or there is nowhere to clone into.',
+      'clone.done': 'Cloned into {path}.',
       'meta.assets': '{count} assets',
       'meta.path': 'Path',
       'meta.scopes': 'Scopes',
@@ -711,8 +733,10 @@ window.__ModuleLoader__.load({
       'bili.credential.source': 'Credential file {path}',
       'bili.credential.external': 'This credential comes from the external file named in the config, not from this panel: {path}',
       'bili.signIn': 'Sign in to Bilibili',
-      'bili.signIn.hint': 'One click produces a sign-in link: scan it with the Bilibili app, or open it in a browser that is already signed in and confirm. This page continues by itself — no terminal needed.',
-      'bili.openLogin': 'Open the sign-in page',
+      'bili.signIn.hint': 'One click produces a code to scan with the Bilibili app, then confirm on the phone. This page continues by itself, with no terminal. If the code will not scan, paste the cookies instead.',
+      'bili.qrLabel': 'Bilibili sign-in code',
+      'bili.qrHint': 'Scan this with the Bilibili app. It expires after about three minutes; press 【Sign in to Bilibili】 again if it does.',
+      'bili.qrTooLong': 'This sign-in URL is too long to draw as a code — paste SESSDATA below instead.',
       'bili.waiting': 'Waiting to be scanned…',
       'bili.waitingScanned': 'Scanned — confirm it on your phone…',
       'bili.signIn.done': 'Signed in: {uname}',
@@ -735,6 +759,7 @@ window.__ModuleLoader__.load({
       'bili.bind.placeholder': 'BV id, e.g. BV1RopP6FEJp',
       'bili.bind.save': 'Bind',
       'bili.bind.unbind': 'Unbind',
+      'bili.bind.locked': 'Bound: press 【Unbind】 first to change the video.',
       'bili.bind.done': 'Bound {bvid}{baseline}',
       'bili.bind.baseline': ' (baseline {tag}: only releases published after this are announced automatically)',
       'bili.bind.baselineUnknown': ' (the release list could not be read, so everything published before now counts as already public)',
@@ -748,7 +773,10 @@ window.__ModuleLoader__.load({
       'bili.announce.confirm': 'Post it',
       'bili.announce.force': 'Post anyway',
       'bili.announce.cancel': 'Cancel',
-      'bili.announce.sent': 'Posted to the comments under {bvid} ({tag}).',
+      'bili.announce.sent': 'Posted to the comments under {bvid} ({tag}), and it reads back publicly.',
+      'bili.announce.unverified': 'Bilibili accepted this comment ({bvid} · {tag}) but the public listing does not serve it — it may still be in review, or it may have been removed. Use 【Send anyway】 to post it again.',
+      'bili.visible.false': 'posted, not readable',
+      'bili.visible.hint': 'Bilibili accepted this comment, but the public listing does not serve it (Bilibili said: {code}). A comment in review and a removed one are indistinguishable through the API. Use 【Send anyway】 to post it again.',
       'bili.announce.previewFailed': 'Preview failed: {reason}',
       'bili.repo.none': 'This repository has no video bound.',
       'bili.state.already': '{tag} has already been announced.',
@@ -857,6 +885,16 @@ window.__ModuleLoader__.load({
 /* The commit confirmation: a sentence, the file list, a message field, then the two
    buttons. A column, because the list wraps and a row would push the buttons off. */
 .dsc-commit { display: flex; flex-direction: column; gap: var(--dsc-gap); padding: var(--dsc-gap) 0; font-size: var(--dsc-fs-sm); }
+/* The sign-in code. White behind, black modules, fixed size whatever the theme is:
+   a QR is read by a camera, so it cannot follow a dark theme's colours the way the
+   rest of this panel does. */
+.dsc-scan { display: flex; flex-direction: column; gap: 6px; padding: var(--dsc-gap) 0; align-items: flex-start; }
+/* Sized for the WORST case the encoder can produce: version 10 is 57 modules across, so
+   220px leaves about 3.8px per module — and the common login URL is version 8 (49
+   modules, about 4.5px). A camera needs the modules to be separable, and the only person
+   who can check that is holding the phone. */
+.dsc-qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 4px; box-sizing: content-box; }
+.dsc-qr rect { fill: #000; }
 /* The console's own segment strip, inside its one Plugins tab. Left-aligned and with a
    rule under it, so it reads as "which part of this page" rather than as a second set
    of tabs floating in the middle: the dsc-bar rule alone would spread three buttons
@@ -1383,7 +1421,7 @@ window.__ModuleLoader__.load({
 
     /** One repository row, expandable into path, releases, runs and logs. */
     function RepoRow(props) {
-      const { t, data, busy, onAction, onBump, onCommit, onPublish, onUpdate, npm, onNpmPublish, bili, onBiliBind, onBiliPreview, onBiliAnnounce, logs, onLogs } = props
+      const { t, data, busy, onAction, onBump, onCommit, onClone, onPublish, onUpdate, npm, onNpmPublish, bili, onBiliBind, onBiliPreview, onBiliAnnounce, logs, onLogs } = props
       const [open, setOpen] = React.useState(false)
       /**
        * A draft release is the panel's one invisible outcome: it exists, it is not
@@ -1632,9 +1670,18 @@ window.__ModuleLoader__.load({
           ? h(
               'div',
               { className: 'dsc-detail' },
-              data.localPath === ''
-                ? h('span', null, t('meta.noLocal'))
-                : h('span', { className: 'dsc-mono' }, `${t('meta.path')} ${data.localPath}`),
+              /* No usable working tree: say where one would go and offer to fetch it.
+                 Everything else on this page — 提交, 构建, 发布, the dirty chip — acts on
+                 a checkout, so this is the step that makes the rest of the row real. */
+              local.available === true
+                ? h('span', { className: 'dsc-mono' }, `${t('meta.path')} ${data.localPath}`)
+                : h(CloneCheckout, {
+                    t,
+                    data,
+                    local,
+                    busy,
+                    onClone: (repo, url) => { void onClone(repo, url) },
+                  }),
               data.problems.length > 0 ? h('div', { className: 'dsc-warn' }, data.problems.join(' · ')) : null,
 
               /* Why 发布 cannot work, and what would make it work. Both notes are
@@ -2244,6 +2291,35 @@ window.__ModuleLoader__.load({
         [loadOverview, setError, t],
       )
 
+      /**
+       * Fetch a working tree for a repository that has none.
+       *
+       * The address is whatever the field holds — the Host derives one when the panel
+       * opens, and a person may have replaced it with a fork or a private remote.
+       */
+      const onClone = React.useCallback(
+        async (data, url) => {
+          const key = `clone:${data.repo}`
+          setBusy(key)
+          setNotice(null)
+          setError(null)
+          const result = await postJson('/clone', { repo: data.repo, url }, ACTION_TIMEOUT_MS)
+          setBusy('')
+          if (!result.ok) {
+            setError('timeout')
+            return
+          }
+          if (!result.response.ok || result.payload?.ok !== true) {
+            setError(t('state.actionFailed', { reason: result.payload?.message ?? `HTTP ${String(result.response.status)}` }))
+            await loadOverview({ force: true })
+            return
+          }
+          setNotice(t('clone.done', { path: String(result.payload.value?.path ?? '') }))
+          await loadOverview({ force: true })
+        },
+        [loadOverview, setError, t],
+      )
+
       /**
        * Install the release into this profile, then ask about the restart.
        *
@@ -2490,7 +2566,14 @@ window.__ModuleLoader__.load({
             return null
           }
           const value = result.payload.value ?? {}
-          setNotice(t('bili.announce.sent', { bvid: String(value.bvid ?? ''), tag: String(value.tag ?? '') }))
+          /*
+           * Bilibili accepted it; that is not the same as a reader finding it. The Host
+           * now looks the comment back up before answering, so the panel can say which of
+           * the two happened instead of asserting the cheerful one.
+           */
+          setNotice(value.visible === false
+            ? t('bili.announce.unverified', { bvid: String(value.bvid ?? ''), tag: String(value.tag ?? '') })
+            : t('bili.announce.sent', { bvid: String(value.bvid ?? ''), tag: String(value.tag ?? '') }))
           await loadBili({ force: true })
           return value
         },
@@ -2774,6 +2857,7 @@ window.__ModuleLoader__.load({
                 onAction,
                 onBump: () => onBump(data),
                 onCommit: (row, message) => { void onCommit(row, message) },
+                onClone: (row, url) => { void onClone(row, url) },
                 onPublish: (tag) => onPublish(data.repo, tag),
                 onUpdate: () => { void onUpdate(data) },
                 npm: npmByRepo.get(data.repo) ?? null,
@@ -2795,6 +2879,7 @@ window.__ModuleLoader__.load({
                 onAction,
                 onBump: () => {},
                 onCommit: () => {},
+                onClone: () => {},
                 onPublish: () => {},
                 logs: null,
                 onLogs: async () => {},
@@ -3142,6 +3227,12 @@ window.__ModuleLoader__.load({
       }, [confirmingSignOut, onChanged, post, setNotice, t])
 
       const running = login.state === 'waiting' || login.state === 'scanned'
+      /* Encoded once per URL: the panel re-renders on every poll, and building the
+         matrix is the only expensive thing on this screen. */
+      const qr = React.useMemo(
+        () => (typeof login.url === 'string' && login.url !== '' ? qrFor(login.url) : null),
+        [login.url],
+      )
       React.useEffect(() => {
         if (!running) return undefined
         let cancelled = false
@@ -3170,6 +3261,13 @@ window.__ModuleLoader__.load({
 
       if (credential === null) return null
       const state = String(credential.state ?? 'none')
+      /**
+       * A credential that answered the account endpoint. Everything below that exists
+       * to GET one — the scan prompt, the paste field and their hints — is pointless
+       * once there is one, and showing it anyway makes the page argue with its own
+       * status line. The only action left is to stop being signed in.
+       */
+      const ready = state === 'ready'
       const stateText = (() => {
         if (state === 'ready') {
           return credential.account?.uname
@@ -3204,62 +3302,166 @@ window.__ModuleLoader__.load({
             ? h('span', { className: 'dsc-quiet' }, t('bili.credential.external', { path: String(credential.configuredPath ?? '') }))
             : null,
 
-          running
+          /*
+           * The ways to OBTAIN a credential are for not having one, and a signed-in page
+           * that still says 登录 B 站 — directly under 已登录：<name> — is the panel
+           * contradicting itself. It did exactly that: this block was gated on "is a
+           * sign-in running", never on the credential, so a fresh sign-in left the
+           * invitation to sign in again on screen as if nothing had happened.
+           *
+           * `running` still wins, because a sign-in that is mid-flight should show its
+           * code even in the instant before the credential lands.
+           */
+          ready
+            ? null
+            : running
+              ? h(
+                  React.Fragment,
+                  null,
+                  /*
+                   * The code itself. The sign-in hands back a URL whose whole purpose is
+                   * to be SCANNED, and drawing it here is what makes "scan it with the
+                   * phone" true rather than merely stated.
+                   */
+                  qr === null
+                    ? h('span', { className: 'dsc-quiet' }, login.url ? t('bili.qrTooLong') : null)
+                    : h(
+                        'div',
+                        { className: 'dsc-scan' },
+                        h(QrCode, { code: qr, label: t('bili.qrLabel') }),
+                        h('span', { className: 'dsc-quiet' }, t('bili.qrHint')),
+                      ),
+                  h(
+                    'div',
+                    { className: 'dsc-setup-line' },
+                    h('span', { className: 'dsc-grow' }, login.state === 'scanned' ? t('bili.waitingScanned') : t('bili.waiting')),
+                    /*
+                     * No "open the sign-in page" button. That URL is the H5 page for a
+                     * PHONE, and opening it in a desktop browser offers the Bilibili app's
+                     * APK instead of a sign-in — a download, not a login. The code above is
+                     * the way through; the paste route below is the fallback.
+                     */
+                    h(Btn, { kind: 'quiet', disabled: busy !== '', onClick: () => { void cancel() } }, t('bili.cancelSignIn')),
+                  ),
+                )
+              : h(
+                  'div',
+                  { className: 'dsc-setup-line' },
+                  h(Btn, { kind: 'primary', disabled: busy !== '', onClick: () => { void start() } }, busy === 'bili-login' ? '…' : t('bili.signIn')),
+                  h('span', { className: 'dsc-quiet' }, t('bili.signIn.hint')),
+                ),
+          /* Signed in: the one action left is to stop being signed in, which is also how
+             someone switches accounts. */
+          ready
             ? h(
                 'div',
                 { className: 'dsc-setup-line' },
-                h('span', { className: 'dsc-grow' }, login.state === 'scanned' ? t('bili.waitingScanned') : t('bili.waiting')),
-                login.url
-                  ? h(Btn, { disabled: busy !== '', onClick: () => globalThis.open(String(login.url), '_blank', 'noopener,noreferrer') }, t('bili.openLogin'))
-                  : null,
-                h(Btn, { kind: 'quiet', disabled: busy !== '', onClick: () => { void cancel() } }, t('bili.cancelSignIn')),
+                h(Btn, { kind: 'quiet', disabled: busy !== '', onClick: () => { void signOut() } }, confirmingSignOut ? t('bili.signOut.confirm') : t('bili.signOut')),
               )
+            : null,
+
+          ready
+            ? null
             : h(
-                'div',
-                { className: 'dsc-setup-line' },
-                h(Btn, { kind: 'primary', disabled: busy !== '', onClick: () => { void start() } }, busy === 'bili-login' ? '…' : t('bili.signIn')),
-                h('span', { className: 'dsc-quiet' }, t('bili.signIn.hint')),
+                React.Fragment,
+                null,
+                h('span', { className: 'dsc-setup-strong' }, t('bili.paste.title')),
+                h('span', { className: 'dsc-quiet' }, t('bili.paste.hint')),
               ),
-          state === 'ready'
-            ? h(
+          ready
+            ? null
+            : h(
                 'div',
                 { className: 'dsc-setup-line' },
-                h(Btn, { kind: 'quiet', disabled: busy !== '', onClick: () => { void signOut() } }, confirmingSignOut ? t('bili.signOut.confirm') : t('bili.signOut')),
-              )
-            : null,
+                h('input', {
+                  className: 'dsc-input',
+                  type: 'password',
+                  autoComplete: 'off',
+                  spellCheck: 'false',
+                  placeholder: t('bili.paste.sessdata'),
+                  'aria-label': t('bili.paste.sessdata'),
+                  value: sessdata,
+                  onChange: (event) => setSessdata(String(event?.target?.value ?? '')),
+                }),
+                h('input', {
+                  className: 'dsc-input',
+                  type: 'password',
+                  autoComplete: 'off',
+                  spellCheck: 'false',
+                  placeholder: t('bili.paste.csrf'),
+                  'aria-label': t('bili.paste.csrf'),
+                  value: csrf,
+                  onChange: (event) => setCsrf(String(event?.target?.value ?? '')),
+                }),
+                h(Btn, {
+                  kind: 'primary',
+                  disabled: busy !== '' || sessdata.trim() === '' || csrf.trim() === '',
+                  onClick: () => { void save() },
+                }, busy === 'bili-paste' ? '…' : t('bili.paste.save')),
+              ),
+        ),
+      )
+    }
 
-          h('span', { className: 'dsc-setup-strong' }, t('bili.paste.title')),
-          h('span', { className: 'dsc-quiet' }, t('bili.paste.hint')),
-          h(
-            'div',
-            { className: 'dsc-setup-line' },
-            h('input', {
-              className: 'dsc-input',
-              type: 'password',
-              autoComplete: 'off',
-              spellCheck: 'false',
-              placeholder: t('bili.paste.sessdata'),
-              'aria-label': t('bili.paste.sessdata'),
-              value: sessdata,
-              onChange: (event) => setSessdata(String(event?.target?.value ?? '')),
-            }),
-            h('input', {
-              className: 'dsc-input',
-              type: 'password',
-              autoComplete: 'off',
-              spellCheck: 'false',
-              placeholder: t('bili.paste.csrf'),
-              'aria-label': t('bili.paste.csrf'),
-              value: csrf,
-              onChange: (event) => setCsrf(String(event?.target?.value ?? '')),
-            }),
-            h(Btn, {
-              kind: 'primary',
-              disabled: busy !== '' || sessdata.trim() === '' || csrf.trim() === '',
-              onClick: () => { void save() },
-            }, busy === 'bili-paste' ? '…' : t('bili.paste.save')),
-          ),
+    /**
+     * Where a working tree would go, and the button that fetches one.
+     *
+     * A repository can be registered without being cloned, and then every action this
+     * console offers is unavailable for it — 提交 has nothing to commit, 构建 and 发布
+     * act on what is on GitHub rather than on this disk, and the whole local column
+     * reads as broken. So the panel answers the one question that unblocks all of that:
+     * where is it, and shall I fetch it.
+     *
+     * The address comes pre-filled from the Host, which derives it from the repository
+     * name (`cloneUrl`) — being asked to paste the clone URL of a repository the Host
+     * can already name is exactly the kind of step this console exists to remove. It
+     * stays editable, because the derivation is a convenience and not a fact: a fork, a
+     * private remote or a second remote is a real thing.
+     */
+    function CloneCheckout(props) {
+      const { t, data, local, busy, onClone } = props
+      const [url, setUrl] = React.useState(String(data.cloneUrl ?? ''))
+      React.useEffect(() => {
+        setUrl(String(data.cloneUrl ?? ''))
+      }, [data.cloneUrl])
+
+      const root = String(data.checkoutRoot ?? '')
+      const name = String(data.repo ?? '').split('/').pop()
+      const separator = root.endsWith('/') || root.endsWith('\\') ? '' : '\\'
+      const target = root === '' ? '' : `${root}${separator}${name}`
+      const why = data.localPath === ''
+        ? t('clone.why.none')
+        : t('clone.why.broken', { path: String(data.localPath), reason: String(local?.reason ?? '') })
+
+      return h(
+        'div',
+        { className: 'dsc-sub' },
+        h('span', { className: 'dsc-setup-strong' }, t('clone.title')),
+        h('span', { className: 'dsc-quiet' }, why),
+        h(
+          'div',
+          { className: 'dsc-line' },
+          h('input', {
+            className: 'dsc-input',
+            type: 'text',
+            spellCheck: 'false',
+            placeholder: t('clone.urlPlaceholder'),
+            'aria-label': t('clone.urlPlaceholder'),
+            value: url,
+            onChange: (event) => setUrl(String(event?.target?.value ?? '').trim()),
+          }),
+          h(Btn, {
+            kind: 'primary',
+            disabled: busy !== '' || url === '' || root === '',
+            onClick: () => onClone(data, url),
+          }, busy === `clone:${data.repo}` ? '…' : t('clone.action')),
         ),
+        /* Set where it will land, or say what is missing to be able to answer that at
+           all. A clone that silently picks a directory is a clone someone has to go and
+           find afterwards. */
+        root === ''
+          ? h('span', { className: 'dsc-warn' }, t('clone.noRoot'))
+          : h('span', { className: 'dsc-quiet dsc-mono' }, t('clone.target', { path: target })),
       )
     }
 
@@ -3321,23 +3523,33 @@ window.__ModuleLoader__.load({
         h(
           'div',
           { className: 'dsc-line' },
-          h('input', {
-            className: 'dsc-input',
-            type: 'text',
-            spellCheck: 'false',
-            placeholder: t('bili.bind.placeholder'),
-            'aria-label': t('bili.bind.placeholder'),
-            value: draft,
-            onChange: (event) => setDraft(String(event?.target?.value ?? '').trim()),
-          }),
-          h(Btn, {
-            kind: binding === null ? 'primary' : undefined,
-            disabled: busy !== '' || draft.trim() === '',
-            onClick: () => { void onBind(data, draft.trim(), binding === null ? true : binding.auto !== false) },
-          }, busy === `bili-bind:${data.repo}` ? '…' : t('bili.bind.save')),
+          /*
+           * Bound is a state, not a draft. Editing a live binding in place would change
+           * which video a repository announces under, with the announcement history
+           * still pointing at the old one — so the field is only editable while there is
+           * nothing bound, and once there is, the single action left is 解绑. A wrong BV
+           * is therefore fixed by untying it first, which is also the only way the ledger
+           * and the binding stay consistent with each other.
+           */
           binding === null
-            ? null
+            ? h('input', {
+                className: 'dsc-input',
+                type: 'text',
+                spellCheck: 'false',
+                placeholder: t('bili.bind.placeholder'),
+                'aria-label': t('bili.bind.placeholder'),
+                value: draft,
+                onChange: (event) => setDraft(String(event?.target?.value ?? '').trim()),
+              })
+            : h('span', { className: 'dsc-mono dsc-bound' }, String(binding.bvid)),
+          binding === null
+            ? h(Btn, {
+                kind: 'primary',
+                disabled: busy !== '' || draft.trim() === '',
+                onClick: () => { void onBind(data, draft.trim(), true) },
+              }, busy === `bili-bind:${data.repo}` ? '…' : t('bili.bind.save'))
             : h(Btn, { kind: 'quiet', disabled: busy !== '', onClick: () => { void onBind(data, '', true) } }, t('bili.bind.unbind')),
+          binding === null ? null : h('span', { className: 'dsc-quiet' }, t('bili.bind.locked')),
           h('span', { className: 'dsc-grow' }, binding === null
             ? t('bili.repo.none')
             : bili?.video?.ok === true
@@ -3354,6 +3566,12 @@ window.__ModuleLoader__.load({
                 ? t('bili.announced.none')
                 : `${t('bili.chip.announced', { tag: String(last.tag) })}${last.url ? '' : ''}`),
               pendingTag !== null ? h(Chip, { state: 'warn' }, t('bili.chip.pending', { tag: pendingTag })) : null,
+              /* The comment exists as far as Bilibili is concerned, and not as far as a
+                 reader is — a distinction the ledger now records and the panel used to
+                 hide behind "已播报". */
+              last !== null && last.visible === false
+                ? h(Chip, { state: 'warn', title: t('bili.visible.hint', { code: String(last.visibleCode ?? '?') }) }, t('bili.visible.false'))
+                : null,
               last !== null && typeof last.url === 'string' && last.url !== ''
                 ? h(Btn, { kind: 'quiet', onClick: () => globalThis.open(String(last.url), '_blank', 'noopener,noreferrer') }, t('action.open'))
                 : null,
@@ -3425,6 +3643,419 @@ window.__ModuleLoader__.load({
      * is configuration plus a public record, and belongs beside the two credential
      * pages that already live here.
      */
+    /* ------------------------------------------------------------- QR code -- */
+    /*
+     * A QR encoder, because the Bilibili sign-in hands over a string a PHONE has to
+     * SCAN, and this half has nothing to draw one with: the client builtins are React,
+     * `ctx`, `host.call`, `styles` and `console`, and this plugin has no dependencies by
+     * design. The two ways out are both worse — an external QR image service would hand
+     * a live sign-in URL to a third party, and adding a package would put a dependency
+     * tree inside a plugin whose install story is "one tgz, no tree".
+     *
+     * Byte mode, error correction M, versions 1-10 (up to 213 bytes): enough for the
+     * ~130-byte login URL with room to spare, and small enough to be checked rather than
+     * trusted. Every table here was read out of a reference implementation instead of
+     * recalled, and `tests/client-render.mjs` compares the modules this produces against
+     * a matrix that reference produced, frozen into the test.
+     *
+     * The encoder is deliberately quiet about failure: a string that does not fit comes
+     * back as `null` and the caller shows the link instead of a wrong code.
+     */
+
+    /** Total codewords (data + EC) per version, 1-10. */
+    const QR_CODEWORDS = [26, 44, 70, 100, 134, 172, 196, 242, 292, 346]
+    /** EC codewords for the whole symbol, level M. */
+    const QR_EC_M = [10, 16, 26, 36, 48, 64, 72, 88, 110, 130]
+    /** Reed-Solomon blocks, level M. */
+    const QR_BLOCKS_M = [1, 1, 1, 2, 2, 4, 4, 4, 5, 5]
+
+    const QR_GF_EXP = new Uint8Array(512)
+    const QR_GF_LOG = new Uint8Array(256)
+    {
+      let value = 1
+      for (let i = 0; i < 255; i += 1) {
+        QR_GF_EXP[i] = value
+        QR_GF_LOG[value] = i
+        value <<= 1
+        if ((value & 0x100) !== 0) value ^= 0x11d
+      }
+      for (let i = 255; i < 512; i += 1) QR_GF_EXP[i] = QR_GF_EXP[i - 255]
+    }
+
+    const qrMultiply = (a, b) => (a === 0 || b === 0 ? 0 : QR_GF_EXP[QR_GF_LOG[a] + QR_GF_LOG[b]])
+
+    /** The generator polynomial of this degree, highest power first. */
+    function qrGenerator(degree) {
+      let poly = [1]
+      for (let i = 0; i < degree; i += 1) {
+        const next = new Array(poly.length + 1).fill(0)
+        for (let j = 0; j < poly.length; j += 1) {
+          next[j] ^= poly[j]
+          next[j + 1] ^= qrMultiply(poly[j], QR_GF_EXP[i])
+        }
+        poly = next
+      }
+      return poly
+    }
+
+    /** The EC codewords for one data block. */
+    function qrEcCodewords(block, ecCount) {
+      const generator = qrGenerator(ecCount)
+      const work = new Uint8Array(block.length + ecCount)
+      work.set(block)
+      for (let i = 0; i < block.length; i += 1) {
+        const factor = work[i]
+        if (factor === 0) continue
+        for (let j = 0; j < generator.length; j += 1) work[i + j] ^= qrMultiply(generator[j], factor)
+      }
+      return work.slice(block.length)
+    }
+
+    /** The smallest version that holds this many bytes, or null. */
+    function qrVersionFor(byteLength) {
+      for (let version = 1; version <= QR_CODEWORDS.length; version += 1) {
+        const countBits = version <= 9 ? 8 : 16
+        const capacityBits = (QR_CODEWORDS[version - 1] - QR_EC_M[version - 1]) * 8
+        if (4 + countBits + byteLength * 8 <= capacityBits) return version
+      }
+      return null
+    }
+
+    /** The final interleaved codeword stream for this text, or null if it does not fit. */
+    function qrCodewords(bytes) {
+      const version = qrVersionFor(bytes.length)
+      if (version === null) return null
+      const countBits = version <= 9 ? 8 : 16
+      const dataCodewords = QR_CODEWORDS[version - 1] - QR_EC_M[version - 1]
+      const dataBits = dataCodewords * 8
+      const bits = []
+      const push = (value, length) => {
+        for (let i = length - 1; i >= 0; i -= 1) bits.push((value >>> i) & 1)
+      }
+      push(0b0100, 4)
+      push(bytes.length, countBits)
+      for (const byte of bytes) push(byte, 8)
+      push(0, Math.min(4, dataBits - bits.length))
+      while (bits.length % 8 !== 0) bits.push(0)
+      let padIndex = 0
+      while (bits.length < dataBits) {
+        push(padIndex % 2 === 0 ? 0xec : 0x11, 8)
+        padIndex += 1
+      }
+      const data = new Uint8Array(dataCodewords)
+      for (let i = 0; i < dataCodewords; i += 1) {
+        let byte = 0
+        for (let b = 0; b < 8; b += 1) byte = (byte << 1) | bits[i * 8 + b]
+        data[i] = byte
+      }
+
+      const total = QR_CODEWORDS[version - 1]
+      const ecTotal = QR_EC_M[version - 1]
+      const blocks = QR_BLOCKS_M[version - 1]
+      const group2 = total % blocks
+      const group1 = blocks - group2
+      const dataInGroup1 = Math.floor(dataCodewords / blocks)
+      const ecCount = Math.floor(total / blocks) - dataInGroup1
+      const dataBlocks = []
+      const ecBlocks = []
+      let offset = 0
+      for (let b = 0; b < blocks; b += 1) {
+        const size = b < group1 ? dataInGroup1 : dataInGroup1 + 1
+        const block = data.slice(offset, offset + size)
+        dataBlocks.push(block)
+        ecBlocks.push(qrEcCodewords(block, ecCount))
+        offset += size
+      }
+      const out = new Uint8Array(total)
+      let index = 0
+      const maxData = dataInGroup1 + (group2 > 0 ? 1 : 0)
+      for (let i = 0; i < maxData; i += 1) {
+        for (const block of dataBlocks) if (i < block.length) out[index++] = block[i]
+      }
+      for (let i = 0; i < ecCount; i += 1) {
+        for (const block of ecBlocks) out[index++] = block[i]
+      }
+      return { version, codewords: out }
+    }
+
+    /** Centre coordinates of the alignment patterns, per the version. */
+    function qrAlignmentPositions(version) {
+      if (version === 1) return []
+      const count = Math.floor(version / 7) + 2
+      const step = version === 32 ? 26 : Math.ceil((version * 4 + 4) / (count * 2 - 2)) * 2
+      const positions = [6]
+      for (let pos = version * 4 + 10; positions.length < count; pos -= step) positions.splice(1, 0, pos)
+      return positions
+    }
+
+    const qrMaskBit = (pattern, row, col) => {
+      switch (pattern) {
+        case 0: return (row + col) % 2 === 0
+        case 1: return row % 2 === 0
+        case 2: return col % 3 === 0
+        case 3: return (row + col) % 3 === 0
+        case 4: return (Math.floor(row / 2) + Math.floor(col / 3)) % 2 === 0
+        case 5: return ((row * col) % 2) + ((row * col) % 3) === 0
+        case 6: return (((row * col) % 2) + ((row * col) % 3)) % 2 === 0
+        default: return (((row + col) % 2) + ((row * col) % 3)) % 2 === 0
+      }
+    }
+
+    /** The 15 format bits for level M and this mask, BCH-protected and XORed. */
+    function qrFormatBits(maskPattern) {
+      const data = (0b00 << 3) | maskPattern
+      let remainder = data << 10
+      for (let i = 14; i >= 10; i -= 1) {
+        if (((remainder >>> i) & 1) === 1) remainder ^= 0b10100110111 << (i - 10)
+      }
+      return ((data << 10) | remainder) ^ 0b101010000010010
+    }
+
+    /** The 18 version bits for version 7 and up. */
+    function qrVersionBits(version) {
+      let remainder = version << 12
+      for (let i = 17; i >= 12; i -= 1) {
+        if (((remainder >>> i) & 1) === 1) remainder ^= 0b1111100100101 << (i - 12)
+      }
+      return (version << 12) | remainder
+    }
+
+    /** One complete symbol, masked and with its format bits written. */
+    function qrBuildMatrix(codewords, version, maskPattern) {
+      const size = version * 4 + 17
+      const modules = Array.from({ length: size }, () => new Uint8Array(size))
+      const reserved = Array.from({ length: size }, () => new Uint8Array(size))
+      const put = (row, col, dark) => {
+        modules[row][col] = dark === true ? 1 : 0
+        reserved[row][col] = 1
+      }
+
+      const finder = (top, left) => {
+        for (let r = -1; r <= 7; r += 1) {
+          for (let c = -1; c <= 7; c += 1) {
+            const row = top + r
+            const col = left + c
+            if (row < 0 || row >= size || col < 0 || col >= size) continue
+            const ring = (r === 0 || r === 6) && c >= 0 && c <= 6
+            const side = (c === 0 || c === 6) && r >= 0 && r <= 6
+            const core = r >= 2 && r <= 4 && c >= 2 && c <= 4
+            put(row, col, ring || side || core)
+          }
+        }
+      }
+      finder(0, 0)
+      finder(0, size - 7)
+      finder(size - 7, 0)
+
+      for (let i = 8; i < size - 8; i += 1) {
+        put(6, i, i % 2 === 0)
+        put(i, 6, i % 2 === 0)
+      }
+
+      const alignment = qrAlignmentPositions(version)
+      for (const row of alignment) {
+        for (const col of alignment) {
+          const overlapsFinder = (row === 6 && col === 6) || (row === 6 && col === size - 7) || (row === size - 7 && col === 6)
+          if (overlapsFinder) continue
+          for (let r = -2; r <= 2; r += 1) {
+            for (let c = -2; c <= 2; c += 1) put(row + r, col + c, Math.max(Math.abs(r), Math.abs(c)) !== 1)
+          }
+        }
+      }
+
+      /* Reserve the format and version areas before the data goes in, so the data
+         placement skips them and the mask never touches them. */
+      for (let i = 0; i <= 8; i += 1) {
+        if (i !== 6) {
+          reserved[8][i] = 1
+          reserved[i][8] = 1
+        }
+      }
+      reserved[8][8] = 1
+      for (let i = 0; i < 8; i += 1) {
+        reserved[8][size - 1 - i] = 1
+        reserved[size - 1 - i][8] = 1
+      }
+      put(size - 8, 8, true)
+      if (version >= 7) {
+        for (let i = 0; i < 18; i += 1) {
+          const row = Math.floor(i / 3)
+          const col = size - 11 + (i % 3)
+          reserved[row][col] = 1
+          reserved[col][row] = 1
+        }
+      }
+
+      const totalBits = codewords.length * 8
+      let bitIndex = 0
+      let upward = true
+      for (let col = size - 1; col > 0; col -= 2) {
+        if (col === 6) col -= 1
+        for (let i = 0; i < size; i += 1) {
+          const row = upward ? size - 1 - i : i
+          for (const c of [col, col - 1]) {
+            if (reserved[row][c] === 1) continue
+            const bit = bitIndex < totalBits ? (codewords[bitIndex >> 3] >>> (7 - (bitIndex & 7))) & 1 : 0
+            modules[row][c] = bit
+            bitIndex += 1
+          }
+        }
+        upward = !upward
+      }
+
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) {
+          if (reserved[row][col] === 0 && qrMaskBit(maskPattern, row, col)) modules[row][col] ^= 1
+        }
+      }
+
+      /*
+       * The two format strips, and which bit goes where. They are not two copies laid
+       * out the same way: the strip beside the TOP-LEFT finder is the VERTICAL one
+       * (column 8, bits 0-7 climbing the corner then bits 8-14 up the bottom-left), and
+       * the other is the HORIZONTAL one (row 8, bits 0-7 running left from the
+       * bottom-right corner, then bit 8 and bits 9-14 back toward the corner). Getting
+       * this backwards produces a perfectly ordinary-looking symbol that no scanner
+       * reads — which is why it is checked against a reference matrix, not by eye.
+       */
+      const format = qrFormatBits(maskPattern)
+      for (let i = 0; i < 15; i += 1) {
+        const bit = ((format >>> i) & 1) === 1
+        if (i < 6) modules[i][8] = bit ? 1 : 0
+        else if (i < 8) modules[i + 1][8] = bit ? 1 : 0
+        else modules[size - 15 + i][8] = bit ? 1 : 0
+        if (i < 8) modules[8][size - i - 1] = bit ? 1 : 0
+        else if (i < 9) modules[8][7] = bit ? 1 : 0
+        else modules[8][14 - i] = bit ? 1 : 0
+      }
+      if (version >= 7) {
+        const info = qrVersionBits(version)
+        for (let i = 0; i < 18; i += 1) {
+          const bit = ((info >>> i) & 1) === 1 ? 1 : 0
+          const row = Math.floor(i / 3)
+          const col = size - 11 + (i % 3)
+          modules[row][col] = bit
+          modules[col][row] = bit
+        }
+      }
+      return { modules, size }
+    }
+
+    /** The spec's four penalty rules, used to pick the least confusing mask. */
+    function qrPenalty(modules, size) {
+      let penalty = 0
+      const at = (row, col) => modules[row][col]
+      for (let i = 0; i < size; i += 1) {
+        for (const vertical of [false, true]) {
+          let run = 1
+          for (let j = 1; j < size; j += 1) {
+            const previous = vertical ? at(j - 1, i) : at(i, j - 1)
+            const current = vertical ? at(j, i) : at(i, j)
+            if (current === previous) {
+              run += 1
+            } else {
+              if (run >= 5) penalty += 3 + (run - 5)
+              run = 1
+            }
+          }
+          if (run >= 5) penalty += 3 + (run - 5)
+        }
+      }
+      for (let row = 0; row < size - 1; row += 1) {
+        for (let col = 0; col < size - 1; col += 1) {
+          const first = at(row, col)
+          if (first === at(row, col + 1) && first === at(row + 1, col) && first === at(row + 1, col + 1)) penalty += 3
+        }
+      }
+      const patternA = [1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0]
+      const patternB = [0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1]
+      for (let i = 0; i < size; i += 1) {
+        for (let j = 0; j + 11 <= size; j += 1) {
+          for (const vertical of [false, true]) {
+            let matchesA = true
+            let matchesB = true
+            for (let k = 0; k < 11; k += 1) {
+              const value = vertical ? at(j + k, i) : at(i, j + k)
+              if (value !== patternA[k]) matchesA = false
+              if (value !== patternB[k]) matchesB = false
+            }
+            if (matchesA) penalty += 40
+            if (matchesB) penalty += 40
+          }
+        }
+      }
+      let dark = 0
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) dark += at(row, col) === 1 ? 1 : 0
+      }
+      const percent = (dark * 100) / (size * size)
+      penalty += Math.floor(Math.abs(percent - 50) / 5) * 10
+      return penalty
+    }
+
+    /** UTF-8 bytes without a dependency on `TextEncoder`, which a sandbox may not have. */
+    function qrUtf8(text) {
+      const bytes = []
+      for (const character of String(text)) {
+        const code = character.codePointAt(0)
+        if (code < 0x80) bytes.push(code)
+        else if (code < 0x800) bytes.push(0xc0 | (code >> 6), 0x80 | (code & 0x3f))
+        else if (code < 0x10000) bytes.push(0xe0 | (code >> 12), 0x80 | ((code >> 6) & 0x3f), 0x80 | (code & 0x3f))
+        else bytes.push(0xf0 | (code >> 18), 0x80 | ((code >> 12) & 0x3f), 0x80 | ((code >> 6) & 0x3f), 0x80 | (code & 0x3f))
+      }
+      return bytes
+    }
+
+    /**
+     * A QR code for this text, as horizontal runs of dark modules.
+     *
+     * Runs rather than one rect per module: a version-8 symbol has ~1000 dark modules
+     * and ~250 runs, and the panel redraws on every poll.
+     *
+     * @param {string} text - what the phone should read.
+     * @returns {{size: number, runs: Array<{row: number, col: number, width: number}>}|null}
+     */
+    function qrFor(text) {
+      const encoded = qrCodewords(qrUtf8(text))
+      if (encoded === null) return null
+      let best = null
+      for (let mask = 0; mask < 8; mask += 1) {
+        const candidate = qrBuildMatrix(encoded.codewords, encoded.version, mask)
+        const score = qrPenalty(candidate.modules, candidate.size)
+        if (best === null || score < best.score) best = { score, ...candidate }
+      }
+      const runs = []
+      for (let row = 0; row < best.size; row += 1) {
+        let col = 0
+        while (col < best.size) {
+          if (best.modules[row][col] === 0) {
+            col += 1
+            continue
+          }
+          let width = 1
+          while (col + width < best.size && best.modules[row][col + width] === 1) width += 1
+          runs.push({ row, col, width })
+          col += width
+        }
+      }
+      return { size: best.size, runs }
+    }
+
+    function QrCode(props) {
+      const code = props.code
+      return h(
+        'svg',
+        {
+          className: 'dsc-qr',
+          viewBox: `0 0 ${code.size} ${code.size}`,
+          role: 'img',
+          'aria-label': props.label,
+          shapeRendering: 'crispEdges',
+        },
+        ...code.runs.map((run, index) => h('rect', { key: `r${index}`, x: run.col, y: run.row, width: run.width, height: 1 })),
+      )
+    }
+
     function BilibiliPage(props) {
       const t = typeof props?.t === 'function' ? props.t : (key) => key
       const { bili, error, setError, loadBili } = useConsoleState()