npm - @huaqiu/dsh-auth - Versions diffs - 0.1.1 - Mend

@huaqiu/dsh-auth 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/LICENSE +21 -0
package/README.md +22 -0
package/cordis.patch.yml +7 -0
package/lib/client.js +1427 -0
package/lib/client.js.map +1 -0
package/lib/index.d.mts +73 -0
package/lib/index.mjs +291 -0
package/package.json +55 -0
package/src/client/auth-state.ts +96 -0
package/src/client/client.ts +169 -0
package/src/client/i18n.ts +97 -0
package/src/client/index.tsx +109 -0
package/src/client/lib.ts +234 -0
package/src/client/storage.ts +43 -0
package/src/client/transport.ts +36 -0
package/src/client/ui/common.tsx +169 -0
package/src/client/ui/hq-icon.tsx +50 -0
package/src/client/ui/login-dialog.ts +219 -0
package/src/client/ui/needs-auth-toolview.tsx +118 -0
package/src/client/ui/sidebar-action.tsx +395 -0
package/src/client/ui-env.ts +175 -0
package/src/host.ts +139 -0
package/src/index.ts +42 -0
package/src/routes.ts +84 -0
package/src/service.ts +172 -0

package/src/client/ui/login-dialog.ts ADDED Viewed

@@ -0,0 +1,219 @@
+/**
+ * The sidebar login dialog — a real modal (backdrop + centered card + iframe).
+ *
+ * WHY A DIALOG AND NOT A FULL-VIEWPORT IFRAME
+ *
+ * The embed (`auth.eda.cn`) reads only two URL params: `fill` and
+ * `clickOutsideToClose`. With `fill !== 'full'` it sets
+ * `data-iframe-mode="true"` on `<html>` and the CSS rule
+ * `html[data-iframe-mode=true], html[data-iframe-mode=true] body { background: 0 0 !important }`
+ * makes its root transparent — but the page wrapper still uses a
+ * `grid-rows-[20px_1fr_20px]` layout, so the 20px strips above/below the
+ * card are empty and show through to whatever is behind the iframe. Behind
+ * the iframe element, with no background set, Blink falls back to a WHITE
+ * base background canvas. That white is what was reading as a "white frame
+ * around the login card in dark mode" (and was invisibly there in light
+ * mode, blending with the white host).
+ *
+ * The two ways out:
+ *   1. Paint the iframe element with a color → in a full-viewport iframe
+ *      that blanks the whole app with that color (light surface = white
+ *      blocks the light host; dark surface = dark blocks the dark host).
+ *   2. Make the iframe CARD-SIZED and put it inside a host-painted card,
+ *      so the iframe's background can be `transparent` and the card's
+ *      surface shows through wherever the embedded doc is transparent.
+ *      This is the pattern the toolview card already uses
+ *      (`needs-auth-toolview.tsx`) and the pattern `hq-eda-ai`'s
+ *      `LoginDialog.tsx` uses.
+ *
+ * We use (2): a fixed full-viewport backdrop (semi-transparent black) +
+ * centered card (host surface bg) + the iframe (transparent inner doc,
+ * card surface as element bg so Blink's white canvas never reaches the
+ * user). Click on the backdrop, the × button, Escape, or the auth embed's
+ * own `close_dialog` postMessage closes the dialog.
+ */
+import { LOGIN_IFRAME_HEIGHT } from './common.js'
+import { buildLoginUrl, type AuthLocale, type AuthTheme } from '../lib.js'
+import { translate } from '../i18n.js'
+import { getCurrentLocale, getCurrentSurfaceColor, subscribeUiEnv, syncUiEnv } from '../ui-env.js'
+/** Aria / data attribute names — stable so tests and CSS can target them. */
+export const DIALOG_OVERLAY_ATTR = 'data-hq-auth-dialog'
+export const DIALOG_CARD_ATTR = 'data-hq-auth-dialog-card'
+export const DIALOG_IFRAME_ATTR = 'data-hq-auth-dialog-iframe'
+export const DIALOG_CLOSE_ATTR = 'data-hq-auth-dialog-close'
+/**
+ * Iframe height. Tuned to the auth.eda.cn login form's actual painted height
+ * (≈390px at 768px width, measured with a magenta iframe element background
+ * so the embedded doc's transparent 20px top/bottom strips are obvious). The
+ * shared constant lives in `./common.jsx` so the dialog and the toolview
+ * card stay in lock-step.
+ */
+const IFRAME_HEIGHT = LOGIN_IFRAME_HEIGHT
+const CARD_MAX_WIDTH = 768
+let container: HTMLDivElement | null = null
+let unsubscribe: (() => void) | null = null
+let onCloseRequested: (() => void) | null = null
+/**
+ * Open the login dialog. Idempotent: a second call while open is a no-op
+ * (mirrors the client-side `if (iframe) return` guard). `onClose` fires
+ * whenever the dialog closes for ANY reason (backdrop click, Escape, close
+ * button, postMessage, programmatic close) — the auth client uses it to
+ * unblock its own `isOpen` state.
+ */
+export function openLoginDialog(options: { lang?: AuthLocale; theme?: AuthTheme } = {}, onClose?: () => void): void {
+  if (container) return
+  // The ui-env module reads the DOM once at import time. Re-read here so
+  // the dialog picks up the current theme even if no React component has
+  // subscribed yet (e.g. when the sidebar opens the dialog before any
+  // card has mounted), or when a test sets the attribute after import.
+  syncUiEnv()
+  const locale = options.lang ?? getCurrentLocale()
+  const root = document.createElement('div')
+  root.setAttribute(DIALOG_OVERLAY_ATTR, '')
+  // Backdrop: dim the host without blanking it. Theme-agnostic — rgba black
+  // works on both light and dark hosts.
+  root.style.cssText = [
+    'position:fixed',
+    'inset:0',
+    'width:100vw',
+    'height:100vh',
+    'border:0',
+    'z-index:2147483647',
+    'background:rgba(0, 0, 0, 0.55)',
+    'display:flex',
+    'align-items:center',
+    'justify-content:center',
+    'box-sizing:border-box',
+  ].join(';')
+  const card = document.createElement('div')
+  card.setAttribute(DIALOG_CARD_ATTR, '')
+  const applyCardColors = (): void => {
+    const surface = getCurrentSurfaceColor()
+    // No card border: a 1px border on each side would shrink the iframe's
+    // viewport to 766px on a 768px card, missing the embed's `md:grid-cols`
+    // (Tailwind `md` = 768px) threshold by 2px and silently falling back to
+    // a single-column layout. The card's box-shadow already gives the card
+    // a clear visual edge against the dimmed host.
+    card.style.cssText = [
+      `width:min(100vw, ${CARD_MAX_WIDTH}px)`,
+      // Card height = iframe height exactly. A taller card would leave a
+      // strip of card surface below the form (the flex column has only one
+      // child, the iframe, so any extra height piles up at the bottom).
+      `height:min(90vh, ${IFRAME_HEIGHT}px)`,
+      'border-radius:12px',
+      'box-shadow:0 24px 48px rgba(0, 0, 0, 0.32)',
+      'position:relative',
+      'box-sizing:border-box',
+      `background:${surface}`,
+      'display:flex',
+      'flex-direction:column',
+    ].join(';')
+  }
+  applyCardColors()
+  const closeButton = document.createElement('button')
+  closeButton.setAttribute(DIALOG_CLOSE_ATTR, '')
+  closeButton.type = 'button'
+  closeButton.setAttribute('aria-label', translate(locale, 'dialog.close'))
+  closeButton.title = translate(locale, 'dialog.close')
+  closeButton.textContent = '×'
+  closeButton.style.cssText = [
+    'position:absolute',
+    'top:6px',
+    'right:10px',
+    'width:28px',
+    'height:28px',
+    'border:0',
+    'background:transparent',
+    'color:var(--dsw-alias-label-secondary, #5b6472)',
+    'font-size:22px',
+    'line-height:1',
+    'cursor:pointer',
+    'border-radius:6px',
+    'padding:0',
+  ].join(';')
+  closeButton.addEventListener('click', closeLoginDialog)
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute(DIALOG_IFRAME_ATTR, '')
+  iframe.src = buildLoginUrl({ lang: options.lang, theme: options.theme })
+  iframe.title = translate(locale, 'card.title')
+  iframe.allow = 'clipboard-write'
+  // The iframe element background = the card surface. That is what masks
+  // Blink's white base canvas in the embedded doc's transparent strips
+  // (see file header). The embedded doc itself is transparent because
+  // buildLoginUrl never sends `fill=full`.
+  iframe.style.cssText = [
+    'width:100%',
+    `height:${IFRAME_HEIGHT}px`,
+    'border:0',
+    'border-radius:8px',
+    `background:${getCurrentSurfaceColor()}`,
+    'display:block',
+    'flex:0 0 auto',
+  ].join(';')
+  card.appendChild(closeButton)
+  card.appendChild(iframe)
+  root.appendChild(card)
+  document.body.appendChild(root)
+  // Backdrop click: close ONLY when the click lands on the backdrop itself,
+  // not on the card. The card stops propagation in its own click handler.
+  root.addEventListener('mousedown', backdropMouseDown)
+  card.addEventListener('mousedown', stopPropagation)
+  document.addEventListener('keydown', onKeyDown)
+  // React to theme/locale flips so the card surface + iframe background
+  // track the host (a mid-session switch while the dialog is open would
+  // otherwise leave a stale-colored card).
+  unsubscribe = subscribeUiEnv(() => {
+    if (!container) return
+    applyCardColors()
+    iframe.style.background = getCurrentSurfaceColor()
+    closeButton.title = translate(getCurrentLocale(), 'dialog.close')
+    closeButton.setAttribute('aria-label', closeButton.title)
+  })
+  container = root
+  onCloseRequested = onClose ?? null
+}
+/** Programmatic close (used by the auth client after a successful login). */
+export function closeLoginDialog(): void {
+  if (!container) return
+  container.remove()
+  container = null
+  document.removeEventListener('keydown', onKeyDown)
+  unsubscribe?.()
+  unsubscribe = null
+  const cb = onCloseRequested
+  onCloseRequested = null
+  cb?.()
+}
+/** True while the dialog is mounted. */
+export function isLoginDialogOpen(): boolean {
+  return container !== null
+}
+function backdropMouseDown(event: MouseEvent): void {
+  if (event.target === container) closeLoginDialog()
+}
+function stopPropagation(event: MouseEvent): void {
+  event.stopPropagation()
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    closeLoginDialog()
+  }
+}

package/src/client/ui/needs-auth-toolview.tsx ADDED Viewed

@@ -0,0 +1,118 @@
+/**
+ * Keyed `tool.call.toolview` renderer for the Huaqiu EDA tools.
+ *
+ * When a Huaqiu tool returns `status: "needs_auth"`, this card renders the
+ * login human-in-the-loop step: an embedded auth.eda.cn login iframe plus a
+ * live login-state line. The singleton auth client's `message` listener
+ * already receives the postMessage from this same-origin iframe, caches the
+ * credential and pushes it to the node service, so after the user logs in the
+ * card flips to「已登录」and the model can retry the tool.
+ *
+ * The embed is the second of the two FULL login surfaces (the other is the
+ * sidebar overlay): it uses the same `buildLoginUrl()` contract — always
+ * transparent — and passes the host's language and color scheme.
+ *
+ * For any other result it renders a faithful JSON fallback (the generic row
+ * that this keyed entry replaces), so nothing is lost for successful calls.
+ */
+import { memo, useEffect, useMemo, useRef, useSyncExternalStore } from 'react'
+import { getAuthState, subscribeAuth, syncAuthNow } from '../auth-state.js'
+import { buildLoginUrl } from '../lib.js'
+import { useIsDark, useLocale } from '../ui-env.js'
+import { useT } from '../i18n.js'
+import {
+  cardPalette,
+  cardStyle,
+  iframeStyle,
+  isNeedsAuthResult,
+  parseToolResult,
+  StatusLine,
+  TITLE_STYLE,
+  type ToolBlockLike,
+} from './common.jsx'
+export interface NeedsAuthToolViewProps {
+  toolName: string
+  block?: ToolBlockLike
+}
+const DESC_STYLE = {
+  fontSize: 13,
+  margin: '0 0 10px',
+  lineHeight: 1.5,
+} as const
+function JsonFallback({ toolName, block }: { toolName: string; block?: ToolBlockLike }): React.JSX.Element {
+  const result = useMemo(() => parseToolResult(block), [block])
+  const dark = useIsDark()
+  const t = useT()
+  const palette = cardPalette(dark)
+  return (
+    <div style={cardStyle(palette)}>
+      <p style={TITLE_STYLE}>{t('card.tool', { tool: toolName })}</p>
+      <pre style={{ margin: 0, fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: 320, overflow: 'auto' }}>
+        {result ? JSON.stringify(result, null, 2) : t('card.empty')}
+      </pre>
+    </div>
+  )
+}
+function LoginCard({ toolName }: { toolName: string }): React.JSX.Element {
+  const authState = useSyncExternalStore(subscribeAuth, getAuthState)
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const dark = useIsDark()
+  const locale = useLocale()
+  const t = useT()
+  const palette = cardPalette(dark)
+  // Healing: if the browser already holds a token (e.g. the node half was
+  // reset by a server restart), push it again the moment the login card
+  // mounts so the tool gate flips to authenticated without a manual re-login.
+  useEffect(() => {
+    syncAuthNow()
+  }, [toolName])
+  // Toolview is the second of the two FULL login surfaces (the other is the
+  // sidebar-triggered login dialog). Unlike the dialog — which sits inside a
+  // host-painted card with its own visual edge and therefore wants the embed
+  // in TRANSPARENT card mode — the toolview card IS the surface: the iframe
+  // fills it edge-to-edge. So we pass `fill: 'full'` and let the embed paint
+  // its own `bg-background` (dark in dark theme, light in light theme). This
+  // eliminates the white gaps that the transparent mode's 20px grid strips
+  // would otherwise leave above and below the form.
+  const src = useMemo(
+    () => buildLoginUrl({ fill: 'full', lang: locale, theme: dark ? 'dark' : 'light' }),
+    [locale, dark],
+  )
+  // Force a full iframe remount when theme/locale flips. Chrome's
+  // `iframe.src =` update keeps the old embed loaded and ignores the new
+  // `fill`/`theme` params (the embed is a single Next.js page that reads
+  // params once on mount); only a remount picks them up.
+  const remountKey = `${locale}|${dark ? 'd' : 'l'}`
+  return (
+    <div style={cardStyle(palette)}>
+      <p style={TITLE_STYLE}>{t('card.title')}</p>
+      <p style={{ ...DESC_STYLE, color: palette.muted }}>
+        {t('card.desc', { tool: toolName })}
+      </p>
+      <StatusLine authenticated={authState.authenticated} nickname={authState.nickname} palette={palette} t={t} />
+      <iframe
+        key={remountKey}
+        ref={iframeRef}
+        src={src}
+        title={t('card.title')}
+        style={iframeStyle(palette)}
+        allow="clipboard-write"
+      />
+    </div>
+  )
+}
+export const HuaqiuToolView = memo(function HuaqiuToolView(props: NeedsAuthToolViewProps): React.JSX.Element {
+  const { toolName, block } = props
+  const result = useMemo(() => parseToolResult(block), [block])
+  if (isNeedsAuthResult(result)) {
+    return <LoginCard toolName={toolName} />
+  }
+  return <JsonFallback toolName={toolName} block={block} />
+})