@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/OverlayReportBanner.tsx

@@ -22,6 +22,7 @@
 
 import { useState, useSyncExternalStore } from 'react';
 import { getActiveOverlayReport, overlayReportWarrants } from '../authoring/overlay-report';
+import { Button, EditorBanner, EditorIcon, editorIcons, IconButton } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 
 export function OverlayReportBanner() {
@@ -38,73 +39,46 @@ export function OverlayReportBanner() {
   if (!report || !overlayReportWarrants(report) || dismissedFor === report.gameId) return null;
 
   return (
-    <div
+    <EditorBanner
       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"
+      tone="warning"
+      icon={<EditorIcon icon={editorIcons.status.warning} />}
+      style={{ margin: '4px 0', pointerEvents: 'auto' }}
+      actions={
+        <IconButton
+          aria-label="Dismiss overlay report"
           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"
+          size="compact"
         >
-          ×
-        </button>
-      </div>
+          <EditorIcon icon={editorIcons.action.close} />
+        </IconButton>
+      }
+    >
+      {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
+            size="compact"
+            data-testid="overlay-report-expand"
+            onClick={() => setExpanded((e) => !e)}
+          >
+            {expanded ? 'Hide' : 'Show'} paths
+          </Button>
+        </div>
+      )}
       {expanded && report.orphanedIds.length > 0 && (
         <ul
           data-testid="overlay-report-orphan-list"
@@ -117,6 +91,6 @@ export function OverlayReportBanner() {
           ))}
         </ul>
       )}
-    </div>
+    </EditorBanner>
   );
 }

package/src/components/PerformancePanel.tsx

@@ -0,0 +1,206 @@
+import { themeVars } from '../design-system';
+/**
+ * The full Performance analysis UI — since W3 of the workspace-shell program
+ * this renders as the Profiler view inside the bottom Debugger. The live
+ * Game remains visible above it, while the lightweight overlay stays
+ * Game-local. Owns its "Enter Play mode to profile" empty state.
+ */
+
+import type { PerformanceProfiler, PerformanceSnapshot } from '@engine/dev/performance-profiler';
+import { useEffect, useState } from 'react';
+import { Button } from '../design-system';
+import { getGameProfiler, subscribeGameSession } from '../play-mode';
+
+const EMPTY: PerformanceSnapshot = {
+  enabled: false,
+  recording: false,
+  fps: 0,
+  cpuMs: 0,
+  p95Ms: 0,
+  p99Ms: 0,
+  frames: [],
+  phases: [],
+  systems: [],
+  components: [],
+  render: { gpuMs: null, drawCalls: 0, triangles: 0, geometries: 0, textures: 0 },
+};
+
+function downloadCapture(profiler: PerformanceProfiler): void {
+  const url = URL.createObjectURL(new Blob([profiler.exportJSON()], { type: 'application/json' }));
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = `vgai-performance-${new Date().toISOString().replaceAll(':', '-')}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export function PerformancePanel() {
+  const [profiler, setProfiler] = useState(getGameProfiler);
+  const [snapshot, setSnapshot] = useState<PerformanceSnapshot>(EMPTY);
+
+  useEffect(() => subscribeGameSession(() => setProfiler(getGameProfiler())), []);
+  useEffect(() => {
+    if (!profiler) {
+      setSnapshot(EMPTY);
+      return;
+    }
+    setSnapshot(profiler.getSnapshot());
+    return profiler.subscribe(() => setSnapshot(profiler.getSnapshot()));
+  }, [profiler]);
+
+  if (!profiler) {
+    // B-8: the same lightweight paragraph empty-state treatment the other
+    // surfaces (Data/Stories/State Watch) give their "nothing here yet".
+    return (
+      <div style={{ padding: 12, fontSize: 12, color: themeVars.content.muted, maxWidth: 480 }}>
+        <p style={{ margin: 0 }}>Enter Play mode to profile the game.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        overflow: 'auto',
+        padding: 12,
+        color: themeVars.content.primary,
+        fontSize: 12,
+      }}
+    >
+      {/* B-5: these four were the dock's one off-palette button family
+          (#303030/#454545/#ddd) — now the shared dock button language. */}
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12 }}>
+        <Button size="compact" onClick={() => (profiler.enabled = !snapshot.enabled)}>
+          {snapshot.enabled ? 'Disable' : 'Enable'} profiler
+        </Button>
+        <Button
+          size="compact"
+          onClick={() =>
+            snapshot.recording ? profiler.stopRecording() : profiler.startRecording()
+          }
+        >
+          {snapshot.recording ? 'Stop capture' : 'Record capture'}
+        </Button>
+        <Button size="compact" onClick={() => profiler.clear()}>
+          Clear
+        </Button>
+        <Button size="compact" onClick={() => downloadCapture(profiler)}>
+          Export JSON
+        </Button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, minmax(80px, 1fr))', gap: 8 }}>
+        {[
+          ['FPS', snapshot.fps.toFixed(0)],
+          ['CPU', `${snapshot.cpuMs.toFixed(2)} ms`],
+          ['p95 frame', `${snapshot.p95Ms.toFixed(2)} ms`],
+          ['p99 frame', `${snapshot.p99Ms.toFixed(2)} ms`],
+          [
+            'GPU',
+            snapshot.render.gpuMs === null ? 'n/a' : `${snapshot.render.gpuMs.toFixed(2)} ms`,
+          ],
+          ['Draw calls', String(snapshot.render.drawCalls)],
+          ['Triangles', snapshot.render.triangles.toLocaleString()],
+        ].map(([label, value]) => (
+          <div
+            key={label}
+            style={{
+              background: themeVars.surface.panel,
+              border: `1px solid ${themeVars.boundary.default}`,
+              padding: 10,
+            }}
+          >
+            <div style={{ color: themeVars.content.dim, textTransform: 'uppercase', fontSize: 10 }}>
+              {label}
+            </div>
+            <div style={{ fontSize: 18, color: themeVars.content.primary, marginTop: 3 }}>
+              {value}
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* B-7: card/table borders were `#383838`, a one-off — now border-1. */}
+      <div
+        style={{
+          marginTop: 12,
+          background: themeVars.surface.panel,
+          border: `1px solid ${themeVars.boundary.default}`,
+        }}
+      >
+        <div
+          style={{
+            padding: '7px 10px',
+            borderBottom: `1px solid ${themeVars.boundary.default}`,
+            color: themeVars.content.muted,
+          }}
+        >
+          Current frame by engine phase
+        </div>
+        {snapshot.phases.map((phase) => (
+          <div
+            key={phase.name}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '140px 1fr 70px',
+              gap: 10,
+              padding: '5px 10px',
+            }}
+          >
+            <span>{phase.name}</span>
+            <div style={{ background: themeVars.surface.raised, height: 6, marginTop: 5 }}>
+              <div
+                style={{
+                  width: `${Math.min(100, (phase.ms / 16.67) * 100)}%`,
+                  height: '100%',
+                  background: phase.ms > 4 ? themeVars.semantic.warning : themeVars.accent.default,
+                }}
+              />
+            </div>
+            <span style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
+              {phase.ms.toFixed(2)} ms
+            </span>
+          </div>
+        ))}
+      </div>
+      {[
+        ['Systems', snapshot.systems],
+        ['Components (recording)', snapshot.components],
+      ].map(([label, timings]) => (
+        <div
+          key={label as string}
+          style={{
+            marginTop: 12,
+            background: themeVars.surface.panel,
+            border: `1px solid ${themeVars.boundary.default}`,
+          }}
+        >
+          <div
+            style={{
+              padding: '7px 10px',
+              borderBottom: `1px solid ${themeVars.boundary.default}`,
+              color: themeVars.content.muted,
+            }}
+          >
+            {label as string}
+          </div>
+          {(timings as readonly { name: string; ms: number }[]).slice(0, 12).map((timing) => (
+            <div
+              key={timing.name}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 16,
+                padding: '4px 10px',
+              }}
+            >
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {timing.name}
+              </span>
+              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{timing.ms.toFixed(2)} ms</span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}