@waterplus-ai/waterbuddy 0.1.17 → 0.1.34

package/README.md

@@ -8,9 +8,18 @@ unchanged.
 
 - WaterBuddy branding, favicon, and page title.
 - Water-industry assistant persona for internal users.
-- In-page WaterBuddy SSO QR-code login.
+- Login panel with two modes: WaterPlus "水务之窗" QR-code login and WaterPlus account login.
+- Account registration (email verification code) and password reset inside the same panel.
 - User profile and avatar display after login.
-- Xiaojia MCP access with the current SSO token attached by a local proxy.
+- Xiaojia MCP access with the current session token attached by a local proxy.
+
+## Sign-in modes
+
+The sidebar user entry opens one panel with `扫码登录` and `账号登录` tabs. The account tab mirrors the
+WaterPlus web sign-in contract: account and password login, `注册账号` with an emailed verification
+code, and `忘记密码？` password reset. The client only talks to local `/api/waterbuddy/*` routes; the
+Host performs every upstream call and keeps the token in process memory, so no credential or token
+reaches the browser bundle.
 
 ## Install
 

package/lib/client/index.js

@@ -63,14 +63,363 @@ window.__ModuleLoader__.load({
         : jsx('span', { style: { ...style, display: 'grid', placeItems: 'center', background: 'linear-gradient(135deg, #1d9bf0, #2563eb)', color: '#fff', fontSize: Math.max(14, size * 0.42), fontWeight: 700 }, children: user ? name.slice(0, 1) : '🔐' })
     }
 
+    function plainInputStyle() {
+      return { minWidth: 0, flex: '1 1 auto', height: 46, border: 0, outline: 'none', background: 'transparent', color: '#162033', fontSize: 14 }
+    }
+
+    function fieldIcon(text) {
+      return jsx('span', { 'aria-hidden': 'true', style: { flex: '0 0 auto', width: 18, textAlign: 'center', color: '#9aa5b4', fontSize: 13 }, children: text })
+    }
+
+    function errorBox(message, onRetry) {
+      return jsxs('div', { role: 'alert', style: { display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 12, padding: '9px 12px', borderRadius: 10, background: '#fef2f2', border: '1px solid #fecaca', color: '#b91c1c', fontSize: 12.5, lineHeight: '18px', textAlign: 'left' }, children: [
+        jsx('span', { 'aria-hidden': 'true', style: { flex: '0 0 auto' }, children: '⚠' }),
+        jsx('span', { style: { minWidth: 0, flex: '1 1 auto', wordBreak: 'break-word' }, children: message }),
+        onRetry ? jsx('button', { type: 'button', onClick: onRetry, style: { flex: '0 0 auto', border: 0, background: 'transparent', color: '#b91c1c', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', textDecoration: 'underline', padding: 0 }, children: '重试' }) : null,
+      ] })
+    }
+
+    function primaryButtonStyle(disabled) {
+      return { width: '100%', height: 46, border: 0, borderRadius: 10, background: disabled ? '#9dc2e8' : '#1677d2', color: '#fff', fontSize: 15, fontWeight: 600, cursor: disabled ? 'not-allowed' : 'pointer', transition: 'background .15s ease' }
+    }
+
+    function linkButtonStyle() {
+      return { border: 0, background: 'transparent', color: '#1677d2', fontSize: 12.5, cursor: 'pointer', padding: 0 }
+    }
+
+    function agreementNotice() {
+      const linkStyle = { color: '#1677d2', textDecoration: 'none' }
+      return jsxs('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'center', gap: 7, marginTop: 16, color: '#8a94a6', fontSize: 11.5, lineHeight: '17px', textAlign: 'left' }, children: [
+        jsx('input', { type: 'checkbox', checked: true, readOnly: true, tabIndex: -1, 'aria-label': '已阅读并同意服务协议和隐私政策', style: { flex: '0 0 auto', width: 13, height: 13, margin: '2px 0 0', accentColor: '#1677d2' } }),
+        jsxs('span', { style: { minWidth: 0 }, children: [
+          '已阅读并同意',
+          jsx('a', { href: 'https://ai.shuiwujia.com/agreement', target: '_blank', rel: 'noreferrer', style: linkStyle, children: '《服务协议》' }),
+          '和',
+          jsx('a', { href: 'https://ai.shuiwujia.com/privacy', target: '_blank', rel: 'noreferrer', style: linkStyle, children: '《隐私政策》' }),
+        ] }),
+      ] })
+    }
+
+    function passwordField(extra) {
+      return { display: 'flex', alignItems: 'center', gap: 8, height: 48, padding: '0 12px', border: '1px solid #e3e8ef', borderRadius: 10, background: '#f7f8fa', boxSizing: 'border-box', ...(extra || {}) }
+    }
+
+    function plainInputStyle() {
+      return { minWidth: 0, flex: '1 1 auto', height: 46, border: 0, outline: 'none', background: 'transparent', color: '#162033', fontSize: 14 }
+    }
+
+    function fieldIcon(text) {
+      return jsx('span', { 'aria-hidden': 'true', style: { flex: '0 0 auto', width: 18, textAlign: 'center', color: '#9aa5b4', fontSize: 13 }, children: text })
+    }
+
+    function errorBox(message) {
+      return jsxs('div', { role: 'alert', style: { display: 'flex', alignItems: 'flex-start', gap: 8, padding: '9px 12px', borderRadius: 10, background: '#fef2f2', border: '1px solid #fecaca', color: '#b91c1c', fontSize: 12.5, lineHeight: '18px', textAlign: 'left' }, children: [
+        jsx('span', { 'aria-hidden': 'true', style: { flex: '0 0 auto' }, children: '⚠' }),
+        jsx('span', { style: { minWidth: 0, flex: '1 1 auto', wordBreak: 'break-word' }, children: message }),
+      ] })
+    }
+
+    function primaryButtonStyle(disabled) {
+      return { width: '100%', height: 46, border: 0, borderRadius: 10, background: disabled ? '#9dc2e8' : '#1677d2', color: '#fff', fontSize: 15, fontWeight: 600, cursor: disabled ? 'not-allowed' : 'pointer', transition: 'background .15s ease' }
+    }
+
+    function linkButtonStyle() {
+      return { border: 0, background: 'transparent', color: '#1677d2', fontSize: 12.5, cursor: 'pointer', padding: 0 }
+    }
+
+    function agreementNotice() {
+      const linkStyle = { color: '#1677d2', textDecoration: 'none' }
+      return jsxs('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'center', gap: 7, color: '#8a94a6', fontSize: 11.5, lineHeight: '17px', textAlign: 'left' }, children: [
+        jsx('input', { type: 'checkbox', checked: true, readOnly: true, tabIndex: -1, 'aria-label': '已阅读并同意服务协议和隐私政策', style: { flex: '0 0 auto', width: 13, height: 13, margin: '2px 0 0', accentColor: '#1677d2' } }),
+        jsxs('span', { style: { minWidth: 0 }, children: [
+          '已阅读并同意',
+          jsx('a', { href: 'https://ai.shuiwujia.com/agreement', target: '_blank', rel: 'noreferrer', style: linkStyle, children: '《服务协议》' }),
+          '和',
+          jsx('a', { href: 'https://ai.shuiwujia.com/privacy', target: '_blank', rel: 'noreferrer', style: linkStyle, children: '《隐私政策》' }),
+        ] }),
+      ] })
+    }
+
+    function useCountdown() {
+      const { useEffect, useRef, useState } = require('react')
+      const [countdown, setCountdown] = useState(0)
+      const timer = useRef(null)
+      const stop = () => {
+        if (timer.current !== null) { clearInterval(timer.current); timer.current = null }
+      }
+      const start = () => {
+        stop()
+        setCountdown(60)
+        timer.current = setInterval(() => {
+          setCountdown(value => {
+            if (value <= 1) { stop(); return 0 }
+            return value - 1
+          })
+        }, 1000)
+      }
+      useEffect(() => stop, [])
+      return [countdown, start]
+    }
+
+    function QrLogin({ session, onRestart, onClose }) {
+      const { qrCode, status, error, loading } = session
+      const statusText = { WAITING: '等待扫码', DEALING: '已扫码，请在手机上确认', SUCCESS: '登录成功', EXPIRED: '二维码已过期' }[status] || status
+      const tone = error ? '#dc2626' : status === 'SUCCESS' ? '#16a34a' : '#64748b'
+      return jsxs('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }, children: [
+        jsx('div', { style: { fontSize: 13.5, color: '#7b8799' }, children: `使用${SSO.title}扫码，安全登录 WaterBuddy` }),
+        qrCode
+          ? jsx('img', { src: qrCode, alt: `${SSO.title}登录二维码`, style: { display: 'block', width: 206, height: 206, boxSizing: 'border-box', objectFit: 'contain', margin: '14px auto 10px', padding: 10, border: '1px solid #e5ebf3', borderRadius: 16, background: '#fff' } })
+          : jsx('div', { style: { width: 206, height: 206, boxSizing: 'border-box', margin: '14px auto 10px', display: 'grid', placeItems: 'center', border: '1px solid #e5ebf3', borderRadius: 16, background: '#f8fafc', color: '#7b8799', fontSize: 13 }, children: loading ? '二维码加载中…' : '二维码暂不可用' }),
+        jsx('div', { style: { minHeight: 22, color: tone, fontSize: 13 }, children: error || statusText || '请扫码登录' }),
+        jsxs('div', { style: { display: 'flex', gap: 10, justifyContent: 'center', marginTop: 14 }, children: [
+          jsx('button', { type: 'button', onClick: onRestart, disabled: loading, style: { height: 38, padding: '0 20px', border: 0, borderRadius: 10, background: '#1677d2', color: '#fff', fontSize: 13, fontWeight: 600, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? .65 : 1 }, children: '刷新二维码' }),
+          jsx('button', { type: 'button', onClick: onClose, style: { height: 38, padding: '0 20px', border: '1px solid #d9e1ec', borderRadius: 10, background: '#fff', color: '#475569', fontSize: 13, fontWeight: 600, cursor: 'pointer' }, children: '关闭' }),
+        ] }),
+      ] })
+    }
+
+    async function postAuth(path, payload) {
+      const response = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(body.error || '请求失败，请重试')
+      return body
+    }
+
+    function VerificationCodeField({ name, emailRef, sendPath, onError, onNotice }) {
+      const { useRef, useState } = require('react')
+      const codeRef = useRef(null)
+      const [countdown, startCountdown] = useCountdown()
+      const [sending, setSending] = useState(false)
+
+      const send = async () => {
+        const email = emailRef.current?.value?.trim() || ''
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return onError('请输入正确的邮箱')
+        setSending(true)
+        onError('')
+        if (onNotice) onNotice('')
+        try {
+          const body = await postAuth(sendPath, { email })
+          startCountdown()
+          if (onNotice) onNotice(body.message || '验证码已发送')
+        } catch (failure) {
+          onError(failure.message)
+        } finally {
+          setSending(false)
+        }
+      }
+
+      return jsxs('label', { style: passwordField({ padding: '0 6px 0 12px' }), children: [
+        fieldIcon('🛡'),
+        jsx('input', { ref: codeRef, name, inputMode: 'numeric', autoComplete: 'one-time-code', placeholder: '请输入验证码', style: plainInputStyle(), 'data-waterbuddy-code': 'true' }),
+        jsx('button', { type: 'button', disabled: countdown > 0 || sending, onClick: send, style: { flex: '0 0 auto', height: 36, padding: '0 14px', border: '1px solid #d9e1ec', borderRadius: 8, background: countdown > 0 || sending ? '#f1f5f9' : '#fff', color: countdown > 0 || sending ? '#9aa5b4' : '#1677d2', fontSize: 12.5, fontWeight: 600, cursor: countdown > 0 || sending ? 'not-allowed' : 'pointer' }, children: sending ? '发送中…' : countdown > 0 ? `${countdown}秒后重发` : '获取验证码' }),
+      ] })
+    }
+
+    function AccountLoginForm({ onLogin, onSwitch }) {
+      const { useRef, useState } = require('react')
+      const loginId = useRef(null)
+      const password = useRef(null)
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState('')
+
+      const submit = async event => {
+        if (event && event.preventDefault) event.preventDefault()
+        const id = loginId.current?.value?.trim() || ''
+        const secret = password.current?.value || ''
+        if (!id) return setError('请输入账号')
+        if (!secret) return setError('请输入密码')
+        setLoading(true); setError('')
+        try {
+          const body = await postAuth('/api/waterbuddy/auth/login', { loginId: id, password: secret })
+          return onLogin(body.user)
+        } catch (failure) {
+          setError(failure.message)
+        } finally {
+          setLoading(false)
+        }
+      }
+
+      return jsxs('form', { onSubmit: submit, style: { display: 'grid', gap: 14, textAlign: 'left' }, children: [
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('👤'),
+          jsx('input', { ref: loginId, name: 'loginId', type: 'text', autoComplete: 'username', placeholder: '请输入账号', style: plainInputStyle(), onKeyDown: event => { if (event.key === 'Enter') submit(event) } }),
+        ] }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('🔒'),
+          jsx('input', { ref: password, name: 'password', type: 'password', autoComplete: 'current-password', placeholder: '请输入密码', style: plainInputStyle(), onKeyDown: event => { if (event.key === 'Enter') submit(event) } }),
+        ] }),
+        jsx('div', { style: { marginTop: -4, textAlign: 'right' }, children: jsx('button', { type: 'button', onClick: () => onSwitch('password'), style: linkButtonStyle(), children: '忘记密码？' }) }),
+        error ? errorBox(error) : null,
+        jsx('button', { type: 'submit', disabled: loading, style: primaryButtonStyle(loading), children: loading ? '正在登录…' : '立即登录' }),
+        agreementNotice(),
+        jsxs('div', { style: { textAlign: 'center', color: '#8a94a6', fontSize: 12.5 }, children: [
+          '还没有账号？',
+          jsx('button', { type: 'button', onClick: () => onSwitch('register'), style: linkButtonStyle(), children: '注册账号' }),
+        ] }),
+      ] })
+    }
+
+    function RegisterForm({ onLogin, onSwitch }) {
+      const { useRef, useState } = require('react')
+      const email = useRef(null)
+      const code = useRef(null)
+      const password = useRef(null)
+      const name = useRef(null)
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState('')
+      const [notice, setNotice] = useState('')
+
+      const onCodeError = message => setError(message || '')
+      const onCodeNotice = message => setNotice(message || '')
+
+      const submit = async event => {
+        if (event && event.preventDefault) event.preventDefault()
+        const mail = email.current?.value?.trim() || ''
+        const verification = code.current?.value?.trim() || ''
+        const secret = password.current?.value || ''
+        const displayName = name.current?.value?.trim() || ''
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail)) return setError('请输入正确的邮箱')
+        if (!/^\d{4,6}$/.test(verification)) return setError('验证码格式不正确')
+        if (!secret) return setError('请输入密码')
+        setLoading(true); setError(''); setNotice('')
+        try {
+          const body = await postAuth('/api/waterbuddy/auth/register', { email: mail, verifyCode: verification, password: secret, ...(displayName ? { name: displayName } : {}) })
+          return onLogin(body.user, body.message || '注册成功')
+        } catch (failure) {
+          setError(failure.message)
+        } finally {
+          setLoading(false)
+        }
+      }
+
+      return jsxs('form', { onSubmit: submit, style: { display: 'grid', gap: 11, textAlign: 'left' }, children: [
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('✉'),
+          jsx('input', { ref: email, name: 'email', type: 'email', autoComplete: 'email', placeholder: '请输入邮箱', style: plainInputStyle() }),
+        ] }),
+        jsx(VerificationCodeField, { name: 'verifyCode', emailRef: email, sendPath: '/api/waterbuddy/auth/register/code', onError: onCodeError, onNotice: onCodeNotice }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('🔒'),
+          jsx('input', { ref: password, name: 'password', type: 'password', autoComplete: 'new-password', placeholder: '请输入密码', style: plainInputStyle() }),
+        ] }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('👤'),
+          jsx('input', { ref: name, name: 'name', type: 'text', placeholder: '请输入用户名（选填）', style: plainInputStyle() }),
+        ] }),
+        error ? errorBox(error) : null,
+        notice ? jsx('div', { style: { color: '#16a34a', fontSize: 12.5 }, children: notice }) : null,
+        jsxs('div', { style: { display: 'flex', gap: 10, marginTop: 2 }, children: [
+          jsx('button', { type: 'submit', disabled: loading, style: { ...primaryButtonStyle(loading), flex: '1 1 auto' }, children: loading ? '注册中…' : '注册账号' }),
+          jsx('button', { type: 'button', onClick: () => onSwitch('account'), 'aria-label': '返回登录', title: '返回登录', style: { flex: '0 0 auto', width: 46, height: 46, border: '1px solid #d9e1ec', borderRadius: 10, background: '#fff', color: '#475569', fontSize: 16, cursor: 'pointer' }, children: '←' }),
+        ] }),
+        agreementNotice(),
+      ] })
+    }
+
+    function PasswordResetForm({ onSwitch }) {
+      const { useRef, useState } = require('react')
+      const email = useRef(null)
+      const code = useRef(null)
+      const password = useRef(null)
+      const confirm = useRef(null)
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState('')
+      const [notice, setNotice] = useState('')
+
+      const onCodeError = message => setError(message || '')
+      const onCodeNotice = message => setNotice(message || '')
+
+      const submit = async event => {
+        if (event && event.preventDefault) event.preventDefault()
+        const mail = email.current?.value?.trim() || ''
+        const verification = code.current?.value?.trim() || ''
+        const secret = password.current?.value || ''
+        const repeated = confirm.current?.value || ''
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail)) return setError('请输入正确的邮箱')
+        if (!/^\d{4,6}$/.test(verification)) return setError('验证码格式不正确')
+        if (!secret) return setError('请输入新密码')
+        if (secret !== repeated) return setError('两次输入的密码不一致')
+        setLoading(true); setError(''); setNotice('')
+        try {
+          const body = await postAuth('/api/waterbuddy/auth/password/change', { email: mail, verifyCode: verification, password: secret })
+          setNotice(body.message || '密码修改成功')
+          onSwitch('account', { loginId: mail })
+        } catch (failure) {
+          setError(failure.message)
+        } finally {
+          setLoading(false)
+        }
+      }
+
+      return jsxs('form', { onSubmit: submit, style: { display: 'grid', gap: 11, textAlign: 'left' }, children: [
+        jsxs('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [
+          jsx('strong', { style: { color: '#162033', fontSize: 14 }, children: '重置密码' }),
+          jsx('button', { type: 'button', onClick: () => onSwitch('account'), style: linkButtonStyle(), children: '← 返回登录' }),
+        ] }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('✉'),
+          jsx('input', { ref: email, name: 'email', type: 'email', autoComplete: 'email', placeholder: '请输入邮箱', style: plainInputStyle() }),
+        ] }),
+        jsx(VerificationCodeField, { name: 'verifyCode', emailRef: email, sendPath: '/api/waterbuddy/auth/password/code', onError: onCodeError, onNotice: onCodeNotice }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('🔒'),
+          jsx('input', { ref: password, name: 'password', type: 'password', autoComplete: 'new-password', placeholder: '请输入新密码', style: plainInputStyle() }),
+        ] }),
+        jsxs('label', { style: passwordField(), children: [
+          fieldIcon('🔒'),
+          jsx('input', { ref: confirm, name: 'confirmPassword', type: 'password', autoComplete: 'new-password', placeholder: '请再次输入新密码', style: plainInputStyle() }),
+        ] }),
+        error ? errorBox(error) : null,
+        notice ? jsx('div', { style: { color: '#16a34a', fontSize: 12.5 }, children: notice }) : null,
+        jsx('button', { type: 'submit', disabled: loading, style: { ...primaryButtonStyle(loading), marginTop: 2 }, children: loading ? '提交中…' : '修改密码' }),
+      ] })
+    }
+
+    function LoginPanel({ session, onLogin, onRestart, onClose }) {
+      const { useState } = require('react')
+      const [mode, setMode] = useState('qr')
+      const [loginId, setLoginId] = useState('')
+      const [notice, setNotice] = useState('')
+
+      const switchMode = (next, options) => {
+        setMode(next)
+        setNotice(options?.loginId || '')
+      }
+      const handleLogin = (user, message) => {
+        setNotice(message || '')
+        onLogin(user)
+      }
+      const tabs = [{ key: 'qr', title: '扫码登录' }, { key: 'account', title: '账号登录' }]
+      const activeTab = mode === 'qr' ? 'qr' : 'account'
+
+      return jsxs('div', { style: { padding: '18px 26px 24px' }, children: [
+        jsxs('div', { style: { display: 'flex', borderBottom: '1px solid #e8edf4' }, children: tabs.map(tab => jsxs('button', {
+          key: tab.key,
+          type: 'button',
+          onClick: () => switchMode(tab.key),
+          style: { position: 'relative', flex: '1 1 0', height: 46, border: 0, background: 'transparent', color: activeTab === tab.key ? '#162033' : '#7b8799', fontSize: 15, fontWeight: 600, cursor: 'pointer', transition: 'color .15s ease' },
+          children: [
+            tab.title,
+            activeTab === tab.key ? jsx('span', { style: { position: 'absolute', left: '50%', bottom: -1, width: 32, height: 3, marginLeft: -16, borderRadius: 2, background: '#1677d2' } }) : null,
+          ],
+        })) }),
+        notice ? jsx('div', { style: { marginTop: 12, padding: '8px 12px', borderRadius: 10, background: '#f0fdf4', border: '1px solid #bbf7d0', color: '#15803d', fontSize: 12.5, textAlign: 'center' }, children: notice }) : null,
+        jsx('div', { style: { paddingTop: 18, maxHeight: 'min(58vh, 470px)', overflowY: 'auto' }, children: mode === 'qr'
+          ? jsx(QrLogin, { session, onRestart, onClose })
+          : mode === 'register'
+            ? jsx(RegisterForm, { onLogin: handleLogin, onSwitch: switchMode })
+            : mode === 'password'
+              ? jsx(PasswordResetForm, { onSwitch: switchMode })
+              : jsx(AccountLoginForm, { onLogin: handleLogin, onSwitch: switchMode }) }),
+      ] })
+    }
+
     function UserAction({ wide }) {
-      const { useEffect, useState } = require('react')
+      const { useEffect, useRef, useState } = require('react')
       const [open, setOpen] = useState(false)
-      const [loading, setLoading] = useState(false)
-      const [qr, setQr] = useState(null)
-      const [status, setStatus] = useState('')
       const [user, setUser] = useState(null)
-      const [error, setError] = useState('')
+      const [llm, setLlm] = useState(null)
+      const [session, setSession] = useState({ qrCode: '', status: '', error: '', loading: false })
 
       useEffect(() => {
         let cancelled = false
@@ -80,54 +429,127 @@ window.__ModuleLoader__.load({
         return () => { cancelled = true }
       }, [])
 
+      // 额度轮询：依赖 user，登录/登出后会立刻重新取值（Host 此时已换过 key）。
+      useEffect(() => {
+        let cancelled = false
+        const load = async () => {
+          try {
+            const response = await fetch('/api/waterbuddy/llm/status')
+            const body = await response.json()
+            if (!cancelled) setLlm(body.llm || null)
+          } catch (_) {}
+        }
+        load()
+        const timer = setInterval(load, 15000)
+        return () => { cancelled = true; clearInterval(timer) }
+      }, [user])
+
+      const startLogin = async () => {
+        setSession({ qrCode: '', status: '二维码加载中', error: '', loading: true })
+        try {
+          const response = await fetch('/api/waterbuddy/auth/qr', { method: 'POST' })
+          const body = await response.json()
+          if (!response.ok) throw new Error(body.error || '二维码获取失败')
+          setSession({ qrCode: body.qrCode, status: 'WAITING', error: '', loading: false, sessionId: body.sessionId })
+        } catch (failure) {
+          setSession({ qrCode: '', status: '', error: failure.message, loading: false })
+        }
+      }
+
       useEffect(() => {
-        if (!open || !qr?.sessionId) return undefined
+        if (!open || !session.sessionId || user) return undefined
         let stopped = false
         let timer
         const poll = async () => {
           try {
-            const response = await fetch(`/api/waterbuddy/auth/status?sessionId=${encodeURIComponent(qr.sessionId)}`)
+            const response = await fetch(`/api/waterbuddy/auth/status?sessionId=${encodeURIComponent(session.sessionId)}`)
             const body = await response.json()
             if (stopped) return
-            setStatus(body.status || '')
             if (body.status === 'SUCCESS') {
               setUser(body.user || null)
-              setLoading(false)
+              setSession(current => ({ ...current, status: 'SUCCESS', error: '' }))
               return
             }
             if (body.status === 'EXPIRED') {
-              setError('二维码已过期，请重新获取')
-              setLoading(false)
+              setSession(current => ({ ...current, status: 'EXPIRED', error: '二维码已过期，请重新获取' }))
               return
             }
+            setSession(current => ({ ...current, status: body.status || 'WAITING' }))
           } catch (_) {
-            if (!stopped) setError('查询扫码状态失败，请重试')
+            if (!stopped) setSession(current => ({ ...current, error: '查询扫码状态失败，请重试' }))
           }
           if (!stopped) timer = setTimeout(poll, 2000)
         }
         poll()
         return () => { stopped = true; if (timer) clearTimeout(timer) }
-      }, [open, qr])
+      }, [open, session.sessionId, user])
 
-      const startLogin = async () => {
-        setLoading(true); setError(''); setStatus('二维码加载中'); setQr(null)
-        try {
-          const response = await fetch('/api/waterbuddy/auth/qr', { method: 'POST' })
-          const body = await response.json()
-          if (!response.ok) throw new Error(body.error || '二维码获取失败')
-          setQr(body); setStatus('等待扫码')
-        } catch (failure) {
-          setError(failure.message); setLoading(false)
+      const openPanel = () => { setOpen(true); if (!user && !session.sessionId) startLogin() }
+      // 额度耗尽是**主动**提示：模型调用由 Harness 自己发起，插件看不到那次 403
+      // （harness 还会把它归类成「API 密钥无效」，文案完全误导），只能靠额度轮询
+      // 自己发现并把登录面板推给用户。
+      //
+      // 必须走 openPanel 而不是裸 setOpen：裸开会得到一个「二维码暂不可用」的空面板，
+      // 因为扫码会话根本没发起（实测踩过）。
+      const exhaustedNotified = useRef(false)
+      useEffect(() => {
+        if (!llm || llm.managesQuota !== true || user) {
+          exhaustedNotified.current = false
+          return
         }
-      }
-
-      const openPanel = () => { setOpen(true); if (!user) startLogin() }
-      const logout = async () => { await fetch('/api/waterbuddy/logout', { method: 'POST' }); setUser(null); setOpen(false) }
-      const statusText = { WAITING: '等待扫码', DEALING: '已扫码，请在手机上确认', SUCCESS: '登录成功', EXPIRED: '二维码已过期' }[status] || status
+        if (llm.exhausted === true && !exhaustedNotified.current) {
+          exhaustedNotified.current = true
+          openPanel()
+          return
+        }
+        if (llm.exhausted !== true) exhaustedNotified.current = false
+      }, [llm, user])
+      const logout = async () => { await fetch('/api/waterbuddy/logout', { method: 'POST' }); setUser(null); setOpen(false); setSession({ qrCode: '', status: '', error: '', loading: false }) }
       const name = userName(user)
-      const account = user?.loginId || (user?.id ? `${user.id.slice(0, 8)}…` : '水务之窗账号')
-      const isAdmin = user?.isAdmin === 1 || user?.isAdmin === true
       const buttonStyle = { borderRadius: 10, padding: '9px 18px', fontSize: 13, fontWeight: 600, cursor: 'pointer' }
+      // 余额单位是 sub2api 的美元，不是人民币（见 SUB2API-TOKEN-QUOTA-PLAN §2）。
+      const balanceText = `$${Number(llm?.balance || 0).toFixed(2)}`
+      // 用户把默认模型换成别人的提供方时，消耗的不是我们的额度，一律不展示额度。
+      const managesQuota = llm?.managesQuota === true
+      const exhausted = managesQuota && llm?.exhausted === true
+      // 未登录时展示试用额度，登录后展示账号额度；耗尽一律优先提示
+      const subtitle = !managesQuota
+        ? (user ? '水务之窗' : '扫码或账号登录')
+        : exhausted
+          ? '额度已用完'
+          : (user ? `额度 ${balanceText}` : `试用额度 ${balanceText}`)
+
+      function userPanel() {
+        const account = user?.loginId || (user?.id ? `${String(user.id).slice(0, 8)}…` : '水务之窗账号')
+        const isAdmin = user?.isAdmin === 1 || user?.isAdmin === true
+        return jsxs(Fragment, { children: [
+          jsx('div', { style: { position: 'relative', padding: '28px 28px 44px', textAlign: 'center', color: '#fff', background: 'linear-gradient(135deg, #0f6fd6 0%, #1d9bf0 58%, #38bdf8 100%)' }, children: [
+            jsx('button', { type: 'button', onClick: () => setOpen(false), 'aria-label': '关闭', style: { position: 'absolute', top: 14, right: 16, width: 30, height: 30, border: 0, borderRadius: '50%', background: 'rgba(255,255,255,.18)', color: '#fff', fontSize: 20, lineHeight: 1, cursor: 'pointer' }, children: '×' }),
+            jsx('div', { style: { fontSize: 12, opacity: .82, letterSpacing: 1 }, children: 'WATERBUDDY' }),
+            jsx('div', { style: { marginTop: 8, fontSize: 15, fontWeight: 600 }, children: 'WaterBuddy' }),
+            jsx('div', { style: { position: 'absolute', left: '50%', bottom: -35, transform: 'translateX(-50%)', padding: 5, borderRadius: '50%', background: '#fff', boxShadow: '0 6px 18px rgba(15,23,42,.18)' }, children: jsx(UserAvatar, { user, size: 62 }) }),
+          ] }),
+          jsxs('div', { style: { padding: '48px 28px 26px', textAlign: 'center' }, children: [
+            jsx('h3', { style: { margin: 0, color: '#162033', fontSize: 22 }, children: name }),
+            jsx('p', { style: { margin: '7px 0 18px', color: '#7b8799', fontSize: 13 }, children: user.organization || user.department || '水务之窗' }),
+            jsxs('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, textAlign: 'left' }, children: [
+              jsxs('div', { style: { padding: '12px 14px', borderRadius: 12, background: '#f5f8fc' }, children: [
+                jsx('small', { style: { color: '#8a94a6', fontSize: 11 }, children: '账号' }),
+                jsx('div', { style: { marginTop: 4, color: '#334155', fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: account }),
+              ] }),
+              jsxs('div', { style: { padding: '12px 14px', borderRadius: 12, background: '#f5f8fc' }, children: [
+                jsx('small', { style: { color: '#8a94a6', fontSize: 11 }, children: '身份' }),
+                jsx('div', { style: { marginTop: 4, color: '#334155', fontSize: 13, fontWeight: 600 }, children: isAdmin ? '管理员' : '内部成员' }),
+              ] }),
+              managesQuota ? jsxs('div', { style: { padding: '12px 14px', borderRadius: 12, background: exhausted ? '#fff7ed' : '#f5f8fc' }, children: [
+                jsx('small', { style: { color: '#8a94a6', fontSize: 11 }, children: '剩余额度' }),
+                jsx('div', { style: { marginTop: 4, color: exhausted ? '#b45309' : '#334155', fontSize: 13, fontWeight: 600 }, children: balanceText }),
+              ] }) : null,
+            ] }),
+            jsx('button', { type: 'button', onClick: logout, style: { ...buttonStyle, width: '100%', marginTop: 18, border: '1px solid #d9e1ec', background: '#fff', color: '#475569' }, children: '退出登录' }),
+          ] }),
+        ] })
+      }
 
       return jsxs(Fragment, {
         children: [
@@ -136,13 +558,21 @@ window.__ModuleLoader__.load({
             onClick: openPanel,
             title: user ? name : '登录 WaterBuddy',
             style: { display: 'flex', alignItems: 'center', gap: 8, width: wide ? 'auto' : 40, maxWidth: wide ? 150 : 40, minHeight: 38, padding: wide ? '5px 9px 5px 6px' : 3, border: user ? '1px solid #e1eafa' : '1px solid transparent', borderRadius: 12, background: user ? '#f5f8ff' : 'transparent', color: 'var(--dsw-text-secondary, #586174)', cursor: 'pointer', textAlign: 'left', transition: 'background .15s ease, border-color .15s ease' },
-            children: [user ? jsx(UserAvatar, { user, size: 28 }) : jsx('img', { src: SSO.image, alt: SSO.title, style: { width: 28, height: 28, borderRadius: 8, objectFit: 'contain', padding: 2, boxSizing: 'border-box', flex: '0 0 auto', background: '#fff', border: '1px solid #dce9fb' } }), wide ? jsxs('span', { style: { minWidth: 0, display: 'grid', gap: 1 }, children: [jsx('strong', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12.5, lineHeight: '16px', color: 'var(--dsw-text-primary, #1f2937)' }, children: user ? name : SSO.title }), jsx('small', { style: { color: '#8a94a6', fontSize: 10.5, lineHeight: '14px' }, children: user ? '水务之窗' : '扫码登录' })] }) : null],
+            children: [user ? jsx(UserAvatar, { user, size: 28 }) : jsx('img', { src: SSO.image, alt: SSO.title, style: { width: 28, height: 28, borderRadius: 8, objectFit: 'contain', padding: 2, boxSizing: 'border-box', flex: '0 0 auto', background: '#fff', border: '1px solid #dce9fb' } }), wide ? jsxs('span', { style: { minWidth: 0, display: 'grid', gap: 1 }, children: [jsx('strong', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12.5, lineHeight: '16px', color: 'var(--dsw-text-primary, #1f2937)' }, children: user ? name : SSO.title }), jsx('small', { style: { color: exhausted ? '#b45309' : '#8a94a6', fontSize: 10.5, lineHeight: '14px' }, children: subtitle })] }) : null],
           }),
