@volter/editor-game 0.5.65

package/src/generation/GenerationActivity.tsx

@@ -0,0 +1,421 @@
+/**
+ * Generations — the project's generated ASSETS, shown as the assets they are.
+ *
+ * Every card's subject is the file the job produced: the image, the video with
+ * its own controls, the model's rendered thumbnail. Job vocabulary (state,
+ * model, charge, prompt) frames that preview instead of replacing it, and the
+ * preview is never fabricated — a file the browser cannot show honestly gets a
+ * named file row, not a decorative stand-in.
+ */
+
+import { faFile, faFileLines, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import type { GenerationJob } from '@volter/editor-sdk/generations';
+import { useState, useSyncExternalStore } from 'react';
+import './GenerationGallery.css';
+import { assetCapabilities, assetDocumentKind } from '@volter/editor-core/asset-workflow/asset-capabilities';
+import { openAssetDocument } from '@volter/editor-core/components/asset-documents';
+import { AudioAssetThumb, ModelThumbnail } from '@volter/editor-core/components/asset-thumbnails';
+import { editorConsole } from '@volter/editor-core/editor-console';
+import { useEditorStore } from '@volter/editor-core/editor-runtime';
+import { modelThumbnailFormat } from '@volter/editor-core/model-thumbnail';
+import {
+  Button,
+  EditorBadge,
+  EditorBanner,
+  EditorIcon,
+  EditorToolbar,
+  Spacer,
+  StateSurface,
+  type StateSurfaceTone,
+  Text,
+} from '@volter/editor-sdk/widgets';
+import { openGenerationCreateDocument, openGenerationDocument } from './generation-documents';
+import {
+  acceptGenerationJob,
+  forgetGenerationJob,
+  generationJobIsActive,
+  generationJobIsUnread,
+  generationJobsError,
+  generationJobsSnapshot,
+  markGenerationJobRead,
+  pollActiveGenerationJobs,
+  refreshGenerationJobs,
+  subscribeGenerationJobs,
+} from './generation-jobs';
+import {
+  GENERATION_STATE_LABEL,
+  type GenerationCardState,
+  type GenerationOutput,
+  generationAge,
+  generationBillingLabel,
+  generationBillingSettled,
+  generationCardState,
+  generationModelLabel,
+  generationOutputs,
+  generationPrompt,
+  generationRemovable,
+  generationRouteLabel,
+  generationSaveRetryable,
+  generationTitle,
+} from './generation-presentation';
+
+/** One produced file, painted the way that file can honestly be shown. */
+function OutputPreview({
+  output,
+  onOpen,
+}: {
+  output: GenerationOutput;
+  onOpen?: (() => void) | undefined;
+}) {
+  const src = output.url;
+
+  if (src && output.kind === 'image') {
+    const preview = (
+      <img className="vgai-generation-output-media" src={src} alt={output.name} loading="lazy" />
+    );
+    return onOpen ? (
+      // The preview itself opens the asset — the gesture a gallery implies.
+      <Button
+        variant="ghost"
+        className="vgai-generation-output-open"
+        onClick={onOpen}
+        aria-label={`Open ${output.name}`}
+      >
+        {preview}
+      </Button>
+    ) : (
+      preview
+    );
+  }
+  if (src && output.kind === 'video') {
+    return (
+      // Deliberately no autoplay and no `muted` autoplay trick: a gallery that
+      // starts sound is the failure this panel is replacing.
+      <video
+        className="vgai-generation-output-media"
+        src={src}
+        controls
+        preload="metadata"
+        playsInline
+        title={output.name}
+      />
+    );
+  }
+  if (src && output.kind === 'audio') {
+    return (
+      <div className="vgai-generation-output-audio">
+        <AudioAssetThumb url={src} name={output.name} />
+        <audio src={src} controls preload="metadata" title={output.name} />
+      </div>
+    );
+  }
+  if (output.url && output.kind === 'model' && modelThumbnailFormat(output.url)) {
+    return <ModelThumbnail url={output.url} />;
+  }
+  return (
+    <div className="vgai-generation-output-file">
+      <EditorIcon icon={output.kind === 'model' ? faFile : faFileLines} />
+      <Text variant="caption" tone="muted">
+        {output.name}
+      </Text>
+      {onOpen && (
+        <Button size="compact" variant="ghost" onClick={onOpen}>
+          Open file
+        </Button>
+      )}
+    </div>
+  );
+}
+
+const STATE_TONE: Record<GenerationCardState, StateSurfaceTone> = {
+  queued: 'loading',
+  running: 'loading',
+  saving: 'loading',
+  'save-failed': 'error',
+  ready: 'success',
+  'no-asset': 'neutral',
+  failed: 'error',
+  cancelled: 'neutral',
+};
+
+/** What each state means, in a game developer's terms. */
+const STATE_DESCRIPTION: Record<GenerationCardState, (job: GenerationJob) => string> = {
+  queued: (job) =>
+    job.queuePosition === undefined
+      ? 'Waiting for the provider to start.'
+      : `Position ${job.queuePosition} in the provider queue.`,
+  running: (job) => job.message ?? 'The provider is working on it.',
+  saving: () => 'Downloading the finished output into this project.',
+  // The provider's own result is fine; the DOWNLOAD into the project is what
+  // failed, and the server has stopped trying. Nothing here promises another
+  // automatic attempt — the retry is the button.
+  'save-failed': (job) => job.pollError ?? 'The finished output could not be saved.',
+  ready: () => 'Saved into this project.',
+  'no-asset': () => 'The operation finished without a file this project can hold.',
+  failed: (job) => job.message ?? 'The provider reported a failure.',
+  cancelled: () => 'This generation was cancelled.',
+};
+
+/** The media region while a job has produced nothing to show yet. */
+function StateMedia({ job, state }: { job: GenerationJob; state: GenerationCardState }) {
+  const pending = state === 'queued' || state === 'running' || state === 'saving';
+  const failing = state === 'failed' || state === 'save-failed';
+  return (
+    <div className="vgai-generation-state-media" data-state={state}>
+      <StateSurface
+        compact
+        tone={STATE_TONE[state]}
+        {...(failing ? { icon: <EditorIcon icon={faTriangleExclamation} /> } : {})}
+        title={GENERATION_STATE_LABEL[state]}
+        description={STATE_DESCRIPTION[state](job)}
+      />
+      {pending && (
+        // Determinate ONLY when the provider reported progress; otherwise the
+        // native indeterminate bar, which claims nothing.
+        <progress
+          className="vgai-generation-progress"
+          aria-label={`${job.label} progress`}
+          {...(state === 'running' && job.progress !== undefined
+            ? { value: job.progress, max: 1 }
+            : {})}
+        />
+      )}
+    </div>
+  );
+}
+
+function CardActions({
+  job,
+  busy,
+  error,
+  run,
+}: {
+  job: GenerationJob;
+  busy: boolean;
+  error: string | null;
+  run: (action: () => Promise<void>) => void;
+}) {
+  return (
+    <div className="vgai-generation-card-actions">
+      {generationSaveRetryable(job, error) && (
+        // There is NO add-to-project gate: the server accepts a finished
+        // output on its own. This appears only once a save has actually
+        // failed, and runs that same accept operation again by hand.
+        <Button
+          size="compact"
+          variant="primary"
+          disabled={busy}
+          onClick={() => run(() => acceptGenerationJob(job))}
+        >
+          {busy ? 'Saving…' : 'Retry save'}
+        </Button>
+      )}
+      <Button size="compact" variant="ghost" onClick={() => openGenerationDocument(job)}>
+        Details
+      </Button>
+      {generationRemovable(job) && (
+        <Button
+          size="compact"
+          variant="ghost"
+          disabled={busy}
+          onClick={() => run(() => forgetGenerationJob(job.id))}
+        >
+          Remove
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function GenerationCard({
+  job,
+  busy,
+  error,
+  run,
+}: {
+  job: GenerationJob;
+  busy: boolean;
+  error: string | null;
+  run: (action: () => Promise<void>) => void;
+}) {
+  const store = useEditorStore();
+  const state = generationCardState(job);
+  const outputs = generationOutputs(job);
+  const prompt = generationPrompt(job);
+  const unread = generationJobIsUnread(job);
+  const openOutput = (output: GenerationOutput): (() => void) | undefined => {
+    if (!output.url) return undefined;
+    const kind = assetDocumentKind(assetCapabilities(output.name));
+    if (!kind) return undefined;
+    return () => openAssetDocument(store, output.url as string, kind);
+  };
+
+  return (
+    <article
+      className="vgai-generation-card"
+      data-state={state}
+      aria-busy={generationJobIsActive(job)}
+      aria-label={generationTitle(job)}
+      onClickCapture={() => {
+        if (unread) {
+          void markGenerationJobRead(job.id).catch((cause) => {
+            editorConsole.warn(
+              `Could not mark generation as seen: ${cause instanceof Error ? cause.message : String(cause)}`,
+              'generations',
+            );
+          });
+        }
+      }}
+    >
+      <div className="vgai-generation-card-media" data-outputs={Math.min(outputs.length, 4)}>
+        {outputs.length === 0 ? (
+          <StateMedia job={job} state={state} />
+        ) : (
+          outputs.map((output) => (
+            <div className="vgai-generation-output" key={output.path} title={output.path}>
+              <OutputPreview output={output} onOpen={openOutput(output)} />
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="vgai-generation-card-body">
+        <div className="vgai-generation-card-heading">
+          <Text variant="label" truncate title={generationTitle(job)}>
+            {generationTitle(job)}
+          </Text>
+          <EditorBadge className="vgai-generation-chip" data-state={state}>
+            {GENERATION_STATE_LABEL[state]}
+            {state === 'running' && job.progress !== undefined
+              ? ` · ${Math.round(job.progress * 100)}%`
+              : ''}
+          </EditorBadge>
+          {unread && (
+            <EditorBadge className="vgai-generation-chip" data-state="new">
+              New
+            </EditorBadge>
+          )}
+        </div>
+
+        <Text variant="caption" tone="muted" truncate title={generationModelLabel(job)}>
+          {job.provider} · {generationModelLabel(job)}
+        </Text>
+        <Text variant="caption" tone="dim">
+          {generationBillingLabel(job.billing)}
+          {generationBillingSettled(job.billing) ? '' : ' (est.)'} · {generationRouteLabel(job)} ·{' '}
+          {generationAge(job.updatedAt)}
+        </Text>
+
+        {prompt && (
+          <p className="vgai-generation-card-prompt" title={prompt}>
+            {prompt}
+          </p>
+        )}
+
+        {(error ?? job.pollError) && (
+          // An ACTIVE job's poll error is transient — the server is still
+          // polling, and saying so is true. A finished job's error is a failed
+          // SAVE, whose automatic attempts the server has already spent, so the
+          // text promises nothing and the retry button carries it instead.
+          <EditorBanner
+            tone={error || state === 'save-failed' ? 'error' : 'warning'}
+            className="vgai-generation-card-alert"
+          >
+            {error ??
+              (state === 'save-failed'
+                ? `Could not save into the project: ${job.pollError}`
+                : `Polling will retry: ${job.pollError}`)}
+          </EditorBanner>
+        )}
+
+        <CardActions job={job} busy={busy} error={error} run={run} />
+      </div>
+    </article>
+  );
+}
+
+export function GenerationActivity() {
+  const { jobs } = useSyncExternalStore(
+    subscribeGenerationJobs,
+    generationJobsSnapshot,
+    generationJobsSnapshot,
+  );
+  const [busy, setBusy] = useState<string | null>(null);
+  const [actionErrors, setActionErrors] = useState<Record<string, string>>({});
+  const activeCount = jobs.filter(generationJobIsActive).length;
+  const savingCount = jobs.filter((job) => generationCardState(job) === 'saving').length;
+
+  const run = async (id: string, action: () => Promise<void>) => {
+    setBusy(id);
+    setActionErrors((current) => {
+      const next = { ...current };
+      delete next[id];
+      return next;
+    });
+    try {
+      await action();
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : String(cause);
+      setActionErrors((current) => ({ ...current, [id]: message }));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const storeError = generationJobsError();
+
+  return (
+    <div className="vgai-generation-gallery">
+      <EditorToolbar label="Generations" compact className="vgai-generation-gallery-bar">
+        <Text variant="label">Generations</Text>
+        <Text variant="caption" tone="muted">
+          {jobs.length} {jobs.length === 1 ? 'generation' : 'generations'}
+          {activeCount > 0 ? ` · ${activeCount} running` : ''}
+          {savingCount > 0 ? ` · ${savingCount} saving` : ''}
+        </Text>
+        <Spacer />
+        <Button
+          size="compact"
+          variant="ghost"
+          onClick={() => void pollActiveGenerationJobs().then(refreshGenerationJobs)}
+        >
+          Refresh
+        </Button>
+        <Button size="compact" variant="primary" onClick={() => openGenerationCreateDocument()}>
+          New asset
+        </Button>
+      </EditorToolbar>
+
+      {storeError && (
+        <EditorBanner tone="error" className="vgai-generation-gallery-alert">
+          {storeError}
+        </EditorBanner>
+      )}
+
+      {jobs.length === 0 ? (
+        <StateSurface
+          className="vgai-generation-gallery-empty"
+          title="No generated assets yet"
+          description="Preview generated images, video, audio and models here. Create an asset to get started."
+          action={
+            <Button size="compact" variant="primary" onClick={() => openGenerationCreateDocument()}>
+              New asset
+            </Button>
+          }
+        />
+      ) : (
+        <section className="vgai-generation-grid" aria-label="Generated assets">
+          {jobs.map((job) => (
+            <GenerationCard
+              key={job.id}
+              job={job}
+              busy={busy === job.id}
+              error={actionErrors[job.id] ?? null}
+              run={(action) => void run(job.id, action)}
+            />
+          ))}
+        </section>
+      )}
+    </div>
+  );
+}

package/src/generation/GenerationGallery.css

@@ -0,0 +1,231 @@
+/* Generations utility — a responsive asset gallery (GenerationActivity.tsx).
+ *
+ * The card is preview-first: a fixed-aspect media box holds the generated file
+ * at `contain` (portrait and landscape both survive intact), and the job's text
+ * sits under it in a fixed reading order. The grid is `auto-fill` so the same
+ * panel works docked narrow at the side and wide across the bottom; a container
+ * query drops the card to a single readable column in a genuinely narrow dock.
+ */
+
+.vgai-generation-gallery {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  color: var(--vgai-content-primary);
+  /* `size`, not `inline-size`: the cards answer to the drawer's HEIGHT as well
+   * as its width — a short bottom drawer gets a shorter preview so the name,
+   * cost and actions still land inside it. */
+  container-type: size;
+}
+.vgai-generation-gallery .vgai-toolbar {
+  flex: 0 0 auto;
+}
+.vgai-generation-gallery-bar {
+  gap: var(--vgai-space-2);
+}
+.vgai-generation-gallery-alert {
+  margin: var(--vgai-space-3);
+}
+.vgai-generation-gallery-empty {
+  margin: auto;
+  max-width: 420px;
+  text-align: center;
+}
+
+.vgai-generation-grid {
+  display: grid;
+  min-height: 0;
+  flex: 1;
+  align-content: start;
+  gap: var(--vgai-space-3);
+  padding: var(--vgai-space-3);
+  overflow-y: auto;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-auto-rows: max-content;
+}
+@container (max-width: 380px) {
+  .vgai-generation-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.vgai-generation-card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-md);
+  background: var(--vgai-surface-panel);
+}
+.vgai-generation-card[data-state="failed"],
+.vgai-generation-card[data-state="save-failed"] {
+  border-color: var(--vgai-danger-muted);
+}
+.vgai-generation-card[data-state="ready"] {
+  border-color: var(--vgai-boundary-strong);
+}
+
+/* The preview. One output fills the box; several share it as a tile grid, so a
+ * multi-output job shows every file it produced without a second surface. */
+.vgai-generation-card-media {
+  display: grid;
+  /* `flex-shrink: 0` and the height cap are load-bearing TOGETHER: in the
+   * ordinary ~260px bottom drawer the card was squeezed to a ~50px strip with
+   * every piece of metadata hidden, and an uncapped 4:3 box pushed the text
+   * out of the drawer instead. */
+  flex-shrink: 0;
+  height: 160px;
+  max-height: 160px;
+  gap: var(--vgai-stroke-active);
+  background: var(--vgai-bg-inset);
+  grid-template-columns: 1fr;
+}
+.vgai-generation-card-media[data-outputs="2"],
+.vgai-generation-card-media[data-outputs="3"],
+.vgai-generation-card-media[data-outputs="4"] {
+  grid-template-columns: 1fr 1fr;
+}
+.vgai-generation-output {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: var(--vgai-space-1);
+}
+/* `contain`, never `cover`: cropping a generated frame hides exactly the part
+ * a game developer is judging. */
+.vgai-generation-output-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: var(--vgai-radius-sm);
+  object-fit: contain;
+}
+/* The preview's own click target: a real Button stripped back to the image it
+ * contains, so the gallery's most obvious gesture is still a focusable control. */
+.vgai-generation-output .vgai-generation-output-open.vgai-btn {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: zoom-in;
+}
+video.vgai-generation-output-media {
+  width: 100%;
+}
+.vgai-generation-output-audio {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vgai-space-2);
+  padding: var(--vgai-space-2);
+}
+.vgai-generation-output-audio audio {
+  width: 100%;
+}
+.vgai-generation-output-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding: var(--vgai-space-3);
+  color: var(--vgai-content-muted);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.vgai-generation-state-media {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vgai-space-2);
+  padding: var(--vgai-space-3);
+  text-align: center;
+}
+.vgai-generation-progress {
+  width: 70%;
+  height: 4px;
+  accent-color: var(--vgai-accent);
+}
+
+.vgai-generation-card-body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--vgai-space-1);
+  padding: var(--vgai-space-3);
+}
+.vgai-generation-card-heading {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-2);
+}
+.vgai-generation-card-heading > .vgai-text {
+  min-width: 0;
+  flex: 1;
+}
+.vgai-generation-chip {
+  flex: 0 0 auto;
+}
+.vgai-generation-chip[data-state="ready"] {
+  color: var(--vgai-success);
+  border-color: var(--vgai-success-muted);
+}
+.vgai-generation-chip[data-state="failed"],
+.vgai-generation-chip[data-state="save-failed"] {
+  color: var(--vgai-danger);
+  border-color: var(--vgai-danger-muted);
+}
+.vgai-generation-chip[data-state="queued"],
+.vgai-generation-chip[data-state="running"],
+.vgai-generation-chip[data-state="saving"],
+.vgai-generation-chip[data-state="new"] {
+  color: var(--vgai-accent);
+  border-color: var(--vgai-accent-muted);
+}
+
+/* The prompt is available, never dominant: two lines, full text on hover. */
+.vgai-generation-card-prompt {
+  display: -webkit-box;
+  margin: var(--vgai-space-1) 0 0;
+  overflow: hidden;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-font-sm);
+  line-height: var(--vgai-leading-normal);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+.vgai-generation-card-alert {
+  margin-top: var(--vgai-space-2);
+  font-size: var(--vgai-font-sm);
+}
+.vgai-generation-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-2);
+  margin-top: var(--vgai-space-2);
+}
+
+@container (max-height: 300px) {
+  .vgai-generation-card-media {
+    height: 96px;
+  }
+  .vgai-generation-card-prompt {
+    display: none;
+  }
+}