@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/HistoryPanel.tsx

@@ -0,0 +1,226 @@
+import { Button, EditorListButton, themeVars } from '../design-system';
+import {
+  useHistoryCommandSnapshot,
+  useHistoryCommands,
+  useHistoryService,
+  useHistorySnapshot,
+} from '../EditorContext';
+import type { HistoryCommandSnapshot, HistoryCommands } from '../history/history-commands';
+import type { HistoryService, HistorySnapshot } from '../history/history-service';
+import type { HistoryTransaction } from '../history/types';
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function statusColor(entry: HistoryTransaction): string {
+  if (entry.status === 'expired') return themeVars.content.dim;
+  if (entry.status === 'failed' || entry.status === 'failed-partial')
+    return themeVars.semantic.danger;
+  if (entry.status === 'undoing' || entry.status === 'redoing') return themeVars.semantic.warning;
+  return themeVars.semantic.success;
+}
+
+function HistoryEntryButton({
+  entry,
+  index,
+  cursor,
+  busy,
+  history,
+  jump,
+}: {
+  entry: HistoryTransaction;
+  index: number;
+  cursor: number;
+  busy: boolean;
+  history: HistoryService;
+  jump: (cursor: number) => void;
+}) {
+  const applied = index < cursor;
+  const resources = entry.changes
+    .map((change) => history.registry.get(change.resource)?.displayName ?? 'Unavailable')
+    .join(', ');
+  const disabled = busy || entry.status === 'expired';
+  return (
+    <div role="listitem">
+      <EditorListButton
+        accent="none"
+        selected={cursor === index + 1}
+        data-testid={`history-entry-${index}`}
+        disabled={disabled}
+        onClick={() => jump(index + 1)}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '12px minmax(0, 1fr) auto',
+          gap: 7,
+          alignItems: 'center',
+          borderBottom: `1px solid ${themeVars.boundary.default}`,
+          color: applied ? themeVars.content.primary : themeVars.content.dim,
+          opacity: entry.status === 'expired' ? 0.65 : 1,
+        }}
+        title={entry.error?.message ?? `${entry.scope} · ${resources}`}
+      >
+        <span aria-hidden="true" style={{ color: statusColor(entry), fontSize: 9 }}>
+          {entry.status === 'expired' ? '○' : applied ? '●' : '◌'}
+        </span>
+        <span style={{ minWidth: 0 }}>
+          <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {entry.label}
+          </span>
+          <span
+            style={{
+              display: 'block',
+              color: themeVars.content.dim,
+              fontSize: 9,
+              overflow: 'hidden',
+            }}
+          >
+            {resources || entry.scope}
+            {entry.status === 'expired' ? ' · unavailable after document/session close' : ''}
+          </span>
+        </span>
+        <span style={{ color: themeVars.content.dim, fontSize: 9 }}>
+          {formatBytes(entry.byteSize)}
+        </span>
+      </EditorListButton>
+    </div>
+  );
+}
+
+export function HistoryPanel() {
+  const history = useHistoryService();
+  const commands = useHistoryCommands();
+  const snapshot = useHistorySnapshot();
+  const commandSnapshot = useHistoryCommandSnapshot();
+  return (
+    <HistoryPanelView
+      history={history}
+      commands={commands}
+      snapshot={snapshot}
+      commandSnapshot={commandSnapshot}
+    />
+  );
+}
+
+export function HistoryPanelView({
+  history,
+  commands,
+  snapshot,
+  commandSnapshot,
+}: {
+  history: HistoryService;
+  commands: HistoryCommands;
+  snapshot: HistorySnapshot;
+  commandSnapshot: HistoryCommandSnapshot;
+}) {
+  const jump = (cursor: number) => void commands.jumpTo(cursor);
+  const errorResources = snapshot.lastError?.resources
+    .map((resource) => history.registry.get(resource)?.displayName ?? 'Unavailable')
+    .join(', ');
+
+  return (
+    <div
+      data-testid="history-panel"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        minHeight: 0,
+        color: themeVars.content.primary,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '6px 8px',
+          borderBottom: `1px solid ${themeVars.boundary.default}`,
+          flexShrink: 0,
+        }}
+      >
+        {/* Undo and redo share the canonical compact secondary action. */}
+        <Button
+          size="compact"
+          data-testid="history-undo"
+          disabled={!commandSnapshot.canUndo}
+          onClick={() => void commands.undo()}
+          title={snapshot.undoLabel ? `Undo ${snapshot.undoLabel}` : 'Nothing to undo'}
+        >
+          Undo{snapshot.undoLabel ? ` ${snapshot.undoLabel}` : ''}
+        </Button>
+        <Button
+          size="compact"
+          data-testid="history-redo"
+          disabled={!commandSnapshot.canRedo}
+          onClick={() => void commands.redo()}
+          title={snapshot.redoLabel ? `Redo ${snapshot.redoLabel}` : 'Nothing to redo'}
+        >
+          Redo{snapshot.redoLabel ? ` ${snapshot.redoLabel}` : ''}
+        </Button>
+        <span style={{ marginLeft: 'auto', color: themeVars.content.dim, fontSize: 10 }}>
+          {commandSnapshot.busy
+            ? 'Applying change…'
+            : `${snapshot.cursor} / ${snapshot.transactions.length} · ${formatBytes(snapshot.uniqueSnapshotBytes)}`}
+        </span>
+      </div>
+
+      {snapshot.lastError && (
+        <div
+          role="alert"
+          data-testid="history-error"
+          style={{
+            padding: '6px 8px',
+            background: themeVars.semantic.dangerMuted,
+            color: themeVars.semantic.danger,
+            fontSize: 11,
+          }}
+        >
+          {snapshot.lastError.message}
+          {snapshot.blocked && ' History is blocked to prevent further partial writes.'}
+          {errorResources && (
+            <span data-testid="history-error-resources" style={{ display: 'block' }}>
+              Affected: {errorResources}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div role="list" aria-label="Edit history" style={{ overflowY: 'auto', minHeight: 0 }}>
+        <div role="listitem">
+          <EditorListButton
+            accent="none"
+            selected={snapshot.cursor === 0}
+            data-testid="history-entry-initial"
+            disabled={commandSnapshot.busy}
+            onClick={() => jump(0)}
+            style={{
+              borderBottom: `1px solid ${themeVars.boundary.default}`,
+              color: themeVars.content.dim,
+            }}
+          >
+            Project opened
+          </EditorListButton>
+        </div>
+        {snapshot.transactions.map((entry, index) => (
+          <HistoryEntryButton
+            key={entry.id}
+            entry={entry}
+            index={index}
+            cursor={snapshot.cursor}
+            busy={commandSnapshot.busy}
+            history={history}
+            jump={jump}
+          />
+        ))}
+        {snapshot.transactions.length === 0 && (
+          <div style={{ padding: 16, color: themeVars.content.dim, fontSize: 11 }}>
+            Edits to scenes, UI, data, materials, source, and project settings will appear here.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}