@khorsheed/dsh-game 0.0.0-stage → 0.1.1

package/lib/types/client/ProjectSwitcher.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The project switcher: every game as a card — the last check's screen, the
+ * title, live version, art style, element count, last change and the pitch —
+ * with the session's own project marked. The first card starts a new game:
+ * creation goes through the agent (the light gate needs the user's pitch,
+ * element kinds and style), so it writes an opener into the composer.
+ */
+import { useEffect, useState } from 'react';
+import { artStyleLabel, artStyleName } from "../project.js";
+import { failureOf } from "./contract.js";
+import css from './GameTab.module.css';
+/** "3 分钟前" style relative time. */
+function ago(t, iso) {
+    const ms = Date.now() - new Date(iso).getTime();
+    if (!Number.isFinite(ms))
+        return '';
+    const min = Math.round(ms / 60000);
+    if (min < 1)
+        return t('switcher.justNow');
+    if (min < 60)
+        return t('switcher.minutes', { count: min });
+    const h = Math.round(min / 60);
+    if (h < 24)
+        return t('switcher.hours', { count: h });
+    return t('switcher.days', { count: Math.round(h / 24) });
+}
+/** The last path segment (the project folder), the full path goes in the tooltip. */
+function folderOf(root) {
+    return root.split(/[\\/]/).filter(Boolean).pop() ?? root;
+}
+/** The card grid. */
+export function ProjectSwitcher({ t, api, sessionId, currentId, rev, onChoose, onNew, refresh, toast }) {
+    const [cards, setCards] = useState(null);
+    const [reload, setReload] = useState(0);
+    // The card being deleted: its inline confirmation, and the last failure to explain there.
+    const [confirming, setConfirming] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        let live = true;
+        void api.projectCards().then(r => { if (live)
+            setCards(r.ok ? r.value : []); }).catch(() => { if (live)
+            setCards([]); });
+        return () => { live = false; };
+    }, [api, rev, reload]);
+    const remove = (card, mode) => {
+        setBusy(true);
+        void api.deleteProject(sessionId, card.id, mode).then(r => {
+            setBusy(false);
+            const failure = failureOf(r);
+            if (failure !== undefined) {
+                const why = r.ok && !r.value.ok ? r.value.reason ?? '' : '';
+                const reason = failure === 'trash-failed' ? t('switcher.deleteTrashFailed', { reason: why })
+                    : failure === 'not-a-project' ? t('switcher.deleteNotProject')
+                        : failure === 'is-workspace' ? t('switcher.deleteIsWorkspace')
+                            : failure === 'denied' ? t('switcher.deleteDenied') : failure;
+                setConfirming({ id: card.id, error: reason });
+                return;
+            }
+            setConfirming(null);
+            toast(mode === 'trash' ? t('switcher.deletedTrash', { title: card.title }) : t('switcher.deletedForget', { title: card.title }));
+            setReload(n => n + 1);
+            refresh();
+        });
+    };
+    return _jsxs("div", { className: css.projectGrid, children: [_jsxs("button", { type: "button", className: css.newCard, onClick: onNew, children: [_jsx("span", { className: css.newPlus, "aria-hidden": "true", children: "\uFF0B" }), _jsx("strong", { children: t('switcher.new') }), _jsx("span", { className: css.metaLine, children: t('switcher.newHint') })] }), cards === null && _jsx("div", { className: css.projectCard, "data-loading": "true", children: _jsx("span", { className: css.metaLine, children: t('loading') }) }), cards?.map(card => {
+                const current = card.id === currentId;
+                if (confirming?.id === card.id) {
+                    return _jsx("div", { className: css.projectCard, "data-confirm": "true", role: "group", "aria-label": t('switcher.deleteTitle', { title: card.title }), children: _jsxs("span", { className: css.projectBody, children: [_jsx("strong", { className: css.projectTitle, children: t('switcher.deleteTitle', { title: card.title }) }), _jsx("span", { className: css.metaLine, children: t('switcher.deleteBody', { folder: card.root }) }), confirming.error !== undefined && _jsx("span", { className: css.deleteError, children: confirming.error }), _jsxs("span", { className: css.deleteActions, children: [_jsx("button", { type: "button", className: css.danger, disabled: busy, onClick: () => { remove(card, 'trash'); }, children: t('switcher.deleteTrash') }), _jsx("button", { type: "button", className: css.ghost, disabled: busy, onClick: () => { remove(card, 'forget'); }, children: t('switcher.deleteForget') }), _jsx("button", { type: "button", className: css.link, disabled: busy, onClick: () => { setConfirming(null); }, children: t('switcher.deleteCancel') })] })] }) }, card.id);
+                }
+                return _jsxs("div", { className: css.projectCardWrap, children: [_jsxs("button", { type: "button", className: css.projectCard, "aria-current": current ? 'true' : undefined, title: card.root, onClick: () => { onChoose(card.id); }, children: [_jsxs("span", { className: css.projectThumb, children: [card.thumb !== undefined
+                                            ? _jsx("img", { src: `data:image/webp;base64,${card.thumb}`, alt: "" })
+                                            : _jsx("span", { className: css.projectInitial, children: card.title.slice(0, 1) }), current && _jsx("span", { className: css.projectHere, children: t('switcher.here') })] }), _jsxs("span", { className: css.projectBody, children: [_jsx("strong", { className: css.projectTitle, children: card.title }), _jsxs("span", { className: css.projectChips, children: [_jsx("span", { className: css.headChip, "data-tone": card.version === null ? 'muted' : 'ok', children: card.version === null ? t('switcher.noVersion') : `v${card.version}` }), card.artStyle !== '' && _jsx("span", { className: css.headChip, title: artStyleLabel(card.artStyle), children: artStyleName(card.artStyle) }), _jsx("span", { className: css.headChip, children: t('switcher.elements', { count: card.elements }) })] }), card.pitch !== '' && _jsx("span", { className: css.projectPitch, children: card.pitch }), _jsxs("span", { className: css.metaLine, children: [ago(t, card.updatedAt), " \u00B7 ", folderOf(card.root)] })] })] }), _jsx("button", { type: "button", className: css.projectDelete, "aria-label": t('switcher.delete', { title: card.title }), title: t('switcher.delete', { title: card.title }), onClick: () => { setConfirming({ id: card.id }); }, children: "\u00D7" })] }, card.id);
+            })] });
+}

