@huaqiu/dsh-tool-schematic-gen 0.1.1

package/src/client/progress.ts

@@ -0,0 +1,161 @@
+/**
+ * Browser half of the live-progress channel.
+ *
+ * The node half writes progress into a `ProgressStore` keyed by the tool call
+ * id and serves it from a same-origin route; this module polls that route and
+ * hands the result to the card. Same-origin, so no token and no CORS.
+ *
+ * Polling (rather than SSE) is deliberate: the route already exists for the
+ * artifact flow, the payload is tiny, and a poll survives a dropped
+ * connection without any reconnect logic. The interval is slow because a run
+ * lasts minutes, not seconds.
+ */
+import { useEffect, useRef, useState } from 'react'
+import type { ProgressDoc } from '../progress.js'
+
+/** Must match `PROGRESS_ROUTE_PREFIX` in src/routes.ts. */
+export const PROGRESS_ROUTE_PREFIX = '/api/v1/huaqiu/schematic-gen/progress'
+
+/** Steady-state poll interval. A run takes minutes; sub-second polling is waste. */
+export const POLL_INTERVAL_MS = 1500
+
+/** Longest interval we will back off to after repeated failures. */
+export const MAX_BACKOFF_MS = 15_000
+
+/**
+ * How long to keep asking when the route answers 404.
+ *
+ * A 404 is normal for the first second or two (the tool body may still be
+ * resolving the eda.cn account before it registers), but if it never registers
+ * we must stop rather than poll the app for the next ten minutes.
+ */
+export const MISSING_GIVE_UP_MS = 120_000
+
+export type ProgressPhase = 'idle' | 'loading' | 'gave-up' | 'live' | 'missing' | 'error'
+
+export interface ProgressState {
+  phase: ProgressPhase
+  doc: ProgressDoc | null
+  error: string | null
+}
+
+const IDLE: ProgressState = { phase: 'idle', doc: null, error: null }
+
+/**
+ * Poll one run's progress while `active`.
+ *
+ * Stops as soon as the run reports a terminal status, and backs off on
+ * transport failure so a missing/unreachable route cannot spin the UI.
+ */
+export function useProgress(callId: string | undefined, active: boolean): ProgressState {
+  const [state, setState] = useState<ProgressState>(IDLE)
+
+  useEffect(() => {
+    if (!active || !callId) {
+      setState(IDLE)
+      return
+    }
+
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | null = null
+    let delay = POLL_INTERVAL_MS
+    const controller = new AbortController()
+    const startedAt = Date.now()
+    let missingSince: number | null = null
+
+    const schedule = (): void => {
+      if (cancelled) return
+      timer = setTimeout(run, delay)
+    }
+
+    const run = async (): Promise<void> => {
+      if (cancelled) return
+      try {
+        const url = `${PROGRESS_ROUTE_PREFIX}/${encodeURIComponent(callId)}`
+        const res = await fetch(url, {
+          signal: controller.signal,
+          headers: { accept: 'application/json' },
+          credentials: 'same-origin',
+        })
+        if (cancelled) return
+
+        if (res.status === 404) {
+          // The run has not registered yet (the tool body may still be
+          // resolving the account) or has already been swept. Keep trying
+          // for a bounded window — just slower.
+          if (missingSince === null) missingSince = Date.now()
+          if (Date.now() - missingSince > MISSING_GIVE_UP_MS) {
+            setState({ phase: 'gave-up', doc: null, error: null })
+            return
+          }
+          delay = Math.min(Math.round(delay * 1.5), MAX_BACKOFF_MS)
+          setState({ phase: 'missing', doc: null, error: null })
+          schedule()
+          return
+        }
+        if (!res.ok) throw new Error(`progress route returned HTTP ${res.status}`)
+
+        const doc = (await res.json()) as ProgressDoc
+        if (cancelled) return
+        delay = POLL_INTERVAL_MS
+        missingSince = null
+        setState({ phase: 'live', doc, error: null })
+        // Terminal — the card has the real result now; stop polling.
+        if (doc.status !== 'running') return
+        schedule()
+      } catch (err) {
+        if (cancelled || controller.signal.aborted) return
+        // Same bounded window as the 404 path: a route that is simply absent
+        // must not spin the UI for the length of the run.
+        if (Date.now() - startedAt > MISSING_GIVE_UP_MS) {
+          setState({ phase: 'gave-up', doc: null, error: String((err as Error)?.message || err) })
+          return
+        }
+        delay = Math.min(Math.round(delay * 1.5), MAX_BACKOFF_MS)
+        setState({ phase: 'error', doc: null, error: String((err as Error)?.message || err) })
+        schedule()
+      }
+    }
+
+    setState({ phase: 'loading', doc: null, error: null })
+    void run()
+
+    return () => {
+      cancelled = true
+      if (timer) clearTimeout(timer)
+      controller.abort()
+    }
+  }, [callId, active])
+
+  return state
+}
+
+/**
+ * Shared ticker that re-renders on a fixed cadence while `active`.
+ *
+ * Lifted out of the stack renderer (a documented limitation of the
+ * hq-eda-ai original, which owned its `setInterval` inside the list
+ * component) so every frame at any depth can show a live duration without
+ * each one running its own timer.
+ */
+export function useNow(active: boolean, intervalMs = 200): number {
+  const [now, setNow] = useState<number>(() => Date.now())
+  const intervalRef = useRef(intervalMs)
+  intervalRef.current = intervalMs
+
+  useEffect(() => {
+    if (!active) return
+    setNow(Date.now())
+    const id = setInterval(() => setNow(Date.now()), intervalRef.current)
+    return () => clearInterval(id)
+  }, [active])
+
+  return now
+}
+
+/** Wall-clock elapsed time since `startedAt`, ticking while `active`. */
+export function useElapsed(startedAt: number | null | undefined, active: boolean): number {
+  const now = useNow(active, 500)
+  if (startedAt === null || startedAt === undefined) return 0
+  return Math.max(0, now - startedAt)
+}

package/src/client/stack-frame.tsx

@@ -0,0 +1,269 @@
+/**
+ * Live call-stack renderer (browser half).
+ *
+ * Port of `hq-eda-ai`'s prototype
+ * (`docs/prototype/tool_call_stack_prototype.tsx`) onto the paired trace
+ * frames our node half produces, plus the coarse stage ladder that keeps the
+ * user informed even when the backend emits no trace events at all.
+ *
+ * Styling goes through the classes in `theme.js` — client bundles here have no
+ * CSS pipeline, so the stylesheet is injected once as a `<style>` tag and
+ * every visual decision lives in a DSH design token with a literal fallback.
+ */
+import { memo, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import type { ProgressDoc, ProgressNote, RunKind, TodoItem } from '../progress.js'
+import { buildTree, countStatus, formatDuration, formatElapsed, type StackNode } from './trace-tree.js'
+import { useElapsed, useNow, useProgress } from './progress.js'
+import { useTraceNames } from './trace-names.js'
+import type { Translate } from './i18n.js'
+
+// ── one frame ──────────────────────────────────────────────────────────────
+
+function dotClass(status: string): string {
+  if (status === 'finished') {
+    return 'hq-sch__frame-dot hq-sch__frame-dot--finished'
+  }
+  if (status === 'failed') {
+    return 'hq-sch__frame-dot hq-sch__frame-dot--failed'
+  }
+  return 'hq-sch__frame-dot hq-sch__frame-dot--running'
+}
+
+interface FrameProps {
+  node: StackNode
+  now: number
+  running: boolean
+  /**
+   * Identifier → display name. The stack otherwise renders the raw backend
+   * identifiers (`node:schematicDesign`, `es_rag_search`) verbatim.
+   */
+  resolve: (name: string) => string
+}
+
+const StackFrame = memo(function StackFrame({ node, now, running, resolve }: FrameProps): ReactElement {
+  const [open, setOpen] = useState(true)
+  const hasChildren = node.children.length > 0
+  const counts = countStatus(node)
+  const label = resolve(node.name)
+
+  const isRunning = node.status === 'running'
+  const endedAt = node.finishedAt
+  const duration = formatDuration(
+    endedAt != null ? endedAt - node.startedAt : (running && isRunning ? now - node.startedAt : null),
+  )
+
+  const nameClass = isRunning
+    ? 'hq-sch__frame-name hq-sch__frame-name--running'
+    : 'hq-sch__frame-name hq-sch__frame-name--done'
+
+  const row = (
+    <div
+      className={hasChildren ? 'hq-sch__frame-row' : 'hq-sch__frame-row hq-sch__frame-row--leaf'}
+      onClick={hasChildren ? () => setOpen((v) => !v) : undefined}
+      role={hasChildren ? 'button' : undefined}
+      aria-expanded={hasChildren ? open : undefined}
+    >
+      <span className="hq-sch__frame-chev">{hasChildren ? (open ? '▾' : '▸') : ''}</span>
+      <span className={dotClass(node.status)} />
+      <span className={nameClass} title={label}>{label}</span>
+      <span className="hq-sch__frame-meta">
+        {node.repeat > 1 ? <span className="hq-sch__frame-count">×{node.repeat}</span> : null}
+        {hasChildren && counts.total > 0
+          ? <span className="hq-sch__frame-count">{counts.finished}/{counts.total}</span>
+          : null}
+        {duration ? <span>{duration}</span> : null}
+      </span>
+    </div>
+  )
+
+  if (!hasChildren || !open) {
+    return row
+  }
+
+  return (
+    <div>
+      {row}
+      <div className="hq-sch__frame-children">
+        {node.children.map((child) => (
+          <StackFrame key={child.id} node={child} now={now} running={running} resolve={resolve} />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+// ── the stack ─────────────────────────────────────────────────────────────
+
+/**
+ * The frame list, auto-scrolled so the deepest running span stays visible.
+ *
+ * A 10-minute run can produce hundreds of frames; without this the container
+ * (capped at 320px) would sit pinned at the top showing work finished minutes
+ * ago.
+ */
+function StackList(
+  { nodes, now, running, resolve }: { nodes: StackNode[]; now: number; running: boolean; resolve: (name: string) => string },
+): ReactElement {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!running) {
+      return
+    }
+    const el = ref.current
+    if (!el) {
+      return
+    }
+    el.scrollTop = el.scrollHeight
+  }, [nodes, running])
+
+  return (
+    <div className="hq-sch__stack" ref={ref}>
+      {nodes.map((node) => (
+        <StackFrame key={node.id} node={node} now={now} running={running} resolve={resolve} />
+      ))}
+    </div>
+  )
+}
+
+// ── stage ladder ──────────────────────────────────────────────────────────
+
+function stepClass(index: number, active: number, failed: boolean): string {
+  const base = 'hq-sch__ladder-step'
+  if (index < active) {
+    return `${base} hq-sch__ladder-step--done`
+  }
+  if (index > active) {
+    return base
+  }
+  return failed ? `${base} hq-sch__ladder-step--failed` : `${base} hq-sch__ladder-step--active`
+}
+
+function StageLadder({ stage, failed }: { stage: ProgressDoc['stage']; failed: boolean }): ReactElement | null {
+  if (!stage || stage.total <= 0) {
+    return null
+  }
+  const steps: ReactElement[] = []
+  for (let i = 0; i < stage.total; i++) {
+    steps.push(<span key={i} className={stepClass(i, stage.index, failed)} />)
+  }
+  return <div className="hq-sch__ladder">{steps}</div>
+}
+
+// ── system-design extras ──────────────────────────────────────────────────
+
+/**
+ * The agent's own words about what it is doing.
+ *
+ * `modular_circuit` publishes these from its `emitWorkflowProgress`
+ * middleware — one `start` announcement when a stage opens and one `complete`
+ * when it closes. It is the only narrative signal the system agent gives us,
+ * and it is what makes a 10-minute wait feel attended to.
+ */
+function NoteLine({ note }: { note: ProgressNote }): ReactElement | null {
+  if (!note.message) {
+    return null
+  }
+  const cls = note.phase === 'error'
+    ? 'hq-sch__note-line hq-sch__note-line--error'
+    : note.phase === 'complete'
+      ? 'hq-sch__note-line hq-sch__note-line--complete'
+      : 'hq-sch__note-line'
+  return (
+    <div className={cls}>
+      {note.phase === 'start' ? <span className="hq-sch__note-spin" /> : null}
+      <span>{note.message}</span>
+    </div>
+  )
+}
+
+/** Mark glyph per todo status — no icon dependency in a client bundle. */
+function todoMark(status: TodoItem['status']): string {
+  if (status === 'completed') {
+    return '✓'
+  }
+  if (status === 'in_progress') {
+    return '▸'
+  }
+  return '·'
+}
+
+function TodoList({ todos }: { todos: TodoItem[] }): ReactElement | null {
+  if (todos.length === 0) {
+    return null
+  }
+  return (
+    <ul className="hq-sch__todos">
+      {todos.map((todo, i) => (
+        <li key={i} className={`hq-sch__todo hq-sch__todo--${todo.status}`}>
+          <span className="hq-sch__todo-mark">{todoMark(todo.status)}</span>
+          <span className="hq-sch__todo-text">{todo.content}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// ── the whole live block ──────────────────────────────────────────────────
+
+export interface LiveProgressProps {
+  /**
+   * Tool call id. This is the SAME string `defineTool`'s `ToolRunContext`
+   * hands the node half, so it is what correlates node progress to this card.
+   */
+  callId?: string
+  kind: RunKind
+  t: Translate
+}
+
+/**
+ * Progress surface for a run that has not settled yet.
+ *
+ * Three layers, each independent, so the user always sees *something*:
+ *   1. A label naming the current stage, plus a live `m:ss` timer.
+ *   2. A coarse ladder derived from the agent's own state keys — works even
+ *      when the backend emits no trace events at all.
+ *   3. The real call stack, when trace events do arrive.
+ */
+export function LiveProgress({ callId, kind, t }: LiveProgressProps): ReactElement {
+  const { doc } = useProgress(callId, true)
+
+  const running = !doc || doc.status === 'running'
+  const now = useNow(running, 250)
+
+  // Before the first poll lands there is no server timestamp; fall back to the
+  // moment this card mounted so the timer is never stuck at 0:00.
+  const mountedAtRef = useRef<number>(Date.now())
+  const startedAt = doc?.startedAt ?? mountedAtRef.current
+  const elapsed = useElapsed(startedAt, running)
+
+  const tree = useMemo(() => {
+    // `doc.frames` is a fresh array on every poll, so depend on `doc` itself.
+    void kind
+    return buildTree(doc?.frames ?? [])
+  }, [doc, kind])
+
+  // The stack renders the backend's own identifiers (`node:schematicDesign`,
+  // `es_rag_search`). Resolve them to copy in the host UI's language. The
+  // document knows the real run kind; the prop is only the caller's guess.
+  const resolve = useTraceNames(doc?.kind ?? kind)
+
+  const label = doc?.stage
+    ? t(`card.stage.${doc.stage.key}`)
+    : t('card.progress.waiting')
+
+  return (
+    <div>
+      <div className="hq-sch__progress">
+        <span>{label}</span>
+        <span className="hq-sch__progress-timer">{formatElapsed(elapsed)}</span>
+      </div>
+      {doc?.note ? <NoteLine note={doc.note} /> : null}
+      <StageLadder stage={doc?.stage ?? null} failed={doc?.status === 'failed'} />
+      {doc?.todos && doc.todos.length > 0 ? <TodoList todos={doc.todos} /> : null}
+      {tree.length > 0
+        ? <StackList nodes={tree} now={now} running={running} resolve={resolve} />
+        : null}
+    </div>
+  )
+}

package/src/client/theme.ts

@@ -0,0 +1,228 @@
+/**
+ * Host UI environment (theme + locale) store and the scoped stylesheet for
+ * the schematic/system HIT card.
+ *
+ * The DSH slot system injects React components with PROPS, not the cordis ctx,
+ * so the card cannot reach `ctx.theme` / `ctx.locale` the way a plugin body
+ * can. Both services do, however, publish their state into the DOM, and that
+ * is what this module reads:
+ *
+ * - THEME — `ui-layout`'s theme presenter toggles `body[data-ds-dark-theme]`
+ *   from the resolved snapshot, so the attribute's presence IS the dark
+ *   palette. `prefers-color-scheme` is deliberately NOT consulted: DSH
+ *   resolves `system` itself, and an OS-dark / DSH-light combination would
+ *   then be misdetected.
+ * - LOCALE — `dsh-client-locale` writes `<html lang>` on every locale change
+ *   (`zh-CN` | `en`). `navigator.languages` is the fallback for hosts without
+ *   that plugin; zh is the last resort because this is a Chinese-first app.
+ *
+ * Stylesheet: uniquely-prefixed classes only, token colors, no !important, no
+ * DSH-internal selectors. The style tag is removed on dispose.
+ */
+import { useEffect, useState } from 'react'
+import { LOGIN_IFRAME_HEIGHT, type AuthLocale } from './login-url.js'
+
+export const PLUGIN_ID = '@huaqiu/dsh-tool-schematic-gen'
+export const STYLE_ID = 'hq-schematic-genhit-styles'
+
+const DARK_ATTRIBUTE = 'data-ds-dark-theme'
+
+function isDark(): boolean {
+  return !!(typeof document !== 'undefined' && document.body && document.body.hasAttribute(DARK_ATTRIBUTE))
+}
+
+/** `zh-CN`, `zh-Hans`, `en-GB`, … → our locale id (`undefined` = unknown). */
+function localeFromTag(tag: string | null | undefined): AuthLocale | undefined {
+  if (!tag) return undefined
+  const primary = tag.toLowerCase().split('-')[0]
+  return primary === 'zh' || primary === 'en' ? primary : undefined
+}
+
+function detectLocale(): AuthLocale {
+  if (typeof document !== 'undefined') {
+    const fromDocument = localeFromTag(document.documentElement?.getAttribute('lang'))
+    if (fromDocument) return fromDocument
+  }
+  if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
+    // `window` is the browser test: Node exposes a global `navigator`
+    // reporting the machine's own language, which would otherwise decide the
+    // locale for non-browser runs.
+    for (const tag of [...(navigator.languages ?? []), navigator.language]) {
+      const match = localeFromTag(tag)
+      if (match) return match
+    }
+  }
+  return 'zh'
+}
+
+const listeners = new Set<() => void>()
+let themeState = { dark: isDark(), locale: detectLocale() }
+let themeObserver: MutationObserver | null = null
+let localeObserver: MutationObserver | null = null
+
+function notify(): void {
+  for (const fn of [...listeners]) {
+    try { fn() } catch { /* one bad subscriber must not strand the rest */ }
+  }
+}
+
+/** Re-read the DOM and notify only when something actually changed. */
+function sync(): void {
+  let changed = false
+  const dark = isDark()
+  if (dark !== themeState.dark) {
+    themeState.dark = dark
+    changed = true
+  }
+  const locale = detectLocale()
+  if (locale !== themeState.locale) {
+    themeState.locale = locale
+    changed = true
+  }
+  if (changed) notify()
+}
+
+function ensureThemeObserver(): void {
+  if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return
+  if (!themeObserver && document.body) {
+    themeObserver = new MutationObserver(sync)
+    themeObserver.observe(document.body, { attributes: true, attributeFilter: [DARK_ATTRIBUTE] })
+  }
+  if (!localeObserver && document.documentElement) {
+    localeObserver = new MutationObserver(sync)
+    localeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] })
+  }
+}
+
+export function useTheme(): boolean {
+  // Read fresh on every mount. With React 18's batched mount, multiple cards
+  // capture the module-level snapshot at the same moment; the *first* one's
+  // effect then flips `themeState` via `sync()`, but only that one card ever
+  // re-renders because the others' `useState` has already locked onto the
+  // initial value. Reading the DOM directly here costs one extra attribute
+  // lookup per mount and fixes the silent pinning.
+  const [dark, setDark] = useState(() => isDark())
+  useEffect(() => {
+    ensureThemeObserver()
+    setDark(isDark())
+    const onChange = () => setDark(themeState.dark)
+    listeners.add(onChange)
+    sync()
+    return () => { listeners.delete(onChange) }
+  }, [])
+  return dark
+}
+
+/** The host UI language (`zh` by default). */
+export function useLocale(): AuthLocale {
+  // Same fix as `useTheme` — fresh DOM read on mount, otherwise the second
+  // and later cards in a chat render in the module-load locale even though
+  // DSH wrote `<html lang>` before any of them mounted.
+  const [locale, setLocale] = useState(() => detectLocale())
+  useEffect(() => {
+    ensureThemeObserver()
+    setLocale(detectLocale())
+    const onChange = () => setLocale(themeState.locale)
+    listeners.add(onChange)
+    sync()
+    return () => { listeners.delete(onChange) }
+  }, [])
+  return locale
+}
+
+/**
+ * Synchronous, always-fresh read of the host locale (for non-React callers).
+ * Re-reads the DOM rather than returning the cached snapshot, so it is safe
+ * to call before any component has subscribed.
+ */
+export function getLocale(): AuthLocale {
+  return detectLocale()
+}
+
+export function disposeThemeObserver(): void {
+  if (themeObserver) {
+    themeObserver.disconnect()
+    themeObserver = null
+  }
+  if (localeObserver) {
+    localeObserver.disconnect()
+    localeObserver = null
+  }
+  listeners.clear()
+}
+
+const CSS = `
+.hq-sch { width: 100%; box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.25)); border-radius: 10px; background: var(--dsw-alias-bg-layer-1, transparent); overflow: hidden; }
+.hq-sch__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
+.hq-sch__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--dsw-alias-interactive-bg-hover, transparent); color: var(--dsw-alias-label-primary, currentColor); }
+.hq-sch__title { font: var(--dsw-font-s-strong-14, 14px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-primary, currentColor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hq-sch__status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-sch__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 12px 10px; }
+.hq-sch__badge { display: inline-flex; align-items: center; max-width: 240px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--dsw-alias-border-l1, currentColor); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hq-sch__badge--mono { font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
+.hq-sch__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; height: 420px; background: var(--dsw-alias-markdown-code-block, #0a1929); overflow: hidden; }
+.hq-sch__canvas { display: block; width: 100%; height: 100%; background: var(--dsw-alias-markdown-code-block, #0a1929); }
+.hq-sch__stage-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px 14px; box-sizing: border-box; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); text-align: center; }
+.hq-sch__error { margin: 0 12px 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--dsw-alias-state-error-primary, rgba(220,50,50,0.3)); color: var(--dsw-alias-state-error-primary, currentColor); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); white-space: pre-wrap; }
+.hq-sch__note { margin: 0 12px 10px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); white-space: pre-wrap; }
+.hq-sch__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
+.hq-sch__act { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--dsw-alias-border-l1, currentColor); border-radius: 6px; padding: 5px 12px; background: var(--dsw-alias-bg-layer-1, transparent); color: var(--dsw-alias-label-primary, currentColor); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); cursor: pointer; }
+.hq-sch__act:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); }
+.hq-sch__act:disabled { opacity: 0.5; cursor: default; }
+.hq-sch__login { padding: 0 12px 12px; }
+.hq-sch__login-desc { margin: 0 0 10px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); line-height: 1.5; }
+.hq-sch__login-status { margin: 0 0 10px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); line-height: 1.5; }
+.hq-sch__login-iframe { width: 100%; height: ${LOGIN_IFRAME_HEIGHT}px; border: 0; border-radius: 8px; display: block; }
+
+/* ── live call stack (long-running generations) ───────────────────────────── */
+.hq-sch__progress { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-sch__progress-timer { margin-left: auto; flex: none; font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
+.hq-sch__ladder { display: flex; gap: 3px; padding: 0 12px 4px; }
+.hq-sch__ladder-step { height: 3px; flex: 1 1 0; border-radius: 3px; background: var(--dsw-alias-border-l1, rgba(127,127,127,0.25)); }
+.hq-sch__ladder-step--done { background: var(--dsw-alias-state-success-primary, #188038); }
+.hq-sch__ladder-step--active { background: var(--dsw-alias-state-running-primary, #1a73e8); }
+.hq-sch__ladder-step--failed { background: var(--dsw-alias-state-error-primary, #d93025); }
+.hq-sch__stack { max-height: 320px; overflow-y: auto; padding: 2px 12px 12px; }
+.hq-sch__frame-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
+.hq-sch__frame-row:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.08)); }
+.hq-sch__frame-row--leaf { cursor: default; }
+.hq-sch__frame-chev { flex: none; width: 12px; font-size: 9px; line-height: 1; color: var(--dsw-alias-label-tertiary, currentColor); }
+.hq-sch__frame-dot { flex: none; width: 6px; height: 6px; border-radius: 6px; background: var(--dsw-alias-border-l1, rgba(127,127,127,0.35)); }
+.hq-sch__frame-dot--running { background: var(--dsw-alias-state-running-primary, #1a73e8); animation: hq-sch-pulse 1.2s ease-in-out infinite; }
+.hq-sch__frame-dot--finished { background: var(--dsw-alias-state-success-primary, #188038); }
+.hq-sch__frame-dot--failed { background: var(--dsw-alias-state-error-primary, #d93025); }
+.hq-sch__frame-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; color: var(--dsw-alias-label-primary, currentColor); }
+.hq-sch__frame-name--done { color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-sch__frame-name--running { font-weight: 600; }
+.hq-sch__frame-meta { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; color: var(--dsw-alias-label-tertiary, currentColor); }
+.hq-sch__frame-count { padding: 0 4px; border-radius: 999px; background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.14)); }
+.hq-sch__frame-children { border-left: 1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.25)); margin-left: 11px; }
+.hq-sch__progress-empty { padding: 2px 12px 12px; font: var(--dsw-font-xxs-12, 12px/1.4 system-ui, sans-serif); color: var(--dsw-alias-label-tertiary, currentColor); }
+
+/* ── system-design: stage announcement + live todo list ──────────────────── */
+.hq-sch__note-line { display: flex; align-items: flex-start; gap: 6px; padding: 0 12px 8px; font: var(--dsw-font-xxs-12, 12px/1.5 system-ui, sans-serif); color: var(--dsw-alias-label-primary, currentColor); }
+.hq-sch__note-line--complete { color: var(--dsw-alias-label-secondary, currentColor); }
+.hq-sch__note-line--error { color: var(--dsw-alias-state-error-primary, #d93025); }
+.hq-sch__note-spin { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 8px; background: var(--dsw-alias-state-running-primary, #1a73e8); animation: hq-sch-pulse 1.2s ease-in-out infinite; }
+.hq-sch__todos { list-style: none; margin: 0; padding: 4px 12px 10px; max-height: 168px; overflow-y: auto; }
+.hq-sch__todo { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; font: var(--dsw-font-xxs-12, 12px/1.5 system-ui, sans-serif); color: var(--dsw-alias-label-tertiary, currentColor); }
+.hq-sch__todo-mark { flex: none; width: 10px; text-align: center; line-height: 1.5; }
+.hq-sch__todo-text { min-width: 0; overflow-wrap: anywhere; }
+.hq-sch__todo--in_progress { color: var(--dsw-alias-label-primary, currentColor); font-weight: 600; }
+.hq-sch__todo--completed { color: var(--dsw-alias-label-secondary, currentColor); text-decoration: line-through; }
+@keyframes hq-sch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+`
+
+export function injectStyles(): void {
+  if (document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.setAttribute('data-plugin', PLUGIN_ID)
+  style.textContent = CSS
+  document.head.appendChild(style)
+}
+
+export function removeStyles(): void {
+  const style = document.getElementById(STYLE_ID)
+  if (style && style.parentNode) style.parentNode.removeChild(style)
+}