@huaqiu/component-gen-app 0.3.6

package/src/hooks/useJobRunner.ts

@@ -0,0 +1,127 @@
+/**
+ * `@huaqiu/component-gen-app` — reusable generation job runner.
+ *
+ * Encapsulates the start → SSE-stream → terminal-state lifecycle for one
+ * page's active generation. The page calls `run(req)` and reacts to `phase`.
+ * `ports.jobEvents` is expected to replay the job's current state first, so a
+ * job that finished before subscription still lands correctly.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ComponentGenPorts, HistoryEntry, JobEvent, JobKind, JobState, StartJobRequest } from '../ports.js'
+
+export type GenPhase = 'idle' | 'running' | 'needs_confirmation' | 'completed' | 'failed' | 'cancelled'
+
+export interface UseJobRunnerResult {
+  phase: GenPhase
+  progress: string
+  dimensions: Record<string, unknown> | null
+  pkgType: string | null
+  fileName: string | null
+  result: Record<string, unknown>
+  error: string
+  jobId: string | null
+  run: (req: StartJobRequest) => Promise<void>
+  cancel: () => Promise<void>
+  clear: () => void
+  /** Render an already-generated history entry in the 'completed' stage. */
+  loadHistory: (entry: HistoryEntry) => void
+}
+
+export function useJobRunner(ports: ComponentGenPorts): UseJobRunnerResult {
+  const [phase, setPhase] = useState<GenPhase>('idle')
+  const [progress, setProgress] = useState('')
+  const [dimensions, setDimensions] = useState<Record<string, unknown> | null>(null)
+  const [pkgType, setPkgType] = useState<string | null>(null)
+  const [fileName, setFileName] = useState<string | null>(null)
+  const [result, setResult] = useState<Record<string, unknown>>({})
+  const [error, setError] = useState('')
+  const [jobId, setJobId] = useState<string | null>(null)
+  const unsubRef = useRef<(() => void) | null>(null)
+
+  const cleanup = useCallback((): void => {
+    unsubRef.current?.()
+    unsubRef.current = null
+  }, [])
+
+  useEffect(() => cleanup, [cleanup])
+
+  const onEvent = useCallback((e: JobEvent): void => {
+    switch (e.type) {
+      case 'progress':
+        setProgress(e.message)
+        break
+      case 'needs_confirmation':
+        setPhase('needs_confirmation')
+        setDimensions(e.dimensions)
+        setPkgType(e.pkgType ?? null)
+        setFileName(e.fileName ?? null)
+        break
+      case 'completed':
+        setPhase('completed')
+        setResult(e.job.result ?? {})
+        setProgress('')
+        break
+      case 'failed':
+        setPhase('failed')
+        setError(e.error)
+        setResult(e.result ?? {})
+        setProgress('')
+        break
+      case 'cancelled':
+        setPhase('cancelled')
+        setProgress('')
+        break
+    }
+  }, [])
+
+  const run = useCallback(async (req: StartJobRequest): Promise<void> => {
+    cleanup()
+    setPhase('running')
+    setProgress('')
+    setDimensions(null)
+    setPkgType(null)
+    setFileName(null)
+    setResult({})
+    setError('')
+    const job = await ports.startJob(req)
+    setJobId(job.id)
+    unsubRef.current = ports.jobEvents(job.id, onEvent)
+  }, [ports, cleanup, onEvent])
+
+  const cancel = useCallback(async (): Promise<void> => {
+    const id = jobId
+    if (!id) return
+    try { await ports.abortJob(id) } catch { /* best effort */ }
+    cleanup()
+    setPhase('cancelled')
+  }, [ports, jobId, cleanup])
+
+  const clear = useCallback((): void => {
+    cleanup()
+    setPhase('idle')
+    setProgress('')
+    setDimensions(null)
+    setResult({})
+    setError('')
+    setJobId(null)
+  }, [cleanup])
+
+  const loadHistory = useCallback((entry: HistoryEntry): void => {
+    cleanup()
+    setPhase('completed')
+    setProgress('')
+    setDimensions(null)
+    setPkgType(entry.input?.packageType ?? null)
+    setFileName(null)
+    setResult({
+      artifact: { id: entry.result?.artifactId },
+      filename: entry.result?.filename,
+      ...(entry.input?.dimensions ? { dimensions: entry.input.dimensions } : {}),
+    })
+    setError('')
+    // jobId keys the result stage so re-opening a different entry re-renders.
+    setJobId(`history:${entry.id}`)
+  }, [cleanup])
+
+  return { phase, progress, dimensions, pkgType, fileName, result, error, jobId, run, cancel, clear, loadHistory }
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+/**
+ * `@huaqiu/component-gen-app` — public exports.
+ *
+ * The app is a portable React library: the DSH plugin imports these components
+ * and wires `ComponentGenPorts`; the standalone build mounts `main.tsx`.
+ */
+export { ComponentGenApp, type ComponentGenAppProps } from './App.js'
+export { SymbolGenPage, type SymbolGenPageProps } from './pages/SymbolGenPage.js'
+export { FootprintGenPage, type FootprintGenPageProps } from './pages/FootprintGenPage.js'
+
+export { GeometryEditor, type GeometryEditorProps } from './components/GeometryEditor.js'
+export { PreviewStage, type PreviewStageProps } from './components/PreviewStage.js'
+export { ResultStage, type ResultStageProps } from './components/ResultStage.js'
+export { UploadInput, type UploadInputProps, fileToDataUrl } from './components/UploadInput.js'
+export { HistoryPanel, type HistoryPanelProps } from './components/HistoryPanel.js'
+
+export { createHttpPorts, defaultArtifactsBase, type HttpPortsOptions } from './api/component-gen-client.js'
+export type {
+  ComponentGenPorts,
+  ComponentGenAuthPort,
+  ComponentGenConfig,
+  ComponentGenPage,
+  HistoryEntry,
+  HistoryPage,
+  HistoryPatch,
+  HistoryQuery,
+  JobEvent,
+  JobInput,
+  JobKind,
+  JobState,
+  StartJobRequest,
+} from './ports.js'
+
+export { translateFor, translate, defaultT, type Translate } from './copy/index.js'
+export { ZH, EN } from './copy/index.js'
+
+export { injectAppStyles, removeAppStyles, APP_STYLE_ID } from './styles/inject.js'

package/src/main.tsx

@@ -0,0 +1,85 @@
+/**
+ * `@huaqiu/component-gen-app` — standalone browser entry (vite).
+ *
+ * Served by `@huaqiu/component-gen-server` alongside the API. Opens the page
+ * from `?page=symbol|footprint`. Auth is read from the dsh-auth session route
+ * the standalone server mounts (`/api/v1/huaqiu/auth/session`); login opens
+ * the official auth.eda.cn page. See the standalone README for the auth
+ * flow (the production DSH/EDA integrations use the real dsh-auth client).
+ */
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ComponentGenApp } from './App.js'
+import { createHttpPorts } from './api/component-gen-client.js'
+import { injectAppStyles } from './styles/inject.js'
+import type { ComponentGenAuthPort, ComponentGenPage, ComponentGenPorts } from './ports.js'
+
+injectAppStyles()
+
+const AUTH_BASE = '/api/v1/huaqiu/auth'
+
+/** Read auth state from the dsh-auth session route (standalone server). */
+function createStandaloneAuth(): ComponentGenAuthPort {
+  let pollTimer: ReturnType<typeof setInterval> | null = null
+  const listeners = new Set<(authenticated: boolean) => void>()
+  const readState = async (): Promise<{ authenticated: boolean; user: { nickname?: string } | null }> => {
+    try {
+      const res = await fetch(`${AUTH_BASE}/session`, { headers: { accept: 'application/json' } })
+      if (!res.ok) return { authenticated: false, user: null }
+      const body = (await res.json()) as { authenticated?: boolean; user?: { nickname?: string } | null }
+      return { authenticated: body.authenticated === true, user: body.user ?? null }
+    } catch {
+      return { authenticated: false, user: null }
+    }
+  }
+  const startPolling = (): void => {
+    if (pollTimer) return
+    let last = false
+    void readState().then((s) => { last = s.authenticated })
+    pollTimer = setInterval(() => {
+      void readState().then((s) => {
+        if (s.authenticated !== last) {
+          last = s.authenticated
+          for (const cb of [...listeners]) cb(s.authenticated)
+        }
+      })
+    }, 2000)
+  }
+  startPolling()
+  return {
+    async isAuthenticated() { return (await readState()).authenticated },
+    async getUserInfo() { return (await readState()).user },
+    async login() {
+      // Official login page in a new tab; the dsh-auth session route is the
+      // source of truth the poller watches.
+      window.open('https://auth.eda.cn/', '_blank', 'noopener')
+    },
+    onAuthStateChanged(cb) {
+      listeners.add(cb)
+      return () => { listeners.delete(cb) }
+    },
+  }
+}
+
+function params(): URLSearchParams {
+  return new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '')
+}
+
+function mount(): void {
+  const rootEl = document.getElementById('root')
+  if (!rootEl) return
+  const page: ComponentGenPage = params().get('page') === 'symbol' ? 'symbol' : 'footprint'
+  const lang = params().get('lang') ?? undefined
+  const ports: ComponentGenPorts = createHttpPorts({
+    base: '/api/v1/huaqiu/component-gen',
+    artifactsBase: '/api/v1/huaqiu/artifacts',
+    auth: createStandaloneAuth(),
+  })
+  createRoot(rootEl).render(
+    <StrictMode>
+      <ComponentGenApp ports={ports} page={page} lang={lang} />
+    </StrictMode>,
+  )
+}
+
+mount()

package/src/pages/FootprintGenPage.tsx

@@ -0,0 +1,185 @@
+/**
+ * `@huaqiu/component-gen-app` — Footprint generation page.
+ *
+ * Two workflows, both driven by the app itself (single-HIL):
+ *   1. needs_confirmation — extract → dimension editor → confirm →
+ *      generate-footprint from the human-approved values.
+ *   2. direct generation — extract returns a standard footprint immediately
+ *      (fast path) → preview + download.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import type { ComponentGenConfig, ComponentGenPorts, ReopenRequest } from '../ports.js'
+import type { Translate } from '../copy/index.js'
+import type { DimensionValues } from '../utils/dims.js'
+import { UploadInput } from '../components/UploadInput.js'
+import { GeometryEditor } from '../components/GeometryEditor.js'
+import { ResultStage } from '../components/ResultStage.js'
+import { useAuthGate } from '../hooks/useAuthGate.js'
+import { useJobRunner } from '../hooks/useJobRunner.js'
+
+export interface FootprintGenPageProps {
+  ports: ComponentGenPorts
+  t: Translate
+  /** reopen a generated history entry into the completed stage. */
+  reopen?: ReopenRequest | null
+}
+
+export function FootprintGenPage({ ports, t, reopen = null }: FootprintGenPageProps): ReactElement {
+  const auth = useAuthGate(ports)
+  const runner = useJobRunner(ports)
+  const [config, setConfig] = useState<ComponentGenConfig | null>(null)
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null)
+  const [file, setFile] = useState<File | null>(null)
+  const [hint, setHint] = useState('')
+
+  // Stable refs so the reopen effect only re-runs when the request changes.
+  const runnerRef = useRef(runner)
+  runnerRef.current = runner
+  const portsRef = useRef(ports)
+  portsRef.current = ports
+
+  // Reopen: load the generated artifact into the result stage and restore the
+  // source image + package-type hint so the user can inspect / regenerate.
+  useEffect(() => {
+    if (!reopen) return
+    const { entry } = reopen
+    runnerRef.current.loadHistory(entry)
+    if (entry.input?.imageId) {
+      portsRef.current.inputImage(entry.input.imageId)
+        .then((dataUrl) => setImageDataUrl(dataUrl))
+        .catch(() => { /* best effort */ })
+    }
+    if (entry.input?.packageType) setHint(entry.input.packageType)
+  }, [reopen])
+
+  useEffect(() => {
+    ports.config().then(setConfig).catch(() => { /* best effort */ })
+  }, [ports])
+
+  const maxBytes = config?.limits.imageBytes ?? 4 * 1024 * 1024
+  const authed = auth.phase === 'authenticated'
+  const busy = runner.phase === 'running'
+
+  const extract = useCallback((): void => {
+    if (!imageDataUrl) return
+    void runner.run({
+      kind: 'extract-footprint',
+      input: {
+        imageDataUrl,
+        ...(hint.trim() ? { packageType: hint.trim() } : {}),
+      },
+    })
+  }, [imageDataUrl, hint, runner])
+
+  const confirmDimensions = useCallback((values: DimensionValues, edited: Record<string, boolean>): void => {
+    void runner.run({
+      kind: 'generate-footprint',
+      input: {
+        // Re-stamp the source image so the server keeps an authoritative copy
+        // and the generated history entry can reopen it (the extract job's
+        // entry is not the one shown in history).
+        imageDataUrl: imageDataUrl ?? undefined,
+        packageType: (runner.pkgType ?? hint.trim()) || undefined,
+        fileName: runner.fileName ?? undefined,
+        dimensions: values,
+        edited,
+      },
+    })
+  }, [runner, hint, imageDataUrl])
+
+  const cancelConfirm = useCallback((): void => {
+    runner.clear()
+  }, [runner])
+
+  const resultKey = useMemo(() => `${runner.jobId ?? 'none'}:${runner.phase}`, [runner.jobId, runner.phase])
+
+  return (
+    <div className="cga-app">
+      <div className="cga-panel">
+        <div className="cga-panel__body">
+          {auth.phase === 'unknown' ? <div className="cga-progress"><span className="cga-spinner" />{t('app.loading')}</div> : null}
+          {auth.phase === 'unauthenticated'
+            ? (
+              <div className="cga-auth">
+                <span>{t('auth.loginRequired')}</span>
+                <button type="button" className="cga-btn" onClick={auth.login}>{t('auth.login')}</button>
+              </div>
+            )
+            : null}
+
+          {runner.phase !== 'needs_confirmation'
+            ? (
+              <>
+                <UploadInput
+                  maxBytes={maxBytes}
+                  t={t}
+                  disabled={!authed || busy}
+                  imageDataUrl={imageDataUrl}
+                  file={file}
+                  onFile={(f, url) => { setFile(f); setImageDataUrl(url) }}
+                />
+                <div className="cga-field">
+                  <label className="cga-field__label">{t('footprint.hintPlaceholder')}</label>
+                  <input
+                    className="cga-field__input"
+                    type="text"
+                    value={hint}
+                    disabled={!authed || busy}
+                    onChange={(ev) => setHint(ev.target.value)}
+                  />
+                </div>
+                <div className="cga-actions">
+                  <button
+                    type="button"
+                    className="cga-btn cga-btn--primary"
+                    disabled={!authed || !imageDataUrl || busy}
+                    onClick={extract}
+                  >
+                    {busy ? t('footprint.extractProgress') : t('footprint.extract')}
+                  </button>
+                  {busy
+                    ? <button type="button" className="cga-btn" onClick={() => void runner.cancel()}>{t('editor.cancelLabel')}</button>
+                    : null}
+                </div>
+              </>
+            )
+            : null}
+
+          {runner.phase === 'running' && runner.jobId
+            ? <div className="cga-progress"><span className="cga-spinner" />{runner.progress || t('footprint.extractProgress')}</div>
+            : null}
+
+          {runner.phase === 'needs_confirmation' && runner.dimensions
+            ? (
+              <>
+                <div className="cga-banner cga-banner--info">{t('footprint.needsConfirmation')}</div>
+                <GeometryEditor
+                  dimensions={runner.dimensions}
+                  pkgType={runner.pkgType}
+                  fileName={runner.fileName}
+                  disabled={false}
+                  t={t}
+                  onConfirm={confirmDimensions}
+                  onCancel={cancelConfirm}
+                />
+              </>
+            )
+            : null}
+
+          {runner.phase === 'failed'
+            ? (
+              <div className="cga-banner cga-banner--error">
+                {t('footprint.failed')}: {runner.error}
+                {runner.result?.status === 'needs_auth' ? ` (${t('auth.loginRequired')})` : ''}
+              </div>
+            )
+            : null}
+        </div>
+      </div>
+
+      {runner.phase === 'completed'
+        ? <ResultStage ports={ports} kind="footprint" result={runner.result} t={t} srcKey={resultKey} />
+        : null}
+    </div>
+  )
+}

package/src/pages/SymbolGenPage.tsx

@@ -0,0 +1,136 @@
+/**
+ * `@huaqiu/component-gen-app` — Symbol generation page.
+ *
+ * Upload an image (required by the symbol-from-image generator) + optional
+ * instruction → `runGenerateSymbol` via the component-gen server → live
+ * progress → preview + download + history.
+ */
+import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import type { ComponentGenConfig, ComponentGenPorts, ReopenRequest } from '../ports.js'
+import type { Translate } from '../copy/index.js'
+import { UploadInput } from '../components/UploadInput.js'
+import { ResultStage } from '../components/ResultStage.js'
+import { useAuthGate } from '../hooks/useAuthGate.js'
+import { useJobRunner } from '../hooks/useJobRunner.js'
+
+export interface SymbolGenPageProps {
+  ports: ComponentGenPorts
+  t: Translate
+  /** reopen a generated history entry into the completed stage. */
+  reopen?: ReopenRequest | null
+  /** the app calls back to switch tabs (not used on the symbol page). */
+  onClose?: () => void
+}
+
+export function SymbolGenPage({ ports, t, reopen = null }: SymbolGenPageProps): ReactElement {
+  const auth = useAuthGate(ports)
+  const runner = useJobRunner(ports)
+  const [config, setConfig] = useState<ComponentGenConfig | null>(null)
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null)
+  const [file, setFile] = useState<File | null>(null)
+  const [instruction, setInstruction] = useState('')
+
+  // Stable refs so the reopen effect only re-runs when the request changes.
+  const runnerRef = useRef(runner)
+  runnerRef.current = runner
+  const portsRef = useRef(ports)
+  portsRef.current = ports
+
+  // Reopen: load the generated artifact into the result stage and restore the
+  // source image + instruction so the user can inspect / regenerate.
+  useEffect(() => {
+    if (!reopen) return
+    const { entry } = reopen
+    runnerRef.current.loadHistory(entry)
+    if (entry.input?.imageId) {
+      portsRef.current.inputImage(entry.input.imageId)
+        .then((dataUrl) => setImageDataUrl(dataUrl))
+        .catch(() => { /* best effort */ })
+    }
+    if (entry.input?.instruction) setInstruction(entry.input.instruction)
+  }, [reopen])
+
+  useEffect(() => {
+    ports.config().then(setConfig).catch(() => { /* best effort */ })
+  }, [ports])
+
+  const maxBytes = config?.limits.imageBytes ?? 4 * 1024 * 1024
+  const authed = auth.phase === 'authenticated'
+  const canGenerate = authed && !!imageDataUrl && runner.phase !== 'running'
+
+  const generate = (): void => {
+    if (!imageDataUrl) return
+    void runner.run({
+      kind: 'symbol',
+      input: { imageDataUrl, ...(instruction.trim() ? { instruction: instruction.trim() } : {}) },
+    })
+  }
+
+  const resultKey = useMemo(() => `${runner.jobId ?? 'none'}:${runner.phase}`, [runner.jobId, runner.phase])
+
+  return (
+    <div className="cga-app">
+      <div className="cga-panel">
+        <div className="cga-panel__body">
+          {auth.phase === 'unknown' ? <div className="cga-progress"><span className="cga-spinner" />{t('app.loading')}</div> : null}
+          {auth.phase === 'unauthenticated'
+            ? (
+              <div className="cga-auth">
+                <span>{t('auth.loginRequired')}</span>
+                <button type="button" className="cga-btn" onClick={auth.login}>{t('auth.login')}</button>
+              </div>
+            )
+            : null}
+
+          <UploadInput
+            maxBytes={maxBytes}
+            t={t}
+            disabled={!authed || runner.phase === 'running'}
+            imageDataUrl={imageDataUrl}
+            file={file}
+            onFile={(f, url) => { setFile(f); setImageDataUrl(url) }}
+          />
+
+          <div className="cga-field">
+            <label className="cga-field__label">{t('symbol.instructionPlaceholder')}</label>
+            <input
+              className="cga-field__input"
+              type="text"
+              value={instruction}
+              disabled={!authed || runner.phase === 'running'}
+              onChange={(ev) => setInstruction(ev.target.value)}
+            />
+          </div>
+
+          <div className="cga-actions">
+            <button
+              type="button"
+              className="cga-btn cga-btn--primary"
+              disabled={!canGenerate}
+              onClick={generate}
+            >
+              {runner.phase === 'running' ? t('symbol.progress') : (runner.phase === 'completed' ? t('symbol.regenerate') : t('symbol.generate'))}
+            </button>
+            {runner.phase === 'running'
+              ? <button type="button" className="cga-btn" onClick={() => void runner.cancel()}>{t('editor.cancelLabel')}</button>
+              : null}
+          </div>
+
+          {runner.phase === 'running' ? <div className="cga-progress"><span className="cga-spinner" />{runner.progress || t('symbol.progress')}</div> : null}
+          {runner.phase === 'failed'
+            ? (
+              <div className="cga-banner cga-banner--error">
+                {t('symbol.failed')}: {runner.error}
+                {runner.result?.status === 'needs_auth' ? ` (${t('auth.loginRequired')})` : ''}
+              </div>
+            )
+            : null}
+        </div>
+      </div>
+
+      {runner.phase === 'completed'
+        ? <ResultStage ports={ports} kind="symbol" result={runner.result} t={t} srcKey={resultKey} />
+        : null}
+    </div>
+  )
+}