@vgai/editor 0.2.0

package/src/components/OnlineAssetBrowser.tsx

@@ -0,0 +1,448 @@
+import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../EditorContext';
+import {
+  getAssetLibraryCategories,
+  getDownloadedAssetPath,
+  loadDownloadedAssets,
+  type OnlineAsset,
+  onAssetDownloaded,
+  searchOnlineAssets,
+} from '../editor-api';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+type Source = 'local' | 'polyhaven' | 'ambientcg';
+
+interface SourceOption {
+  value: Source;
+  label: string;
+  types: { value: string; label: string }[];
+}
+
+const SOURCES: SourceOption[] = [
+  {
+    value: 'local',
+    label: 'Full Catalog',
+    types: [
+      { value: 'all', label: 'All' },
+      { value: 'models', label: 'Models' },
+      { value: 'animations', label: 'Animations' },
+      { value: 'sources', label: 'Source Files' },
+    ],
+  },
+  {
+    value: 'polyhaven',
+    label: 'Poly Haven',
+    types: [
+      { value: 'models', label: 'Models' },
+      { value: 'hdris', label: 'HDRIs' },
+      { value: 'textures', label: 'Textures' },
+    ],
+  },
+  {
+    value: 'ambientcg',
+    label: 'ambientCG',
+    types: [
+      { value: 'materials', label: 'Materials' },
+      { value: 'hdris', label: 'HDRIs' },
+    ],
+  },
+];
+
+const PAGE_SIZE = 48;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const selectStyle: React.CSSProperties = {
+  background: '#1e1e1e',
+  border: '1px solid #333',
+  borderRadius: 3,
+  color: '#c5c8ce',
+  fontSize: 11,
+  padding: '3px 6px',
+  outline: 'none',
+  cursor: 'pointer',
+};
+
+const inputStyle: React.CSSProperties = {
+  background: '#1e1e1e',
+  border: '1px solid #333',
+  borderRadius: 3,
+  color: '#c5c8ce',
+  fontSize: 11,
+  padding: '3px 6px',
+  outline: 'none',
+  flex: 1,
+  minWidth: 80,
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function OnlineAssetBrowser() {
+  const store = useEditorStore();
+  const [source, setSource] = useState<Source>('local');
+  const [assetType, setAssetType] = useState('all');
+  const [category, setCategory] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [assets, setAssets] = useState<OnlineAsset[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+
+  // Track which asset is selected (highlighted in grid)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // Seed cache from server on mount, re-render when assets get downloaded
+  const [, setDownloadTick] = useState(0);
+  useEffect(() => {
+    loadDownloadedAssets();
+    return onAssetDownloaded(() => setDownloadTick((t) => t + 1));
+  }, []);
+
+  // Categories (Poly Haven)
+  const [categories, setCategories] = useState<string[]>([]);
+
+  // Debounce timer
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Current source config
+  const sourceConfig = SOURCES.find((s) => s.value === source)!;
+
+  // Load categories when source/type changes (Poly Haven only)
+  useEffect(() => {
+    if (source === 'polyhaven' || source === 'local') {
+      getAssetLibraryCategories(assetType, source)
+        .then(setCategories)
+        .catch(() => setCategories([]));
+    } else {
+      setCategories([]);
+    }
+  }, [source, assetType]);
+
+  // Search function
+  const doSearch = useCallback(
+    async (q: string, off: number, append: boolean) => {
+      setLoading(true);
+      try {
+        const params: Parameters<typeof searchOnlineAssets>[0] = {
+          source,
+          type: assetType,
+          offset: off,
+          limit: PAGE_SIZE,
+        };
+        if (q) params.q = q;
+        if (category) params.category = category;
+        const result = await searchOnlineAssets(params);
+        setAssets((prev) => (append ? [...prev, ...result.assets] : result.assets));
+        setTotal(result.total);
+      } catch {
+        if (!append) setAssets([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [source, assetType, category],
+  );
+
+  // Trigger search on filter changes
+  useEffect(() => {
+    setOffset(0);
+    setSelectedId(null);
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      doSearch(searchQuery, 0, false);
+    }, 300);
+    return () => {
+      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    };
+  }, [source, assetType, category, searchQuery, doSearch]);
+
+  // Load more
+  const loadMore = useCallback(() => {
+    const newOffset = offset + PAGE_SIZE;
+    setOffset(newOffset);
+    doSearch(searchQuery, newOffset, true);
+  }, [offset, searchQuery, doSearch]);
+
+  // Single-click selects, double-click opens detail in right panel
+  const onClickAsset = useCallback((asset: OnlineAsset) => {
+    setSelectedId(asset.id);
+  }, []);
+
+  const onDoubleClickAsset = useCallback(
+    (asset: OnlineAsset) => {
+      store.openOnlineAssetTab({
+        source: asset.source,
+        id: asset.id,
+        name: asset.name,
+        thumbnailUrl: asset.thumbnailUrl,
+        type: asset.type,
+        tags: asset.tags,
+        ...(asset.license ? { license: asset.license } : {}),
+        ...(asset.author ? { author: asset.author } : {}),
+        ...(asset.sourceUrl ? { sourceUrl: asset.sourceUrl } : {}),
+      });
+    },
+    [store],
+  );
+
+  // Drag start — for model assets, set online payload (viewport resolves file options on drop)
+  const onDragStart = useCallback((e: React.DragEvent, asset: OnlineAsset) => {
+    if (asset.type !== 'model') return;
+    const payload = {
+      path: '',
+      kind: 'model',
+      name: asset.name,
+      online: {
+        source: asset.source,
+        id: asset.id,
+        name: asset.name,
+      },
+    };
+    e.dataTransfer.setData('text/plain', asset.name);
+    e.dataTransfer.setData('application/x-editor-asset', JSON.stringify(payload));
+  }, []);
+
+  // Source change resets type
+  const onSourceChange = useCallback((newSource: Source) => {
+    setSource(newSource);
+    const newConfig = SOURCES.find((s) => s.value === newSource)!;
+    setAssetType(newConfig.types[0]!.value);
+    setCategory('');
+    setSearchQuery('');
+  }, []);
+
+  const hasMore = assets.length < total;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+      {/* Filter bar */}
+      <div
+        style={{
+          padding: '6px 8px',
+          borderBottom: '1px solid #333',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 6,
+          alignItems: 'center',
+          flexShrink: 0,
+        }}
+      >
+        <select
+          value={source}
+          onChange={(e) => onSourceChange(e.target.value as Source)}
+          style={selectStyle}
+        >
+          {SOURCES.map((s) => (
+            <option key={s.value} value={s.value}>
+              {s.label}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={assetType}
+          onChange={(e) => {
+            setAssetType(e.target.value);
+            setCategory('');
+          }}
+          style={selectStyle}
+        >
+          {sourceConfig.types.map((t) => (
+            <option key={t.value} value={t.value}>
+              {t.label}
+            </option>
+          ))}
+        </select>
+
+        {categories.length > 0 && (
+          <select
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            style={selectStyle}
+          >
+            <option value="">All Categories</option>
+            {categories.map((c) => (
+              <option key={c} value={c}>
+                {c}
+              </option>
+            ))}
+          </select>
+        )}
+
+        <input
+          type="text"
+          placeholder="Search..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          style={inputStyle}
+        />
+      </div>
+
+      {/* Thumbnail grid */}
+      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', minHeight: 0 }}>
+        <div
+          style={{
+            padding: 8,
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, 88px)',
+            gap: 6,
+            alignContent: 'start',
+          }}
+        >
+          {assets.map((asset) => {
+            const isSelected = selectedId === asset.id;
+            const isDownloaded = getDownloadedAssetPath(asset.source, asset.name) != null;
+            return (
+              <div
+                key={`${asset.source}-${asset.id}`}
+                draggable={asset.type === 'model'}
+                onDragStart={(e) => onDragStart(e, asset)}
+                onClick={() => onClickAsset(asset)}
+                onDoubleClick={() => onDoubleClickAsset(asset)}
+                title={asset.name}
+                style={{
+                  width: 88,
+                  padding: 4,
+                  borderRadius: 4,
+                  cursor: asset.type === 'model' ? 'grab' : 'pointer',
+                  background: isSelected ? '#579EFF22' : 'transparent',
+                  border: isSelected ? '1px solid #579EFF' : '1px solid transparent',
+                  textAlign: 'center',
+                  userSelect: 'none',
+                  position: 'relative',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected) e.currentTarget.style.background = '#333';
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected) e.currentTarget.style.background = 'transparent';
+                }}
+              >
+                {/* Thumbnail */}
+                <div
+                  style={{
+                    width: 72,
+                    height: 72,
+                    margin: '0 auto 4px',
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                    background: '#111',
+                  }}
+                >
+                  <img
+                    src={asset.thumbnailUrl}
+                    alt={asset.name}
+                    loading="lazy"
+                    style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+                  />
+                </div>
+                {/* Name */}
+                <div
+                  style={{
+                    fontSize: 10,
+                    lineHeight: '13px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    color: '#c5c8ce',
+                  }}
+                >
+                  {asset.name}
+                </div>
+                {/* Downloaded badge */}
+                {asset.cloudHosted && !isDownloaded && (
+                  <div
+                    title="Available from VGAI Cloud"
+                    style={{
+                      position: 'absolute',
+                      top: 4,
+                      right: 4,
+                      borderRadius: 3,
+                      background: '#579EFF',
+                      color: '#fff',
+                      fontSize: 8,
+                      lineHeight: '14px',
+                      padding: '0 4px',
+                    }}
+                  >
+                    CLOUD
+                  </div>
+                )}
+                {isDownloaded && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: 4,
+                      right: 4,
+                      width: 16,
+                      height: 16,
+                      borderRadius: '50%',
+                      background: '#22c55e',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faCheck} style={{ fontSize: 9, color: '#fff' }} />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+
+          {assets.length === 0 && !loading && (
+            <div
+              style={{
+                gridColumn: '1 / -1',
+                color: '#666',
+                fontSize: 12,
+                padding: 24,
+                textAlign: 'center',
+              }}
+            >
+              {searchQuery ? 'No matching assets found.' : 'No assets found.'}
+            </div>
+          )}
+        </div>
+
+        {/* Loading indicator */}
+        {loading && (
+          <div style={{ textAlign: 'center', padding: 16, color: '#888', fontSize: 12 }}>
+            <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: 6 }} />
+            Loading...
+          </div>
+        )}
+
+        {/* Load more */}
+        {!loading && hasMore && (
+          <div style={{ textAlign: 'center', padding: 12 }}>
+            <button
+              type="button"
+              onClick={loadMore}
+              style={{
+                background: '#333',
+                border: '1px solid #444',
+                borderRadius: 4,
+                color: '#c5c8ce',
+                fontSize: 11,
+                padding: '4px 16px',
+                cursor: 'pointer',
+              }}
+            >
+              Load more...
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/OverlayReportBanner.tsx

@@ -0,0 +1,122 @@
+/**
+ * D9 (docs/DECISIONS-PENDING.md §D9) — the ingest-mode inline banner for an
+ * `OverlayApplyReport` (`../authoring/overlay-report.ts`): a version mismatch
+ * between the saved overlay and the currently-mounted game, and/or overlay
+ * entries that didn't resolve to anything on this scene walk (orphaned).
+ * Dismissible, non-blocking — the overlay already applied everything it
+ * could; this only surfaces what it couldn't, loudly (never silently).
+ *
+ * R5 (docs/MASTER-ARCHITECTURE-REVIEW.md §4(c)/§7.1 item 9) adds a third
+ * signal here: `report.upstreamPin.mismatch` — a same-slot substitution
+ * after a re-vendor that `versionMismatch` alone cannot catch (a vendored
+ * game's manifest `version` need not change on a re-vendor). Rendered the
+ * same way as the version-mismatch line so `overlayReportWarrants` firing on
+ * this signal alone never produces an empty-looking banner.
+ *
+ * No existing dismissible-notice component precedent in this codebase (the
+ * closest neighbors are the plain `Panel` primitive and the editor console's
+ * own warn/error log entries) — this is a minimal inline component consistent
+ * with `Panel`'s dark theme, per CLAUDE.md's "no window.prompt() — inline
+ * React components only" rule.
+ */
+
+import { useState, useSyncExternalStore } from 'react';
+import { getActiveOverlayReport, overlayReportWarrants } from '../authoring/overlay-report';
+import { useEditorStore } from '../EditorContext';
+
+export function OverlayReportBanner() {
+  const store = useEditorStore();
+  // Re-render off the SAME broadcast ingest-mode.ts fires right after install
+  // (`store.notifyIngestEdit()`) — `overlay-report.ts`'s "current report" slot
+  // has no subscribe of its own (see that module's doc comment); mirrors
+  // `IngestHierarchy`'s existing `useSyncExternalStore(store.subscribe, ...)`.
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const report = getActiveOverlayReport();
+  const [dismissedFor, setDismissedFor] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  if (!report || !overlayReportWarrants(report) || dismissedFor === report.gameId) return null;
+
+  return (
+    <div
+      data-testid="overlay-report-banner"
+      style={{
+        background: '#4a3b1f',
+        border: '1px solid #8a6d1f',
+        color: '#f0d9a0',
+        borderRadius: 3,
+        margin: '4px 0',
+        padding: '6px 8px',
+        fontSize: 11,
+        pointerEvents: 'auto',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
+        <span style={{ flex: 1 }}>
+          {report.versionMismatch && (
+            <div data-testid="overlay-report-mismatch">
+              overlay authored against v{report.authoredAgainst}, game is v{report.currentVersion}
+            </div>
+          )}
+          {report.upstreamPin.mismatch && (
+            <div data-testid="overlay-report-pin-mismatch">
+              overlay authored against upstream pin {report.upstreamPin.authored}, game is vendored
+              at pin {report.upstreamPin.current}
+            </div>
+          )}
+          {report.orphanedIds.length > 0 && (
+            <div>
+              {report.orphanedIds.length} orphaned overlay{' '}
+              {report.orphanedIds.length === 1 ? 'entry' : 'entries'} —{' '}
+              <button
+                type="button"
+                data-testid="overlay-report-expand"
+                onClick={() => setExpanded((e) => !e)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: '#f0d9a0',
+                  textDecoration: 'underline',
+                  cursor: 'pointer',
+                  padding: 0,
+                  font: 'inherit',
+                }}
+              >
+                {expanded ? 'hide' : 'show'} paths
+              </button>
+            </div>
+          )}
+        </span>
+        <button
+          type="button"
+          data-testid="overlay-report-dismiss"
+          onClick={() => setDismissedFor(report.gameId)}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: '#f0d9a0',
+            cursor: 'pointer',
+            fontSize: 13,
+            lineHeight: 1,
+            padding: 0,
+          }}
+          aria-label="Dismiss"
+        >
+          ×
+        </button>
+      </div>
+      {expanded && report.orphanedIds.length > 0 && (
+        <ul
+          data-testid="overlay-report-orphan-list"
+          style={{ margin: '4px 0 0', paddingLeft: 16, maxHeight: 120, overflowY: 'auto' }}
+        >
+          {report.orphanedIds.map((id) => (
+            <li key={id} style={{ wordBreak: 'break-all' }}>
+              {id}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}