package/lib/types/client/Recipe3DEditor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The 3D look editor: a `parts3d` recipe as sliders and color wells,
+ * generated from the recipe itself — proportions, every part's numbers
+ * (built-in keys and a project part's own `extra` numbers alike), palette,
+ * motions and scale. Nothing here knows a theme: a project's own bodies and
+ * parts get the same controls as the built-ins.
+ */
+import type { ReactNode } from 'react';
+import type { TranslateNS } from '@deepseek-ai/dsh-client-locale/client';
+import type { Parts3DLook } from '../types.ts';
+/** Props of {@link Recipe3DEditor}. */
+export interface Recipe3DEditorProps {
+    readonly t: TranslateNS<'game'>;
+    readonly look: Parts3DLook;
+    readonly onChange: (next: Parts3DLook) => void;
+}
+/** The recipe editor. */
+export declare function Recipe3DEditor({ t, look, onChange }: Recipe3DEditorProps): ReactNode;
+//# sourceMappingURL=Recipe3DEditor.d.ts.map

package/lib/types/client/Recipe3DEditor.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zh } from "./locales.js";
+import css from './GameTab.module.css';
+/** Integer counts and their ranges (the validator's, mirrored). */
+const COUNT_RANGE = { legs: [0, 8], heads: [1, 9], segments: [3, 40], count: [1, 12] };
+/** Part numbers and their ranges (the validator's, mirrored). */
+const PART_RANGE = {
+    size: [0.05, 3, 0.01], length: [0.05, 3, 0.01], fan: [0, 360, 5], thickness: [0.01, 0.5, 0.005],
+};
+/** The controls each built-in part always gets, with the value dsh3d uses when the recipe leaves it out. */
+const PART_DEFAULTS = {
+    ear: { count: 2, size: 0.15 }, horn: { count: 2, length: 0.25 }, tail: { count: 1, length: 0.9, fan: 0, thickness: 0.09 },
+    wing: { count: 2, size: 1 }, fin: { count: 2, size: 1 }, eye: { count: 2 },
+};
+/** A label for a recipe key: the dictionary's when it has one, else the key itself. */
+function labelOf(t, key) {
+    const k = `recipe.key.${key}`;
+    return Object.hasOwn(zh, k) ? t(k) : key;
+}
+function Slider({ label, value, min, max, step, onChange }) {
+    return _jsxs("label", { className: css.param, children: [_jsx("span", { className: css.paramLabel, children: label }), _jsx("input", { type: "range", className: css.range, min: min, max: max, step: step, value: value, onChange: e => { onChange(Number(e.target.value)); } }), _jsx("span", { className: css.paramValue, children: step >= 1 ? String(Math.round(value)) : value.toFixed(step < 0.01 ? 3 : 2) })] });
+}
+/** The recipe editor. */
+export function Recipe3DEditor({ t, look, onChange }) {
+    const setProportion = (key, v) => { onChange({ ...look, proportions: { ...look.proportions, [key]: v } }); };
+    const setPart = (index, patch) => {
+        onChange({ ...look, parts: look.parts.map((p, i) => (i === index ? { ...p, ...patch } : p)) });
+    };
+    const setMotion = (name, patch) => {
+        onChange({ ...look, motion: { ...look.motion, [name]: { ...look.motion[name], ...patch } } });
+    };
+    const proportions = Object.entries(look.proportions);
+    const motions = Object.entries(look.motion);
+    return _jsxs("div", { className: css.recipe, children: [_jsx("p", { className: css.metaLine, children: t('recipe.base', { base: labelOf(t, look.base) }) }), proportions.length > 0 && _jsxs("section", { className: css.recipeGroup, children: [_jsx("h4", { className: css.blockTitle, children: t('recipe.proportions') }), proportions.map(([key, value]) => {
+                        const count = COUNT_RANGE[key];
+                        return _jsx(Slider, { label: labelOf(t, key), value: value, min: count?.[0] ?? 0.05, max: count?.[1] ?? 3, step: count === undefined ? 0.01 : 1, onChange: v => { setProportion(key, v); } }, key);
+                    })] }), look.parts.length > 0 && _jsxs("section", { className: css.recipeGroup, children: [_jsx("h4", { className: css.blockTitle, children: t('recipe.parts') }), look.parts.map((part, index) => _jsxs("div", { className: css.recipePart, children: [_jsx("strong", { className: css.recipePartName, children: labelOf(t, part.type) }), (part.count !== undefined || PART_DEFAULTS[part.type]?.count !== undefined) && _jsx(Slider, { label: labelOf(t, 'count'), value: part.count ?? PART_DEFAULTS[part.type].count, min: 1, max: 12, step: 1, onChange: v => { setPart(index, { count: v }); } }), ['size', 'length', 'fan', 'thickness'].filter(k => part[k] !== undefined || PART_DEFAULTS[part.type]?.[k] !== undefined).map(k => {
+                                const [min, max, step] = PART_RANGE[k];
+                                return _jsx(Slider, { label: labelOf(t, k), value: part[k] ?? PART_DEFAULTS[part.type][k], min: min, max: max, step: step, onChange: v => { setPart(index, { [k]: v }); } }, k);
+                            }), Object.entries(part.extra ?? {}).filter((e) => typeof e[1] === 'number').map(([k, v]) => {
+                                const span = Math.max(1, Math.abs(v) * 2);
+                                return _jsx(Slider, { label: labelOf(t, k), value: v, min: v < 0 ? -span : 0, max: span, step: span > 20 ? 1 : 0.01, onChange: next => { setPart(index, { extra: { ...part.extra, [k]: next } }); } }, k);
+                            })] }, index))] }), Object.keys(look.palette).length > 0 && _jsxs("section", { className: css.recipeGroup, children: [_jsx("h4", { className: css.blockTitle, children: t('recipe.palette') }), _jsx("div", { className: css.recipeColors, children: Object.entries(look.palette).map(([key, color]) => _jsxs("label", { className: css.recipeColor, children: [_jsx("input", { type: "color", value: color, onChange: e => { onChange({ ...look, palette: { ...look.palette, [key]: e.target.value } }); } }), _jsx("span", { children: labelOf(t, key) })] }, key)) })] }), motions.length > 0 && _jsxs("section", { className: css.recipeGroup, children: [_jsx("h4", { className: css.blockTitle, children: t('recipe.motion') }), motions.map(([name, m]) => _jsxs("div", { className: css.recipePart, children: [_jsx("strong", { className: css.recipePartName, children: labelOf(t, name) }), _jsx(Slider, { label: labelOf(t, 'amplitude'), value: m.amplitude ?? 0, min: 0, max: name === 'breath' || name === 'bob' ? 0.5 : 90, step: name === 'breath' || name === 'bob' ? 0.005 : 1, onChange: v => { setMotion(name, { amplitude: v }); } }), _jsx(Slider, { label: labelOf(t, 'period'), value: m.period ?? 1.5, min: 0.1, max: 10, step: 0.1, onChange: v => { setMotion(name, { period: v }); } })] }, name))] }), _jsx("section", { className: css.recipeGroup, children: _jsx(Slider, { label: labelOf(t, 'scale'), value: look.scale ?? 1, min: 0.2, max: 5, step: 0.05, onChange: v => { onChange({ ...look, scale: v }); } }) })] });
+}