-          open ? jsx('div', { style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15, 23, 42, .42)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }, onClick: event => { if (event.target === event.currentTarget) setOpen(false) }, children: jsx('div', { style: { width: 420, maxWidth: 'calc(100vw - 32px)', borderRadius: 22, background: '#fff', overflow: 'hidden', boxShadow: '0 24px 80px rgba(15,23,42,.28)' }, children: user ? jsxs(Fragment, { children: [jsx('div', { style: { position: 'relative', padding: '28px 28px 44px', textAlign: 'center', color: '#fff', background: 'linear-gradient(135deg, #0f6fd6 0%, #1d9bf0 58%, #38bdf8 100%)' }, children: [jsx('button', { type: 'button', onClick: () => setOpen(false), 'aria-label': '关闭', style: { position: 'absolute', top: 14, right: 16, width: 30, height: 30, border: 0, borderRadius: '50%', background: 'rgba(255,255,255,.18)', color: '#fff', fontSize: 20, lineHeight: 1, cursor: 'pointer' }, children: '×' }), jsx('div', { style: { fontSize: 12, opacity: .82, letterSpacing: 1 }, children: 'WATERBUDDY' }), jsx('div', { style: { marginTop: 8, fontSize: 15, fontWeight: 600 }, children: 'WaterBuddy' }), jsx('div', { style: { position: 'absolute', left: '50%', bottom: -35, transform: 'translateX(-50%)', padding: 5, borderRadius: '50%', background: '#fff', boxShadow: '0 6px 18px rgba(15,23,42,.18)' }, children: jsx(UserAvatar, { user, size: 62 }) })] }), jsxs('div', { style: { padding: '48px 28px 26px', textAlign: 'center' }, children: [jsx('h3', { style: { margin: 0, color: '#162033', fontSize: 22 }, children: name }), jsx('p', { style: { margin: '7px 0 18px', color: '#7b8799', fontSize: 13 }, children: user.organization || user.department || '水务之窗' }), jsxs('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, textAlign: 'left' }, children: [jsxs('div', { style: { padding: '12px 14px', borderRadius: 12, background: '#f5f8fc' }, children: [jsx('small', { style: { color: '#8a94a6', fontSize: 11 }, children: '账号' }), jsx('div', { style: { marginTop: 4, color: '#334155', fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: account })] }), jsxs('div', { style: { padding: '12px 14px', borderRadius: 12, background: '#f5f8fc' }, children: [jsx('small', { style: { color: '#8a94a6', fontSize: 11 }, children: '身份' }), jsx('div', { style: { marginTop: 4, color: '#334155', fontSize: 13, fontWeight: 600 }, children: isAdmin ? '管理员' : '内部成员' })] })] }), jsx('button', { type: 'button', onClick: logout, style: { ...buttonStyle, width: '100%', marginTop: 18, border: '1px solid #d9e1ec', background: '#fff', color: '#475569' }, children: '退出登录' })] })] }) : jsxs('div', { style: { padding: 28, textAlign: 'center' }, children: [jsx('button', { type: 'button', onClick: () => setOpen(false), 'aria-label': '关闭', style: { display: 'block', marginLeft: 'auto', width: 30, height: 30, border: 0, borderRadius: '50%', background: '#f1f5f9', color: '#64748b', fontSize: 20, lineHeight: 1, cursor: 'pointer' }, children: '×' }), jsx('img', { src: SSO.image, alt: SSO.title, style: { display: 'block', width: 52, height: 52, objectFit: 'contain', margin: '0 auto 12px' } }), jsx('h3', { style: { margin: '14px 0 6px', color: '#162033', fontSize: 21 }, children: 'WaterBuddy' }), jsx('p', { style: { margin: 0, color: '#7b8799', fontSize: 13 }, children: `使用${SSO.title}扫码，安全登录 WaterBuddy` }), qr?.qrCode ? jsx('img', { src: qr.qrCode, alt: '水务之窗登录二维码', style: { display: 'block', width: 220, height: 220, boxSizing: 'border-box', objectFit: 'contain', margin: '20px auto 12px', padding: 10, border: '1px solid #e5ebf3', borderRadius: 16, background: '#fff' } }) : jsx('div', { style: { width: 220, height: 220, boxSizing: 'border-box', margin: '20px auto 12px', display: 'grid', placeItems: 'center', border: '1px solid #e5ebf3', borderRadius: 16, background: '#f8fafc', color: '#7b8799', fontSize: 13 }, children: loading ? '二维码加载中…' : '二维码暂不可用' }), jsx('div', { style: { minHeight: 24, color: error ? '#dc2626' : status === 'SUCCESS' ? '#16a34a' : '#64748b', fontSize: 13 }, children: error || statusText || '请扫码登录' }), jsxs('div', { style: { display: 'flex', gap: 10, justifyContent: 'center', marginTop: 18 }, children: [jsx('button', { type: 'button', onClick: startLogin, disabled: loading, style: { ...buttonStyle, border: 0, background: '#1677d2', color: '#fff', opacity: loading ? .65 : 1 }, children: '刷新二维码' }), jsx('button', { type: 'button', onClick: () => setOpen(false), style: { ...buttonStyle, border: '1px solid #d9e1ec', background: '#fff', color: '#475569' }, children: '关闭' })] })] }) }) }) : null,
+          open ? jsx('div', { style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15, 23, 42, .42)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }, onClick: event => { if (event.target === event.currentTarget) setOpen(false) }, children: jsx('div', { style: { width: 420, maxWidth: 'calc(100vw - 32px)', borderRadius: 22, background: '#fff', overflow: 'hidden', boxShadow: '0 24px 80px rgba(15,23,42,.28)' }, children: user ? userPanel() : jsxs('div', { children: [
+            jsxs('div', { style: { position: 'relative', padding: '22px 26px 0', textAlign: 'center' }, children: [
+              jsx('button', { type: 'button', onClick: () => setOpen(false), 'aria-label': '关闭', style: { position: 'absolute', top: 14, right: 16, width: 30, height: 30, border: 0, borderRadius: '50%', background: '#f1f5f9', color: '#64748b', fontSize: 20, lineHeight: 1, cursor: 'pointer' }, children: '×' }),
+              jsx('img', { src: SSO.image, alt: SSO.title, style: { display: 'block', width: 52, height: 52, objectFit: 'contain', margin: '0 auto' } }),
+              jsx('h3', { style: { margin: '10px 0 4px', color: '#162033', fontSize: 21 }, children: 'WaterBuddy' }),
+              jsx('p', { style: { margin: 0, color: '#7b8799', fontSize: 12.5 }, children: '登录后同步水务之窗账号与知识库权限' }),
+              exhausted ? jsx('div', { style: { margin: '14px 26px 0', padding: '10px 12px', borderRadius: 10, background: '#fff7ed', border: '1px solid #fed7aa', color: '#b45309', fontSize: 12.5, lineHeight: 1.5 }, children: '试用额度已用完，登录后即可继续使用（额度升为账号档）' }) : null,
+            ] }),
+            jsx(LoginPanel, { session, onLogin: nextUser => setUser(nextUser || null), onRestart: startLogin, onClose: () => setOpen(false) }),
+          ] }) }) }) : null,
         ],
       })
     }
-
     function SkipWelcomeNotice({ complete }) {
       const { useEffect } = require('react')
       useEffect(() => {
@@ -175,10 +605,10 @@ window.__ModuleLoader__.load({
         const style = document.createElement('style')
         style.dataset.waterbuddy = 'sidebar-footer-layout'
         style.textContent = [
-          '.dshp-root.dshp-wide .dshp-footArea{flex-direction:row;align-items:center;gap:8px}',
-          '.dshp-root.dshp-wide .dshp-settingsArea{order:1;flex:0 0 auto;width:auto;min-width:0}',
-          '.dshp-root.dshp-wide .dshp-footerActions{order:2;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end}',
-          '.dshp-root.dshp-wide .dshp-footerActions>div{display:flex;justify-content:flex-end;min-width:0}',
+          '.dshp-panel.dshp-panel--wide .dshp-panel__foot-area{flex-direction:row;align-items:center;gap:8px}',
+          '.dshp-panel.dshp-panel--wide .dshp-panel__settings-area{order:1;flex:0 0 auto;width:auto;min-width:0}',
+          '.dshp-panel.dshp-panel--wide .dshp-panel__footer-actions{order:2;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end}',
+          '.dshp-panel.dshp-panel--wide .dshp-panel__footer-actions>div{display:flex;justify-content:flex-end;min-width:0}',
         ].join('')
         document.head.append(style)
         return () => { style.remove() }