@huaqiu/component-gen-app 0.3.6

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@huaqiu/component-gen-app",
+  "version": "0.3.6",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "dependencies": {
+    "@huaqiu/ecad-renderer": "^0.2.4",
+    "@huaqiu/kicad-sexpr-parser": "^0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsdown": "^0.22.14",
+    "typescript": "^5.9.0",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsdown && vite build",
+    "build:lib": "tsdown",
+    "build:standalone": "vite build",
+    "test": "vitest run"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,101 @@
+/**
+ * `@huaqiu/component-gen-app` — the app shell.
+ *
+ * Renders one of the two generation pages (the host opens the page directly).
+ * History lives in a modal dialog opened from the header's "View history"
+ * action (mirroring dsh's settings-dialog header action beside the close
+ * button); reopening an entry closes the dialog and loads the artifact back
+ * into the page. Completely DSH-agnostic — everything the app needs comes
+ * through `ComponentGenPorts`.
+ */
+import { useMemo, useState, type ReactElement } from 'react'
+import type { ComponentGenPage, ComponentGenPorts, ReopenRequest } from './ports.js'
+import { translateFor, type Translate } from './copy/index.js'
+import { SymbolGenPage } from './pages/SymbolGenPage.js'
+import { FootprintGenPage } from './pages/FootprintGenPage.js'
+import { HistoryPanel } from './components/HistoryPanel.js'
+
+export interface ComponentGenAppProps {
+  ports: ComponentGenPorts
+  page: ComponentGenPage
+  /** host UI language: 'zh' | 'en' (default zh). */
+  lang?: string
+  onClose?: () => void
+}
+
+/** Modal history dialog — chrome follows dsh's Modal primitive. */
+function HistoryDialog({
+  ports, page, t, onReopen, onClose,
+}: {
+  ports: ComponentGenPorts
+  page: ComponentGenPage
+  t: Translate
+  onReopen: (entry: ReopenRequest['entry']) => void
+  onClose: () => void
+}): ReactElement {
+  return (
+    <div className="cga-history-dialog" role="presentation">
+      <div className="cga-history-dialog__mask" aria-hidden="true" onClick={onClose} />
+      <div className="cga-history-dialog__panel" role="dialog" aria-modal="true" aria-label={t('history.title')}>
+        <div className="cga-history-dialog__head">
+          <span className="cga-history-dialog__title">{t('history.title')}</span>
+          <button type="button" className="cga-app__head-close" aria-label={t('app.close')} onClick={onClose}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+              <path d="M4 4l8 8M12 4l-8 8" />
+            </svg>
+          </button>
+        </div>
+        <div className="cga-history-dialog__body">
+          <HistoryPanel ports={ports} t={t} activeKind={page} onReopen={onReopen} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ComponentGenApp(props: ComponentGenAppProps): ReactElement {
+  const { ports, page, lang, onClose } = props
+  const t: Translate = useMemo(() => translateFor(lang), [lang])
+  const [historyOpen, setHistoryOpen] = useState(false)
+  const [reopenReq, setReopenReq] = useState<ReopenRequest | null>(null)
+  // Only forward a reopen request whose kind matches the active page (history
+  // is already filtered by activeKind, but the request must not leak across a
+  // tab switch).
+  const pageReopen = reopenReq && reopenReq.entry.kind === page ? reopenReq : null
+
+  const openHistory = (entry: ReopenRequest['entry']): void => {
+    // Reopening lands back in the workspace, so drop the dialog too.
+    setHistoryOpen(false)
+    setReopenReq((prev) => ({ n: (prev?.n ?? 0) + 1, entry }))
+  }
+
+  return (
+    <div className="cga-app">
+      <div className="cga-app__head">
+        <span className="cga-app__head-title">
+          {page === 'symbol' ? t('app.symbolTitle') : t('app.footprintTitle')}
+        </span>
+        <div className="cga-app__head-actions">
+          <button type="button" className="cga-btn cga-btn--outline" onClick={() => setHistoryOpen(true)}>
+            {t('history.view')}
+          </button>
+          {onClose ? (
+            <button type="button" className="cga-app__head-close" aria-label={t('app.close')} onClick={onClose}>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                <path d="M4 4l8 8M12 4l-8 8" />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {page === 'symbol'
+        ? <SymbolGenPage ports={ports} t={t} reopen={pageReopen} />
+        : <FootprintGenPage ports={ports} t={t} reopen={pageReopen} />}
+
+      {historyOpen
+        ? <HistoryDialog ports={ports} page={page} t={t} onReopen={openHistory} onClose={() => setHistoryOpen(false)} />
+        : null}
+    </div>
+  )
+}

package/src/api/component-gen-client.ts

@@ -0,0 +1,225 @@
+/**
+ * `@huaqiu/component-gen-app` — the single HTTP/SSE client implementing
+ * `ComponentGenPorts` against the component-gen server API.
+ *
+ * The base is injectable: the DSH adapter points it at the same-origin
+ * `/api/v1/huaqiu/component-gen` (plugin webServer route), the standalone
+ * adapter points it at `http://localhost:<port>/api/v1/huaqiu/component-gen`.
+ * No CORS needed in either case — generation is server-side and same-origin.
+ */
+import type {
+  ComponentGenAuthPort,
+  ComponentGenConfig,
+  ComponentGenPorts,
+  HistoryEntry,
+  HistoryPage,
+  HistoryPatch,
+  HistoryQuery,
+  JobEvent,
+  JobState,
+  StartJobRequest,
+} from '../ports.js'
+
+const DEFAULT_LIMITS = { imageBytes: 4 * 1024 * 1024 }
+
+async function readJson<T>(res: Response): Promise<T> {
+  if (!res.ok) {
+    let detail = `HTTP ${res.status}`
+    try {
+      const body = (await res.json()) as { error?: string; detail?: unknown }
+      if (body?.error) detail = body.error
+      if (body?.detail) detail = `${detail}: ${String(body.detail)}`
+    } catch {
+      /* non-JSON error body — keep the status message */
+    }
+    throw new Error(detail)
+  }
+  return (await res.json()) as T
+}
+
+export interface HttpPortsOptions {
+  /** component-gen API base, e.g. `/api/v1/huaqiu/component-gen`. */
+  base: string
+  /** artifacts API base, e.g. `/api/v1/huaqiu/artifacts` (same origin). */
+  artifactsBase?: string
+  doFetch?: typeof fetch
+  auth?: ComponentGenAuthPort
+}
+
+/** The shared fetch client. */
+export function createHttpPorts(options: HttpPortsOptions): ComponentGenPorts {
+  const base = options.base.replace(/\/+$/, '')
+  const doFetch = options.doFetch ?? globalThis.fetch.bind(globalThis)
+  // Artifacts live under their own prefix on the same origin; derive it from
+  // `base` unless the host overrides it.
+  const artifactsBase = (options.artifactsBase ?? defaultArtifactsBase(base)).replace(/\/+$/, '')
+
+  const url = (p: string): string => `${base}${p}`
+  const artifactUrl = (p: string): string => `${artifactsBase}${p}`
+
+  return {
+    async config(): Promise<ComponentGenConfig> {
+      const res = await doFetch(url('/config'), { headers: { accept: 'application/json' } })
+      const cfg = await readJson<Partial<ComponentGenConfig>>(res)
+      return {
+        hostMode: cfg.hostMode ?? false,
+        capabilities: cfg.capabilities ?? { symbol: true, footprint: true },
+        limits: { ...DEFAULT_LIMITS, ...(cfg.limits ?? {}) },
+      }
+    },
+
+    async startJob(req: StartJobRequest, signal?: AbortSignal): Promise<JobState> {
+      const res = await doFetch(url('/jobs'), {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(req),
+        signal,
+      })
+      if (res.status === 202) {
+        const body = (await res.json()) as { jobId?: string }
+        // Return a minimal queued JobState; the caller follows /jobs/:id.
+        return {
+          id: String(body.jobId ?? ''),
+          kind: req.kind,
+          status: 'queued',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        }
+      }
+      return readJson<JobState>(res)
+    },
+
+    jobEvents(jobId: string, onEvent: (e: JobEvent) => void): () => void {
+      const controller = new AbortController()
+      const run = async (): Promise<void> => {
+        try {
+          const res = await doFetch(url(`/jobs/${encodeURIComponent(jobId)}/events`), {
+            headers: { accept: 'text/event-stream' },
+            signal: controller.signal,
+          })
+          if (!res.ok || !res.body) {
+            onEvent({ type: 'failed', error: `events HTTP ${res.status}`, at: new Date().toISOString() })
+            return
+          }
+          const reader = res.body.getReader()
+          const decoder = new TextDecoder()
+          let buf = ''
+          for (;;) {
+            const { done, value } = await reader.read()
+            if (done) break
+            buf += decoder.decode(value, { stream: true })
+            let idx: number
+            while ((idx = buf.indexOf('\n\n')) >= 0) {
+              const frame = buf.slice(0, idx)
+              buf = buf.slice(idx + 2)
+              const event = parseEvent(frame)
+              if (event) onEvent(event)
+            }
+          }
+        } catch (err) {
+          if ((err as Error)?.name === 'AbortError') return
+          onEvent({ type: 'failed', error: String((err as Error)?.message || err), at: new Date().toISOString() })
+        }
+      }
+      void run()
+      return () => controller.abort()
+    },
+
+    async abortJob(jobId: string): Promise<void> {
+      await doFetch(url(`/jobs/${encodeURIComponent(jobId)}`), { method: 'DELETE' })
+    },
+
+    async history(query: HistoryQuery): Promise<HistoryPage> {
+      const params = new URLSearchParams()
+      if (query.limit !== undefined) params.set('limit', String(query.limit))
+      if (query.cursor) params.set('cursor', query.cursor)
+      const qs = params.toString()
+      const res = await doFetch(url(`/history${qs ? `?${qs}` : ''}`), { headers: { accept: 'application/json' } })
+      return readJson<HistoryPage>(res)
+    },
+
+    async historyEntry(id: string): Promise<HistoryEntry | null> {
+      const res = await doFetch(url(`/history/${encodeURIComponent(id)}`), { headers: { accept: 'application/json' } })
+      if (res.status === 404) return null
+      return readJson<HistoryEntry>(res)
+    },
+
+    async patchHistory(id: string, patch: HistoryPatch): Promise<HistoryEntry> {
+      const res = await doFetch(url(`/history/${encodeURIComponent(id)}`), {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(patch),
+      })
+      return readJson<HistoryEntry>(res)
+    },
+
+    async deleteHistory(id: string): Promise<void> {
+      await doFetch(url(`/history/${encodeURIComponent(id)}`), { method: 'DELETE' })
+    },
+
+    async artifactContent(artifactId: string): Promise<string> {
+      const res = await doFetch(artifactUrl(`/${encodeURIComponent(artifactId)}/content`), {
+        headers: { accept: 'text/plain' },
+      })
+      if (!res.ok) throw new Error(`artifact content HTTP ${res.status}`)
+      return res.text()
+    },
+
+    async inputImage(imageId: string): Promise<string> {
+      const res = await doFetch(url(`/history/${encodeURIComponent(imageId)}/image`), {
+        headers: { accept: 'image/*' },
+      })
+      if (!res.ok) throw new Error(`input image HTTP ${res.status}`)
+      const blob = await res.blob()
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(String(reader.result))
+        reader.onerror = () => reject(new Error('failed to read input image'))
+        reader.readAsDataURL(blob)
+      })
+    },
+
+    auth: options.auth ?? createPassthroughAuth(),
+  }
+}
+
+/** Derive the artifacts base from the component-gen base path. */
+export function defaultArtifactsBase(componentGenBase: string): string {
+  // /api/v1/huaqiu/component-gen → /api/v1/huaqiu/artifacts
+  return componentGenBase.replace(/\/component-gen\/?$/, '/artifacts')
+}
+
+/** Parse one SSE frame (event: / data: lines) into a JobEvent. */
+export function parseEvent(frame: string): JobEvent | null {
+  let eventName = 'message'
+  const dataLines: string[] = []
+  for (const line of frame.split('\n')) {
+    if (line.startsWith('event:')) eventName = line.slice(6).trim()
+    else if (line.startsWith('data:')) dataLines.push(line.slice(5).trimStart())
+  }
+  const data = dataLines.join('\n')
+  if (!data) return null
+  try {
+    const raw = JSON.parse(data) as JobEvent
+    if (eventName === 'needs_confirmation' && 'dimensions' in raw) return raw as JobEvent
+    if (eventName === 'completed' && 'job' in raw) return raw as JobEvent
+    if (eventName === 'failed') return raw as JobEvent
+    if (eventName === 'cancelled') return raw as JobEvent
+    return raw as JobEvent
+  } catch {
+    return null
+  }
+}
+
+/** Default auth port: optimistic (used when the host supplies no auth). */
+function createPassthroughAuth(): ComponentGenAuthPort {
+  return {
+    async isAuthenticated() { return true },
+    async getUserInfo() { return null },
+    async login() { /* no-op */ },
+    onAuthStateChanged() { return () => {} },
+  }
+}
+
+/** Keep the exported type visible for adapters. */
+export type { HistoryEntry, JobState }