package/lib/types/client/StyleGallery.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The art-style gallery (decision D10): the same little scene drawn in each
+ * built-in style, so the choice is made by looking. Before a project exists
+ * a pick puts 「美术风格选 X」 into the composer; inside a project it asks
+ * for a restyle — everything is redrawn and the result always waits as a
+ * candidate.
+ */
+import { type ReactNode } from 'react';
+import type { ViewProps } from './contract.ts';
+/** Props of the gallery. */
+export interface StyleGalleryProps {
+    readonly t: ViewProps['t'];
+    readonly current?: string | undefined;
+    readonly onPick: (styleId: string, label: string) => void;
+}
+/** The gallery grid. */
+export declare function StyleGallery({ t, current, onPick }: StyleGalleryProps): ReactNode;
+//# sourceMappingURL=StyleGallery.d.ts.map

package/lib/types/client/StyleGallery.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The art-style gallery (decision D10): the same little scene drawn in each
+ * built-in style, so the choice is made by looking. Before a project exists
+ * a pick puts 「美术风格选 X」 into the composer; inside a project it asks
+ * for a restyle — everything is redrawn and the result always waits as a
+ * candidate.
+ */
+import { useEffect, useRef } from 'react';
+import { ART_STYLES } from "../types.js";
+import { drawStyleSample } from "./style-samples.js";
+import css from './GameTab.module.css';
+/** One sample canvas. */
+function Sample({ styleId }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const canvas = ref.current;
+        const g = canvas?.getContext('2d');
+        if (canvas && g)
+            drawStyleSample(g, styleId, canvas.width, canvas.height);
+    }, [styleId]);
+    return _jsx("canvas", { ref: ref, className: css.sample, width: 200, height: 112, "aria-hidden": "true" });
+}
+/** The gallery grid. */
+export function StyleGallery({ t, current, onPick }) {
+    return _jsx("div", { className: css.gallery, children: ART_STYLES.map(style => _jsxs("button", { type: "button", className: css.styleCard, "aria-pressed": current === style.id, onClick: () => { onPick(style.id, style.label); }, children: [_jsx(Sample, { styleId: style.id }), _jsxs("span", { className: css.styleName, children: [style.label, current === style.id && _jsx("span", { className: css.badge, children: t('style.current') })] }), _jsx("span", { className: css.metaLine, children: style.look }), _jsx("span", { className: css.paletteStrip, "aria-hidden": "true", children: style.palette.slice(0, 8).map(c => _jsx("span", { style: { background: c } }, c)) })] }, style.id)) });
+}

package/lib/types/client/TurnCard.d.ts

@@ -0,0 +1,62 @@
+/**
+ * The turn card: beneath each finished agent turn (the `conversation.chat.turnTail`
+ * seat, outside the fold — the canvas-novel precedent), what the turn changed
+ * in the game: the version that went live or waits as a candidate, the
+ * check, elements, design chapters, parameters, code and tests — each with a
+ * jump to the place in the game tab where the change can be seen.
+ */
+import { type ReactNode } from 'react';
+import type { TranslateNS } from '@deepseek-ai/dsh-client-locale/client';
+import type { GameTabInjected } from './contract.ts';
+/** The key this package's turn data lives under. */
+export declare const GAME_TURN_KEY = "dsh-game-turn";
+interface EventLike {
+    readonly type: string;
+    readonly data?: unknown;
+}
+interface TurnState {
+    readonly turn: number;
+    readonly ended: boolean;
+}
+interface LocationData {
+    readonly kind: 'turn';
+    readonly turn: number;
+    readonly key: string;
+    readonly value: TurnState;
+}
+/** Tracks each turn's number and whether it ended; the report itself comes from the host. */
+export declare const gameTurnDefinition: {
+    kind: string;
+    match(event: EventLike): {
+        id: string;
+        role: "start" | "update";
+    } | null;
+    start(_context: unknown, match: {
+        event: EventLike;
+    }): TurnState;
+    update(context: {
+        readonly state: TurnState;
+    }, match: {
+        event: EventLike;
+    }): TurnState;
+    buildLocationData(context: {
+        readonly state: TurnState | undefined;
+    }, scope: string, previous: LocationData | null | undefined): LocationData | null;
+};
+/** Props of the card (ui-chat's turn-tail owner props, structurally, plus our face). */
+export type GameTurnCardProps = GameTabInjected & {
+    readonly sessionId: string;
+    readonly turn: {
+        readonly data: {
+            get: (key: string) => unknown;
+        };
+        readonly end?: {
+            readonly seq: number;
+        } | null;
+    };
+    readonly t: TranslateNS<'game'>;
+};
+/** The card. Renders nothing until the turn ended and only when it changed something. */
+export declare function GameTurnCard(props: GameTurnCardProps): ReactNode;
+export {};
+//# sourceMappingURL=TurnCard.d.ts.map

package/lib/types/client/TurnCard.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The turn card: beneath each finished agent turn (the `conversation.chat.turnTail`
+ * seat, outside the fold — the canvas-novel precedent), what the turn changed
+ * in the game: the version that went live or waits as a candidate, the
+ * check, elements, design chapters, parameters, code and tests — each with a
+ * jump to the place in the game tab where the change can be seen.
+ */
+import { useEffect, useState } from 'react';
+import { normalizeLook3d } from "../look3d.js";
+import { Preview3D } from "./Preview3D.js";
+import css from './TurnCard.module.css';
+/** The key this package's turn data lives under. */
+export const GAME_TURN_KEY = 'dsh-game-turn';
+function turnOf(event) {
+    const turn = event.data?.turn;
+    return typeof turn === 'number' ? turn : null;
+}
+/** Tracks each turn's number and whether it ended; the report itself comes from the host. */
+export const gameTurnDefinition = {
+    kind: GAME_TURN_KEY,
+    match(event) {
+        const turn = turnOf(event);
+        if (turn === null)
+            return null;
+        if (event.type === 'turn/start')
+            return { id: String(turn), role: 'start' };
+        if (event.type === 'turn/end')
+            return { id: String(turn), role: 'update' };
+        return null;
+    },
+    start(_context, match) {
+        return { turn: turnOf(match.event) ?? -1, ended: false };
+    },
+    update(context, match) {
+        return match.event.type === 'turn/end' ? { ...context.state, ended: true } : context.state;
+    },
+    buildLocationData(context, scope, previous) {
+        if (scope !== 'turn' || context.state === undefined)
+            return null;
+        if (previous?.kind === 'turn' && previous.turn === context.state.turn && previous.value.ended === context.state.ended)
+            return previous;
+        return { kind: 'turn', turn: context.state.turn, key: GAME_TURN_KEY, value: context.state };
+    },
+};
+/** One line of the card. */
+function Row({ icon, tone, children, go, t, onGo }) {
+    return _jsxs("li", { className: css.row, "data-tone": tone, children: [_jsx("span", { className: css.icon, "aria-hidden": "true", children: icon }), _jsx("span", { className: css.text, children: children }), go !== undefined && _jsx("button", { type: "button", className: css.go, onClick: () => { onGo(go); }, children: t('turn.see') })] });
+}
+/** A 3D look's change as two stills side by side (rendered lazily in the sandbox, then cached as images). */
+function BeforeAfter({ t, api, projectId, version, looks }) {
+    const parse = (json) => {
+        if (json === null)
+            return null;
+        try {
+            return normalizeLook3d(JSON.parse(json));
+        }
+        catch {
+            return null;
+        }
+    };
+    const before = parse(looks.before), after = parse(looks.after);
+    if (after === null)
+        return null;
+    return _jsxs("span", { className: css.beforeAfter, children: [before !== null && _jsxs("figure", { children: [_jsx(Preview3D, { api: api, projectId: projectId, version: version, look: before, mode: "still", className: css.still, emptyLabel: "" }), _jsx("figcaption", { children: t('turn.lookBefore') })] }), before !== null && _jsx("span", { className: css.arrow, "aria-hidden": "true", children: "\u2192" }), _jsxs("figure", { children: [_jsx(Preview3D, { api: api, projectId: projectId, version: version, look: after, mode: "still", className: css.still, emptyLabel: "" }), _jsx("figcaption", { children: t('turn.lookAfter') })] })] });
+}
+/** The card. Renders nothing until the turn ended and only when it changed something. */
+export function GameTurnCard(props) {
+    const { t, api, sessionId, openAt, subscribeSessionEvents } = props;
+    let state;
+    try {
+        state = props.turn.data.get(GAME_TURN_KEY) ?? undefined;
+    }
+    catch {
+        state = undefined;
+    }
+    const turn = state?.turn;
+    const ended = state?.ended === true || props.turn.end != null;
+    const [report, setReport] = useState(null);
+    const [rev, setRev] = useState(0);
+    useEffect(() => subscribeSessionEvents(id => { if (id === sessionId)
+        setRev(n => n + 1); }), [subscribeSessionEvents, sessionId]);
+    useEffect(() => {
+        if (turn === undefined || !ended)
+            return;
+        let live = true;
+        // The host writes the report right after turn/end; a second read covers the race.
+        const read = () => api.turnReport(sessionId, turn).then(r => { if (live && r.ok)
+            setReport(r.value); }).catch(() => { });
+        void read();
+        const again = setTimeout(() => { void read(); }, 1500);
+        return () => { live = false; clearTimeout(again); };
+    }, [api, sessionId, turn, ended, rev]);
+    if (report === null)
+        return null;
+    const looks = report.elements.filter(e => e.what === 'look' || e.what === 'new');
+    const fieldOnly = report.elements.filter(e => e.what === 'fields');
+    const removed = report.elements.filter(e => e.what === 'removed');
+    return _jsxs("section", { className: css.card, "aria-label": t('turn.title', { title: report.title }), children: [_jsxs("header", { className: css.head, children: [_jsx("span", { className: css.badge, "aria-hidden": "true", children: "\u25C6" }), _jsx("strong", { children: t('turn.title', { title: report.title }) }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.open, onClick: () => { openAt({ view: 'play' }); }, children: t('turn.openPanel') })] }), _jsxs("ul", { className: css.list, children: [report.version !== null && _jsxs(Row, { t: t, onGo: openAt, icon: "\u25B6", tone: report.version.kind === 'deployed' ? 'ok' : 'warn', go: { view: 'play' }, children: [report.version.kind === 'deployed' ? t('turn.deployed', { version: report.version.version }) : t('turn.candidate', { version: report.version.version }), report.check !== null && report.check.ok && _jsxs("span", { className: css.meta, children: [t('turn.checkOk', { passed: report.check.passed }), report.check.fixes > 0 ? ` · ${t('turn.fixed', { count: report.check.fixes })}` : ''] })] }), report.check !== null && !report.check.ok && _jsx(Row, { t: t, onGo: openAt, icon: "!", tone: report.check.gaveUp ? 'warn' : 'error', go: { view: 'versions' }, children: report.check.gaveUp ? t('turn.gaveUp', { count: report.check.failures }) : t('turn.checkFailed', { count: report.check.failures }) }), looks.map(e => _jsxs(Row, { t: t, onGo: openAt, icon: "\u25C7", go: { view: 'elements', elementId: e.id }, children: [e.what === 'new' ? t('turn.elementNew', { name: e.name }) : t('turn.elementLook', { name: e.name }), e.looks !== undefined && _jsx(BeforeAfter, { t: t, api: api, projectId: report.projectId, version: report.version?.version ?? 0, looks: e.looks })] }, `l${e.id}`)), fieldOnly.length > 0 && fieldOnly.map(e => _jsx(Row, { t: t, onGo: openAt, icon: "\u25C7", go: { view: 'elements', elementId: e.id }, children: t('turn.elementFields', { name: e.name, fields: (e.fields ?? []).slice(0, 4).join('、') }) }, `f${e.id}`)), removed.length > 0 && _jsx(Row, { t: t, onGo: openAt, icon: "\u2212", go: { view: 'elements' }, children: t('turn.elementRemoved', { names: removed.map(e => e.name).join('、') }) }), report.chapters.map(c => _jsx(Row, { t: t, onGo: openAt, icon: "\u00B6", go: { view: 'design', chapterId: c.id }, children: t('turn.chapter', { title: c.title }) }, `c${c.id}`)), report.params.length > 0 && _jsx(Row, { t: t, onGo: openAt, icon: "\u2261", go: { view: 'play' }, children: t('turn.params', { list: report.params.slice(0, 4).map(p => (p.from === undefined ? `${p.label} ${p.to}` : `${p.label} ${p.from}→${p.to}`)).join('、') }) }), report.code.length > 0 && _jsxs(Row, { t: t, onGo: openAt, icon: "{}", go: { view: 'versions' }, children: [t('turn.code', { count: report.code.length }), _jsxs("span", { className: css.meta, children: [report.code.slice(0, 3).join('、'), report.code.length > 3 ? '…' : ''] })] }), report.tests.length > 0 && _jsx(Row, { t: t, onGo: openAt, icon: "\u2713", go: { view: 'versions' }, children: t('turn.tests', { count: report.tests.length }) })] })] });
+}

package/lib/types/client/VersionsView.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 版本: the last check (verdict, findings, the screenshot the headless run
+ * took), the version timeline (current / candidate / rejected / past, with
+ * 切回 and 与当前对比), the playtest log, and the single-file export.
+ */
+import { type ReactNode } from 'react';
+import type { ProjectView } from '../types.ts';
+import { type ViewProps } from './contract.ts';
+/** Props of the versions view. */
+export interface VersionsViewProps extends ViewProps {
+    readonly project: ProjectView;
+}
+/** `MM-DD HH:mm` in local time. */
+export declare function shortTime(iso: string): string;
+/** The versions view. */
+export declare function VersionsView({ t, sessionId, api, project, refresh, toast }: VersionsViewProps): ReactNode;
+//# sourceMappingURL=VersionsView.d.ts.map

package/lib/types/client/VersionsView.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 版本: the last check (verdict, findings, the screenshot the headless run
+ * took), the version timeline (current / candidate / rejected / past, with
+ * 切回 and 与当前对比), the playtest log, and the single-file export.
+ */
+import { useEffect, useState } from 'react';
+import { exportHtml } from "../vfs.js";
+import { failureOf } from "./contract.js";
+import css from './GameTab.module.css';
+/** `MM-DD HH:mm` in local time. */
+export function shortTime(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+/** Download a text file from the panel (a user gesture in the host page). */
+function download(name, text) {
+    const url = URL.createObjectURL(new Blob([text], { type: 'text/html' }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    setTimeout(() => { URL.revokeObjectURL(url); }, 2000);
+}
+/** The versions view. */
+export function VersionsView({ t, sessionId, api, project, refresh, toast }) {
+    const check = project.lastCheck;
+    const [shot, setShot] = useState(null);
+    const [diffFor, setDiffFor] = useState(null);
+    const [diff, setDiff] = useState(null);
+    const current = project.current?.version;
+    useEffect(() => {
+        let live = true;
+        void api.checkShot(project.id).then(r => { if (live)
+            setShot(r.ok && r.value.ok ? r.value.webp : null); });
+        return () => { live = false; };
+    }, [api, project.id, check?.at]);
+    useEffect(() => {
+        if (diffFor === null || current === undefined) {
+            setDiff(null);
+            return;
+        }
+        let live = true;
+        void api.diff(project.id, diffFor, current).then(r => { if (live)
+            setDiff(r.ok && r.value.ok ? r.value.diff : null); });
+        return () => { live = false; };
+    }, [api, project.id, diffFor, current]);
+    const exportVersion = (version) => {
+        void api.versionBundle(project.id, version).then(r => {
+            if (!(r.ok && r.value.ok)) {
+                toast(t('versions.exportFailed'));
+                return;
+            }
+            download(`${project.title}-v${version}.html`, exportHtml(project.title, r.value.bundle.files));
+            toast(t('toast.exported', { version }));
+        });
+    };
+    return _jsxs("div", { className: css.scroll, children: [_jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('versions.lastCheck') }), check === null
+                        ? _jsx("p", { className: css.lead, children: t('checks.none') })
+                        : _jsxs("div", { className: css.checkCard, "data-tone": check.ok ? 'ok' : check.gaveUp ? 'warn' : 'error', children: [_jsxs("div", { className: css.checkHead, children: [_jsx("strong", { children: check.ok ? t('checks.ok') : t('checks.fail') }), _jsxs("span", { className: css.metaLine, children: [shortTime(check.at), check.attempt > 0 ? ` · ${t('checks.attempt', { attempt: check.attempt })}` : '', check.passed > 0 ? ` · ${t('checks.passed', { count: check.passed })}` : ''] })] }), _jsxs("ol", { className: css.layers, children: [_jsx("li", { "data-ok": check.failures.some(f => f.where === 'data' || f.where.startsWith('elements/')) ? 'false' : 'true', children: t('checks.layerData') }), _jsx("li", { "data-ok": check.skipped !== undefined ? 'skip' : check.failures.some(f => f.where === 'smoke') ? 'false' : 'true', children: t('checks.layerSmoke') }), _jsx("li", { "data-ok": check.skipped !== undefined ? 'skip' : check.failures.some(f => f.where.startsWith('tests/')) ? 'false' : 'true', children: t('checks.layerTests') })] }), check.gaveUp === true && _jsx("p", { className: css.warnText, children: t('checks.gaveUp') }), check.skipped !== undefined && _jsx("p", { className: css.metaLine, children: check.skipped }), check.failures.length > 0 && _jsx("ul", { className: css.findings, children: check.failures.map((f, i) => _jsxs("li", { children: [_jsx("code", { children: f.where }), _jsx("span", { children: f.message })] }, i)) }), shot !== null && _jsxs("figure", { className: css.shot, children: [_jsx("img", { src: `data:image/webp;base64,${shot}`, alt: t('versions.shotAlt') }), _jsx("figcaption", { className: css.metaLine, children: t('versions.shotCaption') })] })] })] }), _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('versions.title') }), project.versions.length === 0 && _jsx("p", { className: css.lead, children: t('versions.none') }), _jsx("ol", { className: css.timeline, children: project.versions.map((v) => _jsxs("li", { className: css.tlItem, "data-status": v.status, children: [_jsx("span", { className: css.tlDot, "aria-hidden": "true" }), _jsxs("div", { className: css.tlBody, children: [_jsxs("div", { className: css.tlHead, children: [_jsxs("strong", { children: ["v", v.version] }), _jsx("span", { className: css.tlTag, "data-status": v.status, children: t(`versions.status.${v.status}`) }), v.by !== undefined && _jsx("span", { className: css.tlBy, "data-by": v.by, children: t(`versions.by.${v.by}`) }), _jsx("span", { className: css.metaLine, children: shortTime(v.at) })] }), v.note !== undefined && _jsx("span", { className: css.metaLine, children: v.note }), _jsxs("div", { className: css.tlActions, children: [v.status !== 'current' && v.status !== 'candidate' && _jsx("button", { type: "button", className: css.link, onClick: () => {
+                                                        void api.rollback(sessionId, project.id, v.version).then(r => { if (failureOf(r) === undefined)
+                                                            toast(t('toast.rolledBack', { version: v.version })); refresh(); });
+                                                    }, children: t('versions.rollback') }), current !== undefined && v.version !== current && _jsx("button", { type: "button", className: css.link, "aria-pressed": diffFor === v.version, onClick: () => { setDiffFor(d => (d === v.version ? null : v.version)); }, children: t('versions.compare', { version: current }) }), _jsx("button", { type: "button", className: css.link, onClick: () => { exportVersion(v.version); }, children: t('versions.export') })] }), diffFor === v.version && diff !== null && _jsxs("div", { className: css.diff, children: [diff.added.length + diff.removed.length + diff.changed.length === 0 && _jsx("span", { className: css.metaLine, children: t('versions.same') }), diff.changed.map(f => _jsxs("span", { "data-kind": "changed", children: ["~ ", f] }, f)), diff.added.map(f => _jsxs("span", { "data-kind": "added", children: ["+ ", f] }, f)), diff.removed.map(f => _jsxs("span", { "data-kind": "removed", children: ["\u2212 ", f] }, f))] })] })] }, v.version)) })] }), _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('versions.share') }), _jsx("p", { className: css.metaLine, children: t('versions.shareNote') }), _jsx("div", { className: css.rowEnd, children: _jsx("button", { type: "button", className: css.primary, disabled: current === undefined, onClick: () => { if (current !== undefined)
+                                exportVersion(current); }, children: t('versions.exportCurrent') }) }), _jsx("p", { className: css.metaLine, children: t('versions.later') })] }), _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('versions.log') }), project.log.length === 0 && _jsx("p", { className: css.metaLine, children: t('versions.logEmpty') }), _jsx("ul", { className: css.logList, children: project.log.slice(0, 30).map((e, i) => _jsxs("li", { children: [_jsx("span", { className: css.logTime, children: shortTime(e.at) }), _jsx("span", { children: e.text })] }, i)) })] })] });
+}

package/lib/types/client/chat-node.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The game's rows in the conversation (proposal option B): the messages the
+ * plugin puts into a turn — check findings steered back to the agent, and
+ * the panel changes attached to a send — are `dsh-game`-sourced user
+ * messages, which the official chat view projects as hidden `context` nodes.
+ * This Definition projects the same events into our own node kind and a
+ * keyed `conversation.chat.node` renderer draws them as one collapsible row:
+ * red 「检查未通过 1/2」 with the findings, grey 「已附上」 with the items.
+ * The official node stays hidden, so nothing renders twice (the
+ * message-tools restored-row precedent).
+ */
+import { type ReactNode } from 'react';
+import type { ConversationNodeDefinition } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+/** The chat node kind (also the renderer's key). */
+export declare const GAME_CHAT_KIND = "dsh-game-message";
+/** What the row needs from the persisted message. */
+export interface GameChatData {
+    readonly seq: number;
+    readonly time: number;
+    readonly op: 'check-failed' | 'attached' | 'other';
+    readonly attempt: number;
+    readonly cap: number;
+    readonly failures: readonly {
+        readonly where: string;
+        readonly message: string;
+    }[];
+    readonly items: readonly string[];
+    readonly text: string;
+}
+declare module '@deepseek-ai/dsh-client-ui-chat/client' {
+    interface ChatNodeDataMap {
+        'dsh-game-message': GameChatData;
+    }
+}
+/** The projection: every appended `dsh-game` user message becomes one row. */
+export declare const gameMessageDefinition: ConversationNodeDefinition<GameChatData>;
+/** Props of the row renderer. */
+export type GameChatRowProps = PropsRuntime<'conversation.chat.node', 'dsh-game-message'> & PropsLocale<'game'>;
+/** The collapsible row. */
+export declare function GameChatRow({ node, t }: GameChatRowProps): ReactNode;
+//# sourceMappingURL=chat-node.d.ts.map

package/lib/types/client/chat-node.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The game's rows in the conversation (proposal option B): the messages the
+ * plugin puts into a turn — check findings steered back to the agent, and
+ * the panel changes attached to a send — are `dsh-game`-sourced user
+ * messages, which the official chat view projects as hidden `context` nodes.
+ * This Definition projects the same events into our own node kind and a
+ * keyed `conversation.chat.node` renderer draws them as one collapsible row:
+ * red 「检查未通过 1/2」 with the findings, grey 「已附上」 with the items.
+ * The official node stays hidden, so nothing renders twice (the
+ * message-tools restored-row precedent).
+ */
+import { useState } from 'react';
+import { isAppendSurfaceEvent } from '@deepseek-ai/dsh-session/surface';
+import css from './ChatRow.module.css';
+/** The chat node kind (also the renderer's key). */
+export const GAME_CHAT_KIND = 'dsh-game-message';
+/** Whether a message source is ours. */
+function isGameSource(source) {
+    return source?.kind === 'dsh-game';
+}
+/** The source's structured part, defensively. */
+function dataOf(seq, time, source, content) {
+    const text = content.map(block => block.type === 'text' ? block.text : '').join('\n');
+    const op = source.op === 'check-failed' || source.op === 'attached' ? source.op : 'other';
+    const failures = Array.isArray(source.failures)
+        ? source.failures.filter((f) => typeof f?.where === 'string' && typeof f.message === 'string')
+        : [];
+    const items = Array.isArray(source.items) ? source.items.filter((i) => typeof i === 'string') : [];
+    return {
+        seq, time, op, text, failures, items,
+        attempt: typeof source.attempt === 'number' ? source.attempt : 0,
+        cap: typeof source.cap === 'number' ? source.cap : 2,
+    };
+}
+/** The projection: every appended `dsh-game` user message becomes one row. */
+export const gameMessageDefinition = {
+    kind: GAME_CHAT_KIND,
+    target: 'chat',
+    match: (event) => {
+        if (event.type !== 'user/message' || !isAppendSurfaceEvent(event) || !isGameSource(event.data.source))
+            return null;
+        return { id: String(event.seq), role: 'start' };
+    },
+    start: (_context, match) => {
+        const event = match.event;
+        if (event.type !== 'user/message' || !isGameSource(event.data.source))
+            throw new Error('dsh-game row requires a dsh-game message');
+        return dataOf(event.seq, event.time, event.data.source, event.data.content);
+    },
+    update: context => context.state,
+    buildViewNode: (context) => context.state === undefined
+        ? null
+        : {
+            key: context.key,
+            kind: GAME_CHAT_KIND,
+            id: context.id,
+            target: 'chat',
+            anchorSeq: context.state.seq,
+            location: context.start?.location ?? { kind: 'unresolved' },
+            visibility: 'visible',
+            data: context.state,
+        },
+};
+/** The collapsible row. */
+export function GameChatRow({ node, t }) {
+    const data = node.data;
+    const [open, setOpen] = useState(false);
+    if (data.op === 'attached') {
+        return _jsxs("div", { className: css.wrap, "data-tone": "muted", "data-align": "end", children: [_jsxs("button", { type: "button", className: css.head, "aria-expanded": open, onClick: () => { setOpen(o => !o); }, children: [_jsx("span", { className: css.dot, "aria-hidden": "true" }), _jsx("span", { className: css.title, children: t('chat.attached', { count: data.items.length }) }), _jsxs("span", { className: css.summary, children: [data.items.slice(0, 2).join(' · '), data.items.length > 2 ? ' …' : ''] }), _jsx("span", { className: css.chevron, "aria-hidden": "true", children: open ? '▾' : '▸' })] }), open && _jsx("ul", { className: css.list, children: data.items.map((item, i) => _jsx("li", { children: item }, i)) })] });
+    }
+    if (data.op === 'check-failed') {
+        const last = data.attempt >= data.cap;
+        return _jsxs("div", { className: css.wrap, "data-tone": last ? 'warn' : 'error', children: [_jsxs("button", { type: "button", className: css.head, "aria-expanded": open, onClick: () => { setOpen(o => !o); }, children: [_jsx("span", { className: css.dot, "aria-hidden": "true" }), _jsx("span", { className: css.title, children: t('chat.checkFailed', { attempt: data.attempt, cap: data.cap }) }), _jsx("span", { className: css.summary, children: data.failures[0] === undefined ? '' : `${data.failures[0].where}：${data.failures[0].message}` }), _jsx("span", { className: css.chevron, "aria-hidden": "true", children: open ? '▾' : '▸' })] }), open && _jsxs("div", { className: css.body, children: [_jsx("ul", { className: css.list, children: data.failures.map((f, i) => _jsxs("li", { children: [_jsx("code", { children: f.where }), _jsx("span", { children: f.message })] }, i)) }), _jsx("p", { className: css.note, children: last ? t('chat.lastAttempt') : t('chat.fixing') })] })] });
+    }
+    return _jsxs("div", { className: css.wrap, "data-tone": "muted", children: [_jsxs("button", { type: "button", className: css.head, "aria-expanded": open, onClick: () => { setOpen(o => !o); }, children: [_jsx("span", { className: css.dot, "aria-hidden": "true" }), _jsx("span", { className: css.title, children: t('chat.other') }), _jsx("span", { className: css.chevron, "aria-hidden": "true", children: open ? '▾' : '▸' })] }), open && _jsx("pre", { className: css.pre, children: data.text })] });
+}