@thehoneyjar/sigil-hud 0.1.0

package/src/components/PhysicsAnalysis.tsx

@@ -0,0 +1,273 @@
+/**
+ * Physics Analysis Component
+ *
+ * Displays detected effect type and physics values for the current context.
+ */
+
+import type { EffectType, ComplianceResult } from '../types'
+
+/**
+ * Props for PhysicsAnalysis
+ */
+export interface PhysicsAnalysisProps {
+  /** Detected effect type */
+  effect: EffectType | null
+  /** Physics compliance result */
+  compliance?: ComplianceResult | null
+  /** Whether analysis is loading */
+  isLoading?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Display label for effect types
+ */
+const effectLabels: Record<EffectType, string> = {
+  financial: 'Financial',
+  destructive: 'Destructive',
+  'soft-delete': 'Soft Delete',
+  standard: 'Standard',
+  local: 'Local State',
+  navigation: 'Navigation',
+  query: 'Query',
+}
+
+/**
+ * Color for effect types
+ */
+const effectColors: Record<EffectType, string> = {
+  financial: '#ef4444', // red
+  destructive: '#f97316', // orange
+  'soft-delete': '#eab308', // yellow
+  standard: '#22c55e', // green
+  local: '#3b82f6', // blue
+  navigation: '#8b5cf6', // purple
+  query: '#06b6d4', // cyan
+}
+
+/**
+ * Physics Analysis component
+ */
+export function PhysicsAnalysis({
+  effect,
+  compliance,
+  isLoading = false,
+  className = '',
+}: PhysicsAnalysisProps) {
+  if (isLoading) {
+    return (
+      <div className={className} style={styles.container}>
+        <div style={styles.header}>
+          <span style={styles.title}>Physics</span>
+          <span style={styles.loading}>Analyzing...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!effect) {
+    return (
+      <div className={className} style={styles.container}>
+        <div style={styles.header}>
+          <span style={styles.title}>Physics</span>
+        </div>
+        <div style={styles.empty}>
+          No component selected. Select a component to view physics analysis.
+        </div>
+      </div>
+    )
+  }
+
+  const color = effectColors[effect]
+  const behavioral = compliance?.behavioral
+  const animation = compliance?.animation
+  const material = compliance?.material
+
+  return (
+    <div className={className} style={styles.container}>
+      {/* Effect Badge */}
+      <div style={styles.effectRow}>
+        <span
+          style={{
+            ...styles.effectBadge,
+            backgroundColor: `${color}20`,
+            borderColor: `${color}50`,
+            color,
+          }}
+        >
+          {effectLabels[effect]}
+        </span>
+        {behavioral && !behavioral.compliant && (
+          <span style={styles.warningBadge}>⚠ Non-compliant</span>
+        )}
+      </div>
+
+      {/* Physics Grid */}
+      {compliance && (
+        <div style={styles.grid}>
+          {/* Behavioral */}
+          <div style={styles.section}>
+            <span style={styles.sectionLabel}>Behavioral</span>
+            <div style={styles.values}>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Sync:</span>
+                <span style={getValueStyle(behavioral?.compliant)}>
+                  {behavioral?.sync ?? 'unknown'}
+                </span>
+              </span>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Timing:</span>
+                <span style={getValueStyle(behavioral?.compliant)}>
+                  {behavioral?.timing ? `${behavioral.timing}ms` : 'unknown'}
+                </span>
+              </span>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Confirm:</span>
+                <span style={getValueStyle(behavioral?.compliant)}>
+                  {behavioral?.confirmation ? 'yes' : 'no'}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          {/* Animation */}
+          <div style={styles.section}>
+            <span style={styles.sectionLabel}>Animation</span>
+            <div style={styles.values}>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Easing:</span>
+                <span style={getValueStyle(animation?.compliant)}>
+                  {animation?.easing ?? 'unknown'}
+                </span>
+              </span>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Duration:</span>
+                <span style={getValueStyle(animation?.compliant)}>
+                  {animation?.duration ? `${animation.duration}ms` : 'unknown'}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          {/* Material */}
+          <div style={styles.section}>
+            <span style={styles.sectionLabel}>Material</span>
+            <div style={styles.values}>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Surface:</span>
+                <span style={getValueStyle(material?.compliant)}>
+                  {material?.surface ?? 'unknown'}
+                </span>
+              </span>
+              <span style={styles.value}>
+                <span style={styles.valueLabel}>Shadow:</span>
+                <span style={getValueStyle(material?.compliant)}>
+                  {material?.shadow ?? 'unknown'}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Get value text style based on compliance
+ */
+function getValueStyle(compliant?: boolean): React.CSSProperties {
+  if (compliant === undefined) return styles.valueText
+  return compliant
+    ? { ...styles.valueText, color: '#22c55e' }
+    : { ...styles.valueText, color: '#ef4444' }
+}
+
+/**
+ * Styles
+ */
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: '12px',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    borderRadius: '8px',
+    border: '1px solid rgba(255, 255, 255, 0.05)',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '8px',
+  },
+  title: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#888',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  loading: {
+    fontSize: '10px',
+    color: '#666',
+  },
+  empty: {
+    fontSize: '11px',
+    color: '#666',
+    fontStyle: 'italic',
+  },
+  effectRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    marginBottom: '12px',
+  },
+  effectBadge: {
+    padding: '4px 8px',
+    borderRadius: '4px',
+    fontSize: '11px',
+    fontWeight: 600,
+    border: '1px solid',
+  },
+  warningBadge: {
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    color: '#ef4444',
+    border: '1px solid rgba(239, 68, 68, 0.2)',
+  },
+  grid: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  },
+  sectionLabel: {
+    fontSize: '10px',
+    fontWeight: 600,
+    color: '#666',
+    textTransform: 'uppercase',
+    letterSpacing: '0.3px',
+  },
+  values: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '8px',
+  },
+  value: {
+    display: 'flex',
+    gap: '4px',
+    fontSize: '11px',
+  },
+  valueLabel: {
+    color: '#888',
+  },
+  valueText: {
+    color: '#fff',
+  },
+}

package/src/components/SimulationPanel.tsx

@@ -0,0 +1,173 @@
+/**
+ * Simulation Panel Component
+ *
+ * Panel for transaction simulation controls.
+ */
+
+import { useHud } from '../providers/HudProvider'
+
+/**
+ * Props for SimulationPanel
+ */
+export interface SimulationPanelProps {
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Simulation panel for transaction dry-runs
+ */
+export function SimulationPanel({ className = '' }: SimulationPanelProps) {
+  const { simulationService, forkService, activePanel } = useHud()
+
+  // Don't render if not the active panel
+  if (activePanel !== 'simulation') return null
+
+  // Show message if simulation service not available
+  if (!simulationService) {
+    return (
+      <div className={className} style={{ color: '#666' }}>
+        <p>Simulation service not available.</p>
+        <p style={{ fontSize: '10px', marginTop: '8px' }}>
+          Install @sigil/simulation to enable transaction simulation.
+        </p>
+      </div>
+    )
+  }
+
+  const forkState = forkService?.getState()
+  const forkActive = forkState?.active ?? false
+
+  return (
+    <div className={className}>
+      {/* Fork Status */}
+      <div style={{ marginBottom: '16px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '8px',
+          }}
+        >
+          <div
+            style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              backgroundColor: forkActive ? '#10b981' : '#666',
+            }}
+          />
+          <span style={{ color: forkActive ? '#10b981' : '#888' }}>
+            {forkActive ? 'Fork Active' : 'No Fork'}
+          </span>
+        </div>
+
+        {forkState && forkActive && (
+          <div
+            style={{
+              padding: '8px',
+              backgroundColor: 'rgba(255, 255, 255, 0.02)',
+              borderRadius: '4px',
+              fontSize: '10px',
+            }}
+          >
+            <div style={{ color: '#888', marginBottom: '4px' }}>
+              Chain: {forkState.chainId}
+            </div>
+            <div style={{ color: '#888', marginBottom: '4px' }}>
+              Block: {forkState.blockNumber?.toString()}
+            </div>
+            <div style={{ color: '#888' }}>
+              Snapshots: {forkState.snapshotCount}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Simulation Info */}
+      <div
+        style={{
+          padding: '12px',
+          backgroundColor: 'rgba(59, 130, 246, 0.05)',
+          border: '1px solid rgba(59, 130, 246, 0.2)',
+          borderRadius: '4px',
+        }}
+      >
+        <div style={{ color: '#3b82f6', fontSize: '11px', marginBottom: '8px' }}>
+          Transaction Simulation
+        </div>
+        <div style={{ color: '#888', fontSize: '10px', lineHeight: 1.6 }}>
+          Simulate transactions before sending them on-chain. View gas estimates,
+          balance changes, and potential revert reasons.
+        </div>
+        <div
+          style={{
+            marginTop: '12px',
+            padding: '8px',
+            backgroundColor: 'rgba(0, 0, 0, 0.2)',
+            borderRadius: '4px',
+            fontSize: '10px',
+            color: '#666',
+          }}
+        >
+          To simulate a transaction, use the simulation service programmatically:
+          <pre
+            style={{
+              marginTop: '8px',
+              fontFamily: 'ui-monospace, monospace',
+              color: '#10b981',
+            }}
+          >
+            {`simulationService.simulate({
+  from: '0x...',
+  to: '0x...',
+  value: 1000000n,
+  data: '0x...'
+})`}
+          </pre>
+        </div>
+      </div>
+
+      {/* Features List */}
+      <div style={{ marginTop: '16px' }}>
+        <label
+          style={{
+            display: 'block',
+            color: '#888',
+            fontSize: '10px',
+            marginBottom: '8px',
+          }}
+        >
+          Simulation Features
+        </label>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {[
+            { icon: '⛽', label: 'Gas estimation' },
+            { icon: '💰', label: 'Balance changes' },
+            { icon: '📝', label: 'State changes' },
+            { icon: '❌', label: 'Revert reasons' },
+            { icon: '📊', label: 'Event logs' },
+          ].map((feature) => (
+            <div
+              key={feature.label}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '6px 8px',
+                backgroundColor: 'rgba(255, 255, 255, 0.02)',
+                borderRadius: '4px',
+                fontSize: '11px',
+                color: '#888',
+              }}
+            >
+              <span>{feature.icon}</span>
+              <span>{feature.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/StateComparison.tsx

@@ -0,0 +1,238 @@
+/**
+ * State Comparison Component
+ *
+ * Compare state between real and impersonated addresses.
+ */
+
+import { useHud } from '../providers/HudProvider'
+import { DEFAULT_LENS_STATE } from '../types'
+
+/**
+ * Props for StateComparison
+ */
+export interface StateComparisonProps {
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * State comparison panel
+ */
+export function StateComparison({ className = '' }: StateComparisonProps) {
+  const { lensService, forkService, activePanel } = useHud()
+
+  // Don't render if not the active panel
+  if (activePanel !== 'state') return null
+
+  const lensState = lensService?.getState() ?? DEFAULT_LENS_STATE
+  const forkState = forkService?.getState()
+  const isImpersonating = lensState.enabled && lensState.impersonatedAddress !== null
+
+  return (
+    <div className={className}>
+      {/* Addresses */}
+      <div style={{ marginBottom: '16px' }}>
+        <label
+          style={{
+            display: 'block',
+            color: '#888',
+            fontSize: '10px',
+            marginBottom: '8px',
+          }}
+        >
+          Address Context
+        </label>
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+          }}
+        >
+          {/* Real Address */}
+          <div
+            style={{
+              padding: '8px',
+              backgroundColor: 'rgba(255, 255, 255, 0.02)',
+              borderRadius: '4px',
+              border: !isImpersonating
+                ? '1px solid rgba(16, 185, 129, 0.3)'
+                : '1px solid rgba(255, 255, 255, 0.05)',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '4px',
+              }}
+            >
+              <span style={{ color: '#888', fontSize: '10px' }}>Real</span>
+              {!isImpersonating && (
+                <span
+                  style={{
+                    fontSize: '9px',
+                    padding: '2px 6px',
+                    backgroundColor: 'rgba(16, 185, 129, 0.2)',
+                    borderRadius: '4px',
+                    color: '#10b981',
+                  }}
+                >
+                  Active
+                </span>
+              )}
+            </div>
+            <code
+              style={{
+                fontSize: '10px',
+                color: lensState.realAddress ? '#fff' : '#666',
+                wordBreak: 'break-all',
+              }}
+            >
+              {lensState.realAddress ?? 'Not connected'}
+            </code>
+          </div>
+
+          {/* Impersonated Address */}
+          <div
+            style={{
+              padding: '8px',
+              backgroundColor: 'rgba(255, 255, 255, 0.02)',
+              borderRadius: '4px',
+              border: isImpersonating
+                ? '1px solid rgba(16, 185, 129, 0.3)'
+                : '1px solid rgba(255, 255, 255, 0.05)',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '4px',
+              }}
+            >
+              <span style={{ color: '#888', fontSize: '10px' }}>Impersonated</span>
+              {isImpersonating && (
+                <span
+                  style={{
+                    fontSize: '9px',
+                    padding: '2px 6px',
+                    backgroundColor: 'rgba(16, 185, 129, 0.2)',
+                    borderRadius: '4px',
+                    color: '#10b981',
+                  }}
+                >
+                  Active
+                </span>
+              )}
+            </div>
+            <code
+              style={{
+                fontSize: '10px',
+                color: lensState.impersonatedAddress ? '#fff' : '#666',
+                wordBreak: 'break-all',
+              }}
+            >
+              {lensState.impersonatedAddress ?? 'None'}
+            </code>
+          </div>
+        </div>
+      </div>
+
+      {/* Fork State */}
+      {forkState && (
+        <div style={{ marginBottom: '16px' }}>
+          <label
+            style={{
+              display: 'block',
+              color: '#888',
+              fontSize: '10px',
+              marginBottom: '8px',
+            }}
+          >
+            Fork State
+          </label>
+
+          <div
+            style={{
+              padding: '8px',
+              backgroundColor: 'rgba(255, 255, 255, 0.02)',
+              borderRadius: '4px',
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gap: '8px',
+                fontSize: '10px',
+              }}
+            >
+              <div>
+                <span style={{ color: '#666' }}>Status: </span>
+                <span style={{ color: forkState.active ? '#10b981' : '#888' }}>
+                  {forkState.active ? 'Active' : 'Inactive'}
+                </span>
+              </div>
+              <div>
+                <span style={{ color: '#666' }}>Chain: </span>
+                <span style={{ color: '#fff' }}>
+                  {forkState.chainId ?? '—'}
+                </span>
+              </div>
+              <div>
+                <span style={{ color: '#666' }}>Block: </span>
+                <span style={{ color: '#fff' }}>
+                  {forkState.blockNumber?.toString() ?? '—'}
+                </span>
+              </div>
+              <div>
+                <span style={{ color: '#666' }}>Snapshots: </span>
+                <span style={{ color: '#fff' }}>{forkState.snapshotCount}</span>
+              </div>
+            </div>
+
+            {forkState.rpcUrl && (
+              <div style={{ marginTop: '8px' }}>
+                <span style={{ color: '#666', fontSize: '10px' }}>RPC: </span>
+                <code
+                  style={{
+                    fontSize: '9px',
+                    color: '#888',
+                    wordBreak: 'break-all',
+                  }}
+                >
+                  {forkState.rpcUrl}
+                </code>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* State Comparison Info */}
+      <div
+        style={{
+          padding: '12px',
+          backgroundColor: 'rgba(251, 191, 36, 0.05)',
+          border: '1px solid rgba(251, 191, 36, 0.2)',
+          borderRadius: '4px',
+        }}
+      >
+        <div
+          style={{ color: '#fbbf24', fontSize: '11px', marginBottom: '8px' }}
+        >
+          State Comparison
+        </div>
+        <div style={{ color: '#888', fontSize: '10px', lineHeight: 1.6 }}>
+          When impersonating, reads use the impersonated address while writes
+          still use your real wallet. This lets you test how the UI looks for
+          different users without affecting their funds.
+        </div>
+      </div>
+    </div>
+  )
+}