@ljwei-stak/dsh-model-route-bot 0.66.4 → 0.67.0

package/apps/integration-client/notifications.css

@@ -0,0 +1,126 @@
+/*
+ * Notification centre styles. Colour lives in the --bp-notif-* tokens below and
+ * follows one appearance: light is the default, the dark block only names what
+ * changes. Body text stays on the high-contrast ink; the category tone paints
+ * the leading rail and icon only, so a status never trades readability for hue.
+ */
+html body[data-bot-product-ui] .bp-notifications {
+  --bp-notif-canvas: #f4f5f7;
+  --bp-notif-surface: #ffffff;
+  --bp-notif-inset: #eef0f3;
+  --bp-notif-hover: #e6e9ee;
+  --bp-notif-line: #dde1e8;
+  --bp-notif-ink: #252a33;
+  --bp-notif-muted: #5f6875;
+  --bp-notif-accent: #4a6484;
+  --bp-notif-accent-ink: #ffffff;
+  --bp-notif-focus: #4a6484;
+  --bp-notif-ok: #2e7d32;
+  --bp-notif-bad: #b3261e;
+  --bp-notif-urgent: #8a5a12;
+  --bp-notif-wait: #3f5d80;
+  --bp-notif-idle: #5f6875;
+  display: flex; flex-direction: column; min-height: 0; color: var(--bp-notif-ink);
+  background: var(--bp-notif-canvas);
+}
+html body[data-bot-product-ui][data-bp-appearance="dark"] .bp-notifications,
+html body[data-bot-product-ui][data-ds-dark-theme]:not([data-bp-appearance="light"]) .bp-notifications {
+  --bp-notif-canvas: #131519;
+  --bp-notif-surface: #1c1f24;
+  --bp-notif-inset: #232730;
+  --bp-notif-hover: #2a2f39;
+  --bp-notif-line: #333a45;
+  --bp-notif-ink: #e8eaee;
+  --bp-notif-muted: #aab2bd;
+  --bp-notif-accent: #a9c4e0;
+  --bp-notif-accent-ink: #131519;
+  --bp-notif-focus: #a9c4e0;
+  --bp-notif-ok: #7bd48a;
+  --bp-notif-bad: #f2b8b5;
+  --bp-notif-urgent: #f6c76b;
+  --bp-notif-wait: #a9c4e0;
+  --bp-notif-idle: #aab2bd;
+}
+
+html body[data-bot-product-ui] .bp-notifications-bar {
+  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
+  border-bottom: 1px solid var(--bp-notif-line); background: var(--bp-notif-surface);
+}
+html body[data-bot-product-ui] .bp-notifications-title { margin: 0; font-size: 15px; font-weight: 650; }
+html body[data-bot-product-ui] .bp-notifications-badge {
+  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
+  background: var(--bp-notif-bad); color: #ffffff; font-size: 12px; font-weight: 700;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+html body[data-bot-product-ui][data-bp-appearance="dark"] .bp-notifications-badge,
+html body[data-bot-product-ui][data-ds-dark-theme]:not([data-bp-appearance="light"]) .bp-notifications-badge { color: #131519; }
+html body[data-bot-product-ui] .bp-notifications-bar-actions { margin-left: auto; }
+html body[data-bot-product-ui] .bp-notifications-markall {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
+  border: 1px solid var(--bp-notif-line); border-radius: 8px; background: var(--bp-notif-inset);
+  color: var(--bp-notif-ink); font-size: 13px; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-notifications-markall:hover:not(:disabled) { background: var(--bp-notif-hover); }
+html body[data-bot-product-ui] .bp-notifications-markall:disabled { opacity: 0.5; cursor: default; }
+
+html body[data-bot-product-ui] .bp-notifications-note { margin: 0; padding: 20px 16px; color: var(--bp-notif-muted); font-size: 13px; }
+
+html body[data-bot-product-ui] .bp-notifications-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
+html body[data-bot-product-ui] .bp-notification {
+  position: relative; display: flex; align-items: stretch; gap: 4px;
+  background: var(--bp-notif-surface); border: 1px solid var(--bp-notif-line); border-radius: 10px;
+  border-left: 3px solid var(--bp-notif-idle);
+}
+html body[data-bot-product-ui] .bp-notification-ok { border-left-color: var(--bp-notif-ok); }
+html body[data-bot-product-ui] .bp-notification-bad { border-left-color: var(--bp-notif-bad); }
+html body[data-bot-product-ui] .bp-notification-urgent { border-left-color: var(--bp-notif-urgent); }
+html body[data-bot-product-ui] .bp-notification-wait { border-left-color: var(--bp-notif-wait); }
+html body[data-bot-product-ui] .bp-notification-ok .bp-notification-icon { color: var(--bp-notif-ok); }
+html body[data-bot-product-ui] .bp-notification-bad .bp-notification-icon { color: var(--bp-notif-bad); }
+html body[data-bot-product-ui] .bp-notification-urgent .bp-notification-icon { color: var(--bp-notif-urgent); }
+html body[data-bot-product-ui] .bp-notification-wait .bp-notification-icon { color: var(--bp-notif-wait); }
+html body[data-bot-product-ui] .bp-notification-idle .bp-notification-icon { color: var(--bp-notif-idle); }
+
+html body[data-bot-product-ui] .bp-notification-open {
+  flex: 1; display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 12px; min-height: 40px;
+  background: none; border: 0; border-radius: 8px; text-align: left; color: inherit; cursor: pointer; font: inherit;
+}
+html body[data-bot-product-ui] .bp-notification-open:hover { background: var(--bp-notif-hover); }
+html body[data-bot-product-ui] .bp-notification-icon { display: inline-flex; padding-top: 1px; }
+html body[data-bot-product-ui] .bp-notification-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+html body[data-bot-product-ui] .bp-notification-text { font-size: 14px; line-height: 1.35; }
+html body[data-bot-product-ui] .bp-notification-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bp-notif-muted); }
+html body[data-bot-product-ui] .bp-notification-new {
+  padding: 0 6px; border-radius: 999px; background: var(--bp-notif-accent); color: var(--bp-notif-accent-ink); font-size: 11px; font-weight: 700;
+}
+html body[data-bot-product-ui] .bp-notification-dot { width: 8px; height: 8px; margin-top: 14px; border-radius: 999px; background: var(--bp-notif-accent); flex: none; }
+html body[data-bot-product-ui] .bp-notification-read {
+  display: inline-flex; align-items: center; justify-content: center; width: 40px; flex: none;
+  border: 0; border-left: 1px solid var(--bp-notif-line); border-radius: 0 8px 8px 0;
+  background: none; color: var(--bp-notif-muted); cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-notification-read:hover { background: var(--bp-notif-hover); color: var(--bp-notif-ink); }
+
+html body[data-bot-product-ui] .bp-notifications-more {
+  margin: 4px 8px 12px; min-height: 36px; border: 1px solid var(--bp-notif-line); border-radius: 8px;
+  background: var(--bp-notif-surface); color: var(--bp-notif-ink); font-size: 13px; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-notifications-more:disabled { opacity: 0.6; cursor: default; }
+
+html body[data-bot-product-ui] .bp-notifications :is(button):focus-visible {
+  outline: 2px solid var(--bp-notif-focus); outline-offset: 1px;
+}
+
+/* A phone keeps every row full-width and comfortable at 375px. */
+@media (max-width: 640px) {
+  html body[data-bot-product-ui] .bp-notifications-bar { padding: 10px 12px; }
+  html body[data-bot-product-ui] .bp-notifications-list { padding: 6px; }
+  html body[data-bot-product-ui] .bp-notification-open { padding: 10px; }
+  html body[data-bot-product-ui] .bp-notifications-markall span { display: none; }
+}
+
+/* Touch: every control reaches a 40px target and nothing depends on hover. */
+@media (pointer: coarse) {
+  html body[data-bot-product-ui] .bp-notifications-markall { min-width: 40px; min-height: 40px; }
+  html body[data-bot-product-ui] .bp-notification-read { width: 44px; }
+}

package/apps/integration-client/pairing-qr.jsx

@@ -0,0 +1,79 @@
+import React,{useEffect,useRef,useState} from 'react'
+import jsQR from 'jsqr'
+import {parseSecureInvite} from '../../packages/orchestration/src/pairing-invite.mjs'
+
+export function readPairingPixels(data,width,height){
+  if(!(data instanceof Uint8ClampedArray)||!Number.isInteger(width)||!Number.isInteger(height)||width<1||height<1||width*height>4_000_000||data.length!==width*height*4)throw new Error('二维码图片尺寸无效。')
+  const code=jsQR(data,width,height,{inversionAttempts:'attemptBoth'})
+  if(!code)throw new Error('没有识别到二维码，请使用清晰完整的配对二维码。')
+  const invite=parseSecureInvite(code.data)
+  return JSON.stringify(invite)
+}
+
+/** Image decoding stays local. Camera access starts only after an explicit scan click. */
+export function PairingQrReader({onRead,disabled=false}){
+  const [scanning,setScanning]=useState(false),[error,setError]=useState(''),[reading,setReading]=useState(false)
+  const generation=useRef(0),video=useRef(null),camera=useRef(null),timer=useRef(null),dialog=useRef(null),trigger=useRef(null),imageInput=useRef(null),mounted=useRef(true),onReadRef=useRef(onRead)
+  onReadRef.current=onRead
+  const stop=()=>{generation.current++;clearTimeout(timer.current);timer.current=null;for(const track of camera.current?.getTracks?.()??[])track.stop();camera.current=null;if(video.current)video.current.srcObject=null}
+  const close=()=>{stop();setScanning(false);trigger.current?.focus()}
+  useEffect(()=>{mounted.current=true;return()=>{mounted.current=false;stop()}},[])
+  useEffect(()=>{if(disabled){stop();setScanning(false);setReading(false)}},[disabled])
+  useEffect(()=>{
+    const hidden=()=>{if(document.hidden){stop();setScanning(false)}}
+    document.addEventListener('visibilitychange',hidden);return()=>document.removeEventListener('visibilitychange',hidden)
+  },[])
+  useEffect(()=>{
+    if(!scanning)return
+    const active=++generation.current,canvas=document.createElement('canvas'),context=canvas.getContext('2d',{willReadFrequently:true})
+    const fail=message=>{if(mounted.current&&generation.current===active){stop();setError(message);setScanning(false);trigger.current?.focus()}}
+    const tick=()=>{
+      if(!mounted.current||generation.current!==active)return
+      const source=video.current
+      if(source?.readyState>=2&&source.videoWidth){
+        const scale=Math.min(1,1200/Math.max(source.videoWidth,source.videoHeight));canvas.width=Math.max(1,Math.round(source.videoWidth*scale));canvas.height=Math.max(1,Math.round(source.videoHeight*scale))
+        context.drawImage(source,0,0,canvas.width,canvas.height)
+        try{const value=readPairingPixels(context.getImageData(0,0,canvas.width,canvas.height).data,canvas.width,canvas.height);stop();setScanning(false);onReadRef.current(value);trigger.current?.focus();return}catch{}
+      }
+      timer.current=setTimeout(tick,180)
+    }
+    const start=async()=>{
+      try{
+        if(!context||!navigator.mediaDevices?.getUserMedia)throw new Error('当前环境无法开启摄像头，请改用二维码图片或邀请码。')
+        const stream=await navigator.mediaDevices.getUserMedia({audio:false,video:{facingMode:{ideal:'environment'},width:{ideal:1280}}})
+        if(!mounted.current||generation.current!==active){for(const track of stream.getTracks())track.stop();return}
+        camera.current=stream;video.current.srcObject=stream;await video.current.play()
+        if(generation.current===active)tick()
+      }catch(failure){fail(failure.name==='NotAllowedError'?'摄像头未获允许，可以改用二维码图片或邀请码。':String(failure.message??failure))}
+    }
+    dialog.current?.querySelector('button')?.focus();void start()
+    return()=>{if(generation.current===active)stop()}
+  },[scanning])
+  const image=async event=>{
+    const file=event.target.files?.[0];event.target.value='';if(!file)return
+    stop();setScanning(false);setReading(true);setError('');const active=generation.current
+    try{
+      if(file.size>10*1024*1024||!['image/png','image/jpeg','image/webp'].includes(file.type))throw new Error('请选择不超过 10 MB 的 PNG、JPEG 或 WebP 二维码图片。')
+      const bitmap=await createImageBitmap(file)
+      try{
+        if(!mounted.current||active!==generation.current)return
+        const scale=Math.min(1,1800/Math.max(bitmap.width,bitmap.height)),canvas=document.createElement('canvas')
+        canvas.width=Math.max(1,Math.round(bitmap.width*scale));canvas.height=Math.max(1,Math.round(bitmap.height*scale))
+        const context=canvas.getContext('2d',{willReadFrequently:true});if(!context)throw new Error('当前环境无法读取图片，请粘贴邀请码。')
+        context.drawImage(bitmap,0,0,canvas.width,canvas.height)
+        const value=readPairingPixels(context.getImageData(0,0,canvas.width,canvas.height).data,canvas.width,canvas.height)
+        onReadRef.current(value)
+      }finally{bitmap.close()}
+    }catch(failure){if(mounted.current&&active===generation.current)setError(failure.code?'这不是受支持的设备配对二维码。':String(failure.message??failure))}
+    finally{if(mounted.current&&active===generation.current)setReading(false)}
+  }
+  return <div className="bp-pairing-reader"><div className="bp-actions"><button ref={trigger} type="button" disabled={disabled||reading} onClick={()=>{setError('');setScanning(true)}}>扫描配对二维码</button>
+    <button type="button" disabled={disabled||reading} onClick={()=>imageInput.current?.click()}>{reading?'正在识别…':'导入二维码图片'}</button>
+    <input ref={imageInput} className="bp-pairing-file" aria-label="二维码图片" type="file" accept="image/png,image/jpeg,image/webp" disabled={disabled||reading} onChange={event=>{void image(event)}}/></div>
+    {error&&<p className="bp-error" role="alert">{error}</p>}
+    {scanning&&<div className="bp-pairing-camera-overlay" role="dialog" aria-modal="true" aria-label="扫描电脑配对二维码" ref={dialog} onKeyDown={event=>{
+      if(event.key==='Escape'&&!event.nativeEvent.isComposing&&event.nativeEvent.keyCode!==229){event.preventDefault();close()}
+      if(event.key==='Tab'){event.preventDefault();dialog.current?.querySelector('button')?.focus()}
+    }}><section className="bp-pairing-camera"><header><strong>扫描电脑上的配对二维码</strong><button type="button" onClick={close}>关闭摄像头</button></header><video ref={video} muted playsInline/><p>将完整二维码放入画面，识别后仍需核对设备指纹和六位确认码。</p></section></div>}
+  </div>
+}