@forgeax/interface 0.4.1

package/dist/package/browser/components/Feedback/FeedbackPanel.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FeedbackPanel — 「写反馈 / 我的反馈」两页签面板。
+ *
+ * 视觉 SSOT: docs/features/feedback-prototype/img04.png(写反馈)、
+ * img06.png(截图缩略图)、img07.png(提交成功)、img08.png(我的反馈)。
+ */
+import { useRef, useState } from 'react';
+import { Camera, Check, Copy, ExternalLink, Loader2, Megaphone, MessageCircle, RotateCcw, X, ZoomIn, ZoomOut, } from 'lucide-react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { useTranslation } from '../../i18n';
+import { captureUiScreenshot } from '../../lib/ui-screenshot';
+import { useFeedbackStore } from './store';
+import './FeedbackPanel.css';
+const TYPE_KEYS = ['stuck', 'wrong', 'slow', 'ui', 'idea', 'other'];
+function FeedbackHeader() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    return (_jsxs("header", { className: "feedback-header", children: [_jsxs("div", { className: "feedback-header__brand", children: [_jsx("span", { className: "feedback-header__icon", "aria-hidden": "true", children: _jsx(Megaphone, { size: 16, strokeWidth: 2.25 }) }), _jsx(DialogTitle, { className: "feedback-header__title", children: t('feedback.panel.title') })] }), _jsxs("div", { className: "feedback-header__actions", children: [_jsx("button", { type: "button", className: `feedback-tab${s.tab === 'write' ? ' is-active' : ''}`, onClick: () => s.setTab('write'), children: t('feedback.panel.write') }), _jsxs("button", { type: "button", className: `feedback-tab${s.tab === 'mine' ? ' is-active' : ''}`, onClick: () => s.setTab('mine'), children: [t('feedback.panel.mine'), s.reports.length > 0 && _jsx("span", { className: "feedback-tab__count", children: s.reports.length })] }), _jsx("button", { type: "button", className: "feedback-header__close", "aria-label": t('common.close'), title: t('common.close'), onClick: () => s.closePanel(), children: _jsx(X, { size: 15, strokeWidth: 2 }) })] })] }));
+}
+function WriteTab() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    const fileRef = useRef(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [previewScale, setPreviewScale] = useState(1);
+    const hasSnapshot = s.screenshots.some((shot) => shot.kind === 'snapshot');
+    const openPreview = (url) => {
+        setPreviewScale(1);
+        setPreviewUrl(url);
+    };
+    const closePreview = () => {
+        setPreviewUrl(null);
+        setPreviewScale(1);
+    };
+    const addSnapshot = async () => {
+        const shot = await captureUiScreenshot({ target: 'app' });
+        if (shot.captured === false)
+            return;
+        const ok = shot;
+        if (ok.dataUrl)
+            s.addScreenshot({ previewUrl: ok.dataUrl, ref: ok.dataUrl, kind: 'snapshot' });
+    };
+    const onUpload = (files) => {
+        if (!files)
+            return;
+        for (const file of Array.from(files)) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const url = String(reader.result ?? '');
+                if (url)
+                    s.addScreenshot({ previewUrl: url, ref: url, kind: 'upload' });
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    if (s.lastSubmitted)
+        return _jsx(SuccessView, {});
+    return (_jsxs("section", { className: "feedback-write", children: [_jsxs("div", { className: "feedback-form", children: [_jsxs("fieldset", { className: "feedback-fieldset", children: [_jsx("legend", { className: "feedback-label", children: t('feedback.form.type') }), _jsx("div", { className: "feedback-types", children: TYPE_KEYS.map((type) => (_jsx("button", { type: "button", className: `feedback-type${s.type === type ? ' is-active' : ''}`, onClick: () => s.setType(type), children: t(`feedback.types.${type}`) }, type))) })] }), _jsxs("label", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label", children: [t('feedback.form.description'), _jsx("span", { className: "feedback-required", children: "*" })] }), _jsx("textarea", { value: s.description, onChange: (event) => s.setDescription(event.target.value), placeholder: t('feedback.form.descriptionPh'), className: "feedback-textarea" })] }), _jsxs("div", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label feedback-label--muted", children: [t('feedback.form.screenshots'), _jsx("span", { children: t('feedback.form.screenshotLimit') })] }), _jsxs("div", { className: "feedback-shots", children: [s.screenshots.map((shot, index) => (_jsxs("div", { className: "feedback-shot", children: [_jsxs("button", { type: "button", className: "feedback-shot__preview", "aria-label": t('feedback.form.previewScreenshot'), title: t('feedback.form.previewScreenshot'), onClick: () => openPreview(shot.previewUrl), children: [_jsx("img", { src: shot.previewUrl, alt: "" }), _jsx("span", { className: "feedback-shot__zoom", "aria-hidden": "true", children: _jsx(ZoomIn, { size: 18, strokeWidth: 2 }) })] }), _jsx("button", { type: "button", className: "feedback-shot__remove", "aria-label": t('feedback.form.removeScreenshot'), title: t('feedback.form.removeScreenshot'), onClick: () => s.removeScreenshot(index), children: _jsx(X, { size: 14, strokeWidth: 2.4 }) })] }, `${shot.kind}-${index}`))), !hasSnapshot && s.screenshots.length < 5 && (_jsx("button", { type: "button", className: "feedback-shot feedback-shot--action", "aria-label": t('feedback.form.snapshot'), title: t('feedback.form.snapshot'), onClick: () => void addSnapshot(), children: _jsx(Camera, { size: 20, strokeWidth: 1.8 }) })), s.screenshots.length < 5 && (_jsx("button", { type: "button", className: "feedback-shot feedback-shot--action feedback-shot--add", "aria-label": t('feedback.form.upload'), title: t('feedback.form.upload'), onClick: () => fileRef.current?.click(), children: _jsx("span", { "aria-hidden": "true", children: "+" }) })), _jsx("input", { ref: fileRef, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (event) => {
+                                            onUpload(event.target.files);
+                                            event.target.value = '';
+                                        } })] })] }), _jsx(Dialog, { open: previewUrl !== null, onOpenChange: (open) => !open && closePreview(), children: _jsxs(DialogContent, { hideClose: true, className: "feedback-preview-dialog", children: [_jsx(DialogTitle, { className: "sr-only", children: t('feedback.form.previewScreenshot') }), _jsxs("div", { className: "feedback-preview__toolbar", children: [_jsx("button", { type: "button", "aria-label": t('feedback.form.zoomOut'), title: t('feedback.form.zoomOut'), disabled: previewScale <= 1, onClick: () => setPreviewScale((scale) => Math.max(1, scale - 0.5)), children: _jsx(ZoomOut, { size: 17, strokeWidth: 2 }) }), _jsxs("span", { children: [Math.round(previewScale * 100), "%"] }), _jsx("button", { type: "button", "aria-label": t('feedback.form.zoomIn'), title: t('feedback.form.zoomIn'), disabled: previewScale >= 3, onClick: () => setPreviewScale((scale) => Math.min(3, scale + 0.5)), children: _jsx(ZoomIn, { size: 17, strokeWidth: 2 }) }), _jsx("button", { type: "button", "aria-label": t('feedback.form.resetZoom'), title: t('feedback.form.resetZoom'), disabled: previewScale === 1, onClick: () => setPreviewScale(1), children: _jsx(RotateCcw, { size: 16, strokeWidth: 2 }) })] }), _jsx("div", { className: "feedback-preview__viewport", children: _jsx("div", { className: "feedback-preview__stage", style: { width: `${previewScale * 100}%`, height: `${previewScale * 100}%` }, children: previewUrl && (_jsx("img", { src: previewUrl, alt: t('feedback.form.previewScreenshot'), style: {
+                                                maxWidth: `${100 / previewScale}%`,
+                                                maxHeight: `${100 / previewScale}%`,
+                                                transform: `scale(${previewScale})`,
+                                            } })) }) }), _jsx("button", { type: "button", className: "feedback-preview__close", "aria-label": t('common.close'), title: t('common.close'), onClick: closePreview, children: _jsx(X, { size: 18, strokeWidth: 2 }) })] }) }), _jsxs("label", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label", children: [t('feedback.form.email'), _jsx("span", { className: "feedback-required", children: "*" })] }), _jsx("input", { type: "email", required: true, value: s.email, onChange: (event) => s.setEmail(event.target.value), placeholder: t('feedback.form.emailPh'), className: "feedback-input" })] }), s.submitError && !['description-required', 'email-required'].includes(s.submitError) && (_jsx("p", { className: "feedback-error", children: s.submitError }))] }), _jsxs("footer", { className: "feedback-footer", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--secondary", onClick: () => s.closePanel(), children: t('feedback.form.cancel') }), _jsxs("button", { type: "button", className: "feedback-button feedback-button--primary", disabled: !s.description.trim() || !s.email.trim() || s.submitting, onClick: () => void s.submit(), children: [s.submitting && _jsx(Loader2, { size: 14, className: "feedback-spinner" }), t('feedback.form.submit')] })] })] }));
+}
+function SuccessView() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    if (!s.lastSubmitted)
+        return null;
+    return (_jsxs("section", { className: "feedback-success", children: [_jsxs("div", { className: "feedback-success__body", children: [_jsx("div", { className: "feedback-success__mark", "aria-hidden": "true", children: _jsx(Check, { size: 32, strokeWidth: 2.5 }) }), _jsx("h3", { children: t('feedback.success.title') }), _jsx("p", { className: "feedback-success__subtitle", children: t('feedback.success.body') }), _jsxs("div", { className: "feedback-success__receipt", children: [_jsxs("div", { children: [_jsx("span", { children: t('feedback.success.id') }), _jsx("strong", { children: s.lastSubmitted.id })] }), _jsx("button", { type: "button", "aria-label": t('feedback.success.copy'), title: t('feedback.success.copy'), onClick: () => void navigator.clipboard.writeText(s.lastSubmitted.id), children: _jsx(Copy, { size: 16 }) })] }), _jsx("div", { className: "feedback-success__divider" }), _jsx("p", { className: "feedback-success__guide", children: t('feedback.success.guide') })] }), _jsxs("footer", { className: "feedback-footer", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--secondary", onClick: () => {
+                            s.resetDraft();
+                            s.setTab('mine');
+                        }, children: t('feedback.success.viewMine') }), _jsx("button", { type: "button", className: "feedback-button feedback-button--primary", onClick: () => {
+                            s.resetDraft();
+                            s.closePanel();
+                        }, children: t('feedback.success.ok') })] })] }));
+}
+function reportTitle(report, t) {
+    return report.source === 'auto' ? t('feedback.mine.autoTitle') : t(`feedback.types.${report.type}`);
+}
+function deliveryLabel(report) {
+    const status = report.delivery?.status;
+    if (!status)
+        return 'local';
+    if (status === 'published')
+        return 'published';
+    if (status === 'failed')
+        return 'failed';
+    if (status === 'queued')
+        return 'queued';
+    return 'working';
+}
+function MineTab() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    let content;
+    if (s.loading) {
+        content = _jsx(Loader2, { size: 18, className: "feedback-spinner feedback-mine__loader" });
+    }
+    else if (s.reports.length === 0) {
+        content = _jsx("p", { className: "feedback-mine__empty", children: t('feedback.mine.empty') });
+    }
+    else {
+        content = s.reports.map((report) => {
+            const canConfirm = report.status === 'pending-confirm' && !!report.email;
+            return (_jsxs("article", { className: "feedback-report", children: [_jsxs("div", { className: "feedback-report__headline", children: [_jsx("h3", { children: reportTitle(report, t) }), _jsx("span", { className: `feedback-status feedback-status--${report.status}`, children: t(`feedback.status.${report.status}`) })] }), report.description && _jsx("p", { className: "feedback-report__description", children: report.description }), _jsxs("p", { className: "feedback-report__meta", children: [_jsxs("span", { children: [t('feedback.mine.id'), " ", report.id] }), _jsx("i", { children: "\u00B7" }), _jsxs("span", { children: [t('feedback.mine.updated'), " ", new Date(report.updatedAt).toLocaleString()] }), _jsx("i", { children: "\u00B7" }), _jsx("span", { className: `feedback-delivery feedback-delivery--${deliveryLabel(report)}`, children: t(`feedback.delivery.${deliveryLabel(report)}`) }), report.delivery?.issueUrl && (_jsx("a", { className: "feedback-report__issue-link", href: report.delivery.issueUrl, target: "_blank", rel: "noreferrer", "aria-label": t('feedback.delivery.openIssue'), title: t('feedback.delivery.openIssue'), children: _jsx(ExternalLink, { size: 13, strokeWidth: 1.8 }) }))] }), _jsxs("div", { className: "feedback-report__progress", children: [_jsx(MessageCircle, { size: 16, strokeWidth: 1.8 }), _jsx("span", { children: t(`feedback.statusHint.${report.status}`) })] }), canConfirm && (_jsxs("div", { className: "feedback-report__actions", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--primary feedback-button--compact", onClick: () => void s.setStatus(report.id, 'resolved'), children: t('feedback.actions.resolved') }), _jsx("button", { type: "button", className: "feedback-button feedback-button--secondary feedback-button--compact", onClick: () => void s.setStatus(report.id, 'processing'), children: t('feedback.actions.stillBroken') })] }))] }, report.id));
+        });
+    }
+    return (_jsxs("section", { className: "feedback-mine", children: [_jsx("div", { className: "feedback-mine__body", children: content }), _jsx("footer", { className: "feedback-footer", children: _jsx("button", { type: "button", className: "feedback-button feedback-button--primary", onClick: () => s.closePanel(), children: t('common.close') }) })] }));
+}
+export function FeedbackPanel() {
+    const s = useFeedbackStore();
+    const brand = 'var(--color-brand-primary)';
+    return (_jsx(Dialog, { open: s.open, onOpenChange: (open) => (open ? s.openPanel() : s.closePanel()), children: _jsxs(DialogContent, { hideClose: true, className: "feedback-dialog", children: [_jsx(FeedbackHeader, {}), s.tab === 'write' ? _jsx(WriteTab, {}) : _jsx(MineTab, {})] }) }));
+}

package/dist/package/browser/components/Feedback/PassiveFeedback.css

@@ -0,0 +1,179 @@
+.feedback-passive-backdrop {
+  position: fixed;
+  inset: 36px 0 24px;
+  z-index: var(--z-modal, 1000);
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.58);
+}
+
+.feedback-passive-card {
+  position: relative;
+  width: min(560px, calc(100vw - 32px));
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 8px;
+  background: #303033;
+  color: var(--color-text-primary, #f2f2f2);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
+}
+
+.feedback-passive-card--corner {
+  position: fixed;
+  right: 18px;
+  bottom: 42px;
+  z-index: var(--z-toast, 900);
+  width: min(440px, calc(100vw - 36px));
+}
+
+.feedback-passive-chat-slot {
+  flex: 0 0 auto;
+  padding: 0 10px 8px;
+}
+
+.feedback-passive-card--chat {
+  width: 100%;
+  padding: 16px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
+}
+
+.feedback-passive-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding-right: 28px;
+}
+
+.feedback-passive-header h2 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.3;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.feedback-passive-card--chat .feedback-passive-header h2 { font-size: 15px; }
+
+.feedback-passive-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  border-radius: 7px;
+  color: #ff6468;
+  background: rgba(255, 100, 104, 0.18);
+}
+
+.feedback-passive-card--chat .feedback-passive-icon {
+  flex-basis: 36px;
+  width: 36px;
+  height: 36px;
+}
+
+.feedback-passive-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-tertiary, #8e8e93);
+  cursor: pointer;
+}
+
+.feedback-passive-close:hover { color: var(--color-text-primary, #fff); }
+
+.feedback-passive-summary {
+  margin: 18px 0 12px 66px;
+  color: var(--color-text-secondary, #c5c5c8);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 14px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.feedback-passive-card--chat .feedback-passive-summary {
+  margin: 12px 0 10px;
+  font-size: 12px;
+}
+
+.feedback-passive-stack { margin: 0 0 18px 66px; }
+.feedback-passive-card--chat .feedback-passive-stack { margin-left: 0; }
+.feedback-passive-stack summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--color-text-tertiary, #929296);
+  font-size: 13px;
+  cursor: pointer;
+  list-style: none;
+}
+.feedback-passive-stack summary::-webkit-details-marker { display: none; }
+.feedback-passive-stack[open] summary svg { transform: rotate(180deg); }
+.feedback-passive-stack pre {
+  max-height: 180px;
+  margin: 10px 0 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.22);
+  color: #bfc0c4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.feedback-passive-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 66px;
+}
+.feedback-passive-card--chat .feedback-passive-actions { margin-left: 0; }
+.feedback-passive-primary,
+.feedback-passive-ignore {
+  min-height: 42px;
+  padding: 0 22px;
+  border-radius: 7px;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0;
+  cursor: pointer;
+}
+.feedback-passive-primary {
+  border: 1px solid var(--color-brand-primary, #c7ff35);
+  background: var(--color-brand-primary, #c7ff35);
+  color: #111;
+}
+.feedback-passive-primary:hover { filter: brightness(0.94); }
+.feedback-passive-ignore {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: var(--color-text-secondary, #b5b5b8);
+}
+.feedback-passive-ignore:hover {
+  border-color: rgba(255, 255, 255, 0.26);
+  color: var(--color-text-primary, #fff);
+}
+
+@media (max-width: 640px) {
+  .feedback-passive-card { padding: 18px; }
+  .feedback-passive-card--corner { right: 12px; bottom: 34px; width: calc(100vw - 24px); }
+  .feedback-passive-summary,
+  .feedback-passive-stack,
+  .feedback-passive-actions { margin-left: 0; }
+  .feedback-passive-actions { align-items: stretch; flex-direction: column; }
+  .feedback-passive-primary,
+  .feedback-passive-ignore { width: 100%; }
+}

package/dist/package/browser/components/Feedback/PassiveFeedback.d.ts

@@ -0,0 +1,2 @@
+import './PassiveFeedback.css';
+export declare function PassiveFeedbackHost(): import("react/jsx-runtime").JSX.Element | null;

package/dist/package/browser/components/Feedback/PassiveFeedback.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, ChevronDown, X } from 'lucide-react';
+import { createIntervalTaskLifecycle, installCustomEventObservation, installMutationObservation, } from '@forgeax/app-shell/react';
+import { useTranslation } from '../../i18n';
+import { useHost } from '../../core/app-shell';
+import { useShellStore } from '../../store';
+import { PASSIVE_FEEDBACK_EVENT, PASSIVE_FEEDBACK_RECOVERED_EVENT, createPassiveFeedbackClassifier, matchesPassiveFeedbackScope, reportPassiveFeedbackSignal, } from '../../lib/passive-feedback';
+import { useHealthStore } from '../StatusBar/healthStore';
+import { useFeedbackStore } from './store';
+import './PassiveFeedback.css';
+const SEEN_STORAGE_KEY = 'forgeax.feedback.passive.seen';
+let incidentSequence = 1;
+function loadSeen() {
+    try {
+        const value = JSON.parse(sessionStorage.getItem(SEEN_STORAGE_KEY) ?? '[]');
+        return new Set(Array.isArray(value) ? value.filter((x) => typeof x === 'string') : []);
+    }
+    catch {
+        return new Set();
+    }
+}
+function persistSeen(seen) {
+    try {
+        sessionStorage.setItem(SEEN_STORAGE_KEY, JSON.stringify([...seen]));
+    }
+    catch { /* best effort */ }
+}
+function nextPaint() {
+    return new Promise((resolve) => {
+        if (typeof requestAnimationFrame === 'function')
+            requestAnimationFrame(() => resolve());
+        else
+            setTimeout(resolve, 0);
+    });
+}
+function useComposerPortal(active) {
+    const [target, setTarget] = useState(null);
+    useEffect(() => {
+        if (!active) {
+            setTarget(null);
+            return;
+        }
+        let slot = null;
+        const attach = () => {
+            if (slot?.isConnected)
+                return;
+            const composer = document.querySelector('.chat-panel .composer');
+            if (!(composer instanceof HTMLElement) || !composer.parentElement)
+                return;
+            slot = document.createElement('div');
+            slot.className = 'feedback-passive-chat-slot';
+            composer.parentElement.insertBefore(slot, composer);
+            setTarget(slot);
+        };
+        attach();
+        const disposeMutationObservation = installMutationObservation({
+            target: document.body,
+            observerOptions: { childList: true, subtree: true },
+            onMutation: attach,
+        });
+        return () => {
+            disposeMutationObservation();
+            slot?.remove();
+            setTarget(null);
+        };
+    }, [active]);
+    return target;
+}
+function PassiveFeedbackCard({ incident, onDismiss, onPrimary, }) {
+    const { t } = useTranslation();
+    const card = (_jsxs("section", { className: `feedback-passive-card feedback-passive-card--${incident.placement}`, role: incident.placement === 'center' ? 'alertdialog' : 'alert', "aria-modal": incident.placement === 'center' ? true : undefined, "aria-labelledby": `feedback-passive-title-${incident.id}`, children: [_jsx("button", { type: "button", className: "feedback-passive-close", "aria-label": t('feedback.passive.dismiss'), title: t('feedback.passive.dismiss'), onClick: onDismiss, children: _jsx(X, { size: 17 }) }), _jsxs("header", { className: "feedback-passive-header", children: [_jsx("span", { className: "feedback-passive-icon", "aria-hidden": "true", children: _jsx(AlertTriangle, { size: 18 }) }), _jsx("h2", { id: `feedback-passive-title-${incident.id}`, children: t(incident.titleKey) })] }), _jsx("p", { className: "feedback-passive-summary", children: incident.summary }), incident.stack && (_jsxs("details", { className: "feedback-passive-stack", children: [_jsxs("summary", { children: [t('feedback.passive.fullStack'), _jsx(ChevronDown, { size: 15 })] }), _jsx("pre", { children: incident.stack })] })), _jsxs("footer", { className: "feedback-passive-actions", children: [_jsx("button", { type: "button", className: "feedback-passive-primary", onClick: onPrimary, children: t(incident.actionKey) }), _jsx("button", { type: "button", className: "feedback-passive-ignore", onClick: onDismiss, children: t('feedback.passive.ignore') })] })] }));
+    return incident.placement === 'center'
+        ? _jsx("div", { className: "feedback-passive-backdrop", children: card })
+        : card;
+}
+export function PassiveFeedbackHost() {
+    const host = useHost();
+    const [incidents, setIncidents] = useState([]);
+    const classifier = useMemo(() => createPassiveFeedbackClassifier(), []);
+    const seenRef = useRef(loadSeen());
+    const lastHealthIdRef = useRef(0);
+    const current = incidents[0] ?? null;
+    const composerTarget = useComposerPortal(current?.placement === 'chat');
+    const enqueue = useCallback((incident) => {
+        // Requirements §4: "右下角轻量卡片。同一异常类型同一会话只询问一次,避免检测器
+        // 重复弹出。" The session-once rule is scoped to the corner placement, whose
+        // sources are polling detectors (heartbeat drift, uncaught-error windows,
+        // build retries) that would otherwise re-prompt endlessly. Center failures
+        // (save / GPU / Play / renderer / runtime) and the Agent card are per-attempt
+        // user-visible failures — muting them for the rest of the session would hide
+        // a second failed save entirely.
+        if (incident.placement === 'corner') {
+            if (seenRef.current.has(incident.exceptionKey))
+                return;
+            seenRef.current.add(incident.exceptionKey);
+            persistSeen(seenRef.current);
+        }
+        setIncidents((currentIncidents) => {
+            // Never stack the same incident, but keep differently scoped agent
+            // attempts separate so recovering one session/agent does not hide a
+            // still-unresponsive peer.
+            if (currentIncidents.some((queued) => {
+                if (queued.exceptionKey !== incident.exceptionKey)
+                    return false;
+                if (incident.placement !== 'chat' || queued.placement !== 'chat')
+                    return true;
+                return matchesPassiveFeedbackScope(queued.scope, incident.scope)
+                    && matchesPassiveFeedbackScope(incident.scope, queued.scope);
+            })) {
+                return currentIncidents;
+            }
+            return [...currentIncidents, { ...incident, id: incidentSequence++ }];
+        });
+    }, []);
+    useEffect(() => {
+        const ingest = (signal) => {
+            const incident = classifier.ingest(signal);
+            if (incident)
+                enqueue(incident);
+        };
+        const onSignal = (event) => {
+            const detail = event.detail;
+            if (detail && typeof detail.code === 'string' && typeof detail.message === 'string')
+                ingest(detail);
+        };
+        const disposeSignalObservation = installCustomEventObservation({
+            target: window,
+            eventType: PASSIVE_FEEDBACK_EVENT,
+            onEvent: onSignal,
+        });
+        const onRecovered = (event) => {
+            const detail = event.detail;
+            if (!detail || typeof detail.exceptionKey !== 'string')
+                return;
+            setIncidents((currentIncidents) => currentIncidents.filter((incident) => incident.exceptionKey !== detail.exceptionKey || !matchesPassiveFeedbackScope(incident.scope, detail.scope)));
+        };
+        const disposeRecoveredObservation = installCustomEventObservation({
+            target: window,
+            eventType: PASSIVE_FEEDBACK_RECOVERED_EVENT,
+            onEvent: onRecovered,
+        });
+        const ingestHealth = () => {
+            for (const entry of useHealthStore.getState().entries) {
+                if (entry.id <= lastHealthIdRef.current)
+                    continue;
+                lastHealthIdRef.current = entry.id;
+                ingest({ code: entry.code ?? '', message: entry.message, source: entry.source, ts: entry.ts });
+            }
+        };
+        ingestHealth();
+        const unsubscribe = useHealthStore.subscribe(ingestHealth);
+        let expected = performance.now() + 1_000;
+        const heartbeat = createIntervalTaskLifecycle({
+            intervalMs: 1_000,
+            setInterval: window.setInterval.bind(window),
+            clearInterval: (handle) => window.clearInterval(handle),
+            task: () => {
+                const now = performance.now();
+                const drift = now - expected;
+                expected = now + 1_000;
+                if (drift >= 5_000) {
+                    reportPassiveFeedbackSignal({
+                        code: 'main-thread-stall',
+                        message: `Main thread was unresponsive for ${Math.round(drift / 1_000)} seconds`,
+                    });
+                }
+            },
+        });
+        heartbeat.start();
+        return () => {
+            disposeSignalObservation();
+            disposeRecoveredObservation();
+            heartbeat.dispose();
+            unsubscribe();
+        };
+    }, [classifier, enqueue]);
+    useEffect(() => {
+        if (current?.placement !== 'chat')
+            return;
+        const state = useShellStore.getState();
+        if (state.chatpanelCollapsed)
+            state.toggleChatpanel();
+    }, [current]);
+    const dismissCurrent = useCallback(() => {
+        setIncidents((currentIncidents) => currentIncidents.slice(1));
+    }, []);
+    const submitAndRecover = useCallback(async () => {
+        if (!current)
+            return;
+        dismissCurrent();
+        await nextPaint();
+        const diagnostic = `[passive-feedback/${current.exceptionKey}] ${current.summary}${current.stack ? `\n${current.stack}` : ''}`;
+        // /api/feedback 的唯一出口是 store(见 store.ts 文件头 SSOT 注释 +
+        // scripts/agnostic-api-policy.ts);这里只描述事实,采集与上报都归它。
+        const submit = useFeedbackStore.getState().submitAuto({
+            exceptionKey: current.exceptionKey,
+            diagnostic,
+        });
+        if (current.recovery.kind === 'command') {
+            await Promise.allSettled([submit, host.commands.execute(current.recovery.commandId)]);
+            return;
+        }
+        if (current.recovery.kind === 'reload-page') {
+            await submit;
+            window.location.reload();
+            return;
+        }
+        await submit;
+    }, [current, dismissCurrent, host]);
+    if (!current)
+        return null;
+    const card = (_jsx(PassiveFeedbackCard, { incident: current, onDismiss: dismissCurrent, onPrimary: () => { void submitAndRecover(); } }));
+    if (current.placement === 'chat' && composerTarget)
+        return createPortal(card, composerTarget);
+    return card;
+}

package/dist/package/browser/components/Feedback/collect.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Feedback 静默采集器(需求 §1/§5)——打开面板或触发异常时自动采集现场信息,
+ * 提交反馈时一并带走。密钥打码、绝对路径相对化、不含项目内容。
+ *
+ * 复用宿主既有能力,不新造轮子:
+ *   - 操作轨迹  → lib/ui-trajectory readTrajectory
+ *   - 控制台日志 → StatusBar/healthBridge getBrowserConsole
+ *   - 界面截图  → lib/ui-screenshot captureUiScreenshot(调用方单独处理,这里不出图)
+ *   - 运行环境  → 无现成 helper,这里自行 navigator / window 组包(见下)
+ *
+ * best-effort:任何维度采集失败都只缺席该维度,绝不 throw 阻塞面板。
+ */
+import type { FeedbackContext } from '@forgeax/types/feedback';
+/** 汇总采集一份 FeedbackContext。各维度独立 best-effort。 */
+export declare function captureFeedbackContext(): Promise<FeedbackContext>;

package/dist/package/browser/components/Feedback/collect.js

@@ -0,0 +1,80 @@
+/**
+ * Feedback 静默采集器(需求 §1/§5)——打开面板或触发异常时自动采集现场信息,
+ * 提交反馈时一并带走。密钥打码、绝对路径相对化、不含项目内容。
+ *
+ * 复用宿主既有能力,不新造轮子:
+ *   - 操作轨迹  → lib/ui-trajectory readTrajectory
+ *   - 控制台日志 → StatusBar/healthBridge getBrowserConsole
+ *   - 界面截图  → lib/ui-screenshot captureUiScreenshot(调用方单独处理,这里不出图)
+ *   - 运行环境  → 无现成 helper,这里自行 navigator / window 组包(见下)
+ *
+ * best-effort:任何维度采集失败都只缺席该维度,绝不 throw 阻塞面板。
+ */
+import { readTrajectory } from '../../lib/ui-trajectory';
+import { getBrowserConsole } from '../StatusBar/healthBridge';
+/** 简单打码:遮蔽看起来像 token/key 的值。 */
+function redact(value) {
+    return value.replace(/(sk-[A-Za-z0-9_-]{8})[A-Za-z0-9_-]+/g, '$1…');
+}
+/** 运行环境(§5):系统 / Studio 版本 / 浏览器 / 硬件 / 窗口尺寸。 */
+function collectEnv() {
+    try {
+        const nav = navigator;
+        return {
+            userAgent: nav.userAgent,
+            platform: nav.platform,
+            language: nav.language,
+            hardwareConcurrency: nav.hardwareConcurrency,
+            deviceMemory: nav.deviceMemory,
+            viewport: { width: window.innerWidth, height: window.innerHeight },
+            screen: { width: window.screen.width, height: window.screen.height },
+            studioVersion: window.__FORGEAX_VERSION__ ?? undefined,
+        };
+    }
+    catch {
+        return {};
+    }
+}
+/** 当前会话(§5):会话 / 项目 / 页签 / 插件。宿主 store 未暴露统一快照,这里采 URL 可得的。 */
+function collectSession() {
+    try {
+        const url = new URL(window.location.href);
+        return {
+            href: url.href,
+            sid: url.searchParams.get('sid') ?? undefined,
+            game: url.searchParams.get('game') ?? undefined,
+        };
+    }
+    catch {
+        return {};
+    }
+}
+/** 运行日志(§5):最近控制台行(level + text,截断、打码)。 */
+function collectLogs(limit = 50) {
+    try {
+        return getBrowserConsole()
+            .slice(-limit)
+            .map((e) => `[${e.level}] ${redact(e.text)}`.slice(0, 500));
+    }
+    catch {
+        return [];
+    }
+}
+/** 操作轨迹(§5):最近操作步骤。 */
+function collectTrajectory(limit = 50) {
+    try {
+        return readTrajectory({ limit }).entries;
+    }
+    catch {
+        return [];
+    }
+}
+/** 汇总采集一份 FeedbackContext。各维度独立 best-effort。 */
+export async function captureFeedbackContext() {
+    return {
+        env: collectEnv(),
+        session: collectSession(),
+        trajectory: collectTrajectory(),
+        logs: collectLogs(),
+    };
+}