@thehoneyjar/sigil-hud 0.1.0

package/src/components/IssueList.tsx

@@ -0,0 +1,228 @@
+/**
+ * Issue List Component
+ *
+ * Displays detected diagnostic issues with severity and suggestions.
+ */
+
+import type { DiagnosticIssue } from '../types'
+
+type Severity = 'error' | 'warning' | 'info'
+
+/**
+ * Props for IssueList
+ */
+export interface IssueListProps {
+  /** Issues to display */
+  issues: DiagnosticIssue[]
+  /** Maximum issues to show (expandable) */
+  maxVisible?: number
+  /** Callback when issue is clicked */
+  onIssueClick?: (issue: DiagnosticIssue) => void
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Severity colors
+ */
+const severityColors: Record<Severity, { bg: string; border: string; text: string }> = {
+  error: { bg: 'rgba(239, 68, 68, 0.1)', border: 'rgba(239, 68, 68, 0.3)', text: '#ef4444' },
+  warning: { bg: 'rgba(234, 179, 8, 0.1)', border: 'rgba(234, 179, 8, 0.3)', text: '#eab308' },
+  info: { bg: 'rgba(59, 130, 246, 0.1)', border: 'rgba(59, 130, 246, 0.3)', text: '#3b82f6' },
+}
+
+/**
+ * Severity icons
+ */
+const severityIcons: Record<Severity, string> = {
+  error: '✕',
+  warning: '⚠',
+  info: 'ℹ',
+}
+
+/**
+ * Issue List component
+ */
+export function IssueList({
+  issues,
+  maxVisible = 5,
+  onIssueClick,
+  className = '',
+}: IssueListProps) {
+  const hasMore = issues.length > maxVisible
+  const visibleIssues = hasMore ? issues.slice(0, maxVisible) : issues
+
+  if (issues.length === 0) {
+    return (
+      <div className={className} style={styles.container}>
+        <div style={styles.header}>
+          <span style={styles.title}>Issues</span>
+          <span style={styles.count}>0</span>
+        </div>
+        <div style={styles.empty}>
+          <span style={styles.checkIcon}>✓</span>
+          No issues detected
+        </div>
+      </div>
+    )
+  }
+
+  // Count by severity
+  const errorCount = issues.filter((i) => i.severity === 'error').length
+  const warningCount = issues.filter((i) => i.severity === 'warning').length
+
+  return (
+    <div className={className} style={styles.container}>
+      {/* Header */}
+      <div style={styles.header}>
+        <span style={styles.title}>Issues</span>
+        <div style={styles.counts}>
+          {errorCount > 0 && (
+            <span style={{ ...styles.countBadge, ...severityColors.error }}>
+              {errorCount} error{errorCount !== 1 ? 's' : ''}
+            </span>
+          )}
+          {warningCount > 0 && (
+            <span style={{ ...styles.countBadge, ...severityColors.warning }}>
+              {warningCount} warning{warningCount !== 1 ? 's' : ''}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Issue List */}
+      <div style={styles.list}>
+        {visibleIssues.map((issue, index) => {
+          const colors = severityColors[issue.severity]
+          const icon = severityIcons[issue.severity]
+
+          return (
+            <button
+              key={`${issue.code}-${index}`}
+              onClick={() => onIssueClick?.(issue)}
+              style={{
+                ...styles.issue,
+                backgroundColor: colors.bg,
+                borderColor: colors.border,
+              }}
+            >
+              <span style={{ ...styles.icon, color: colors.text }}>{icon}</span>
+              <div style={styles.issueContent}>
+                <span style={styles.issueCode}>[{issue.code}]</span>
+                <span style={styles.issueMessage}>{issue.message}</span>
+                {issue.suggestion && (
+                  <span style={styles.issueSuggestion}>Fix: {issue.suggestion}</span>
+                )}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* More indicator */}
+      {hasMore && (
+        <div style={styles.more}>+ {issues.length - maxVisible} more issues</div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 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: '12px',
+  },
+  title: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#888',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  count: {
+    fontSize: '10px',
+    color: '#666',
+  },
+  counts: {
+    display: 'flex',
+    gap: '6px',
+  },
+  countBadge: {
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    border: '1px solid',
+  },
+  empty: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    fontSize: '11px',
+    color: '#22c55e',
+  },
+  checkIcon: {
+    fontWeight: 600,
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+  },
+  issue: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '8px',
+    padding: '8px',
+    border: '1px solid',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    textAlign: 'left',
+    width: '100%',
+    transition: 'opacity 0.15s ease-out',
+  },
+  icon: {
+    fontSize: '12px',
+    fontWeight: 600,
+    flexShrink: 0,
+    marginTop: '1px',
+  },
+  issueContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+    overflow: 'hidden',
+  },
+  issueCode: {
+    fontSize: '10px',
+    fontWeight: 600,
+    color: '#888',
+    fontFamily: 'monospace',
+  },
+  issueMessage: {
+    fontSize: '11px',
+    color: '#fff',
+    lineHeight: 1.4,
+  },
+  issueSuggestion: {
+    fontSize: '10px',
+    color: '#888',
+    fontStyle: 'italic',
+  },
+  more: {
+    marginTop: '8px',
+    fontSize: '10px',
+    color: '#666',
+    textAlign: 'center',
+  },
+}

package/src/components/LensPanel.tsx

@@ -0,0 +1,286 @@
+/**
+ * Lens Panel Component
+ *
+ * Panel for address impersonation controls.
+ * FR-005 fix: All hooks called unconditionally at top level.
+ */
+
+import { useState, useCallback } from 'react'
+import { useHud } from '../providers/HudProvider'
+import { DEFAULT_LENS_STATE } from '../types'
+
+/**
+ * Props for LensPanel
+ */
+export interface LensPanelProps {
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Lens panel for address impersonation
+ */
+export function LensPanel({ className = '' }: LensPanelProps) {
+  // FR-005 fix: All hooks called unconditionally at top level
+  const { lensService, activePanel } = useHud()
+  const [inputAddress, setInputAddress] = useState('')
+  const [inputLabel, setInputLabel] = useState('')
+
+  // Get state from service or use default
+  const state = lensService?.getState() ?? DEFAULT_LENS_STATE
+  const isImpersonating = state.enabled && state.impersonatedAddress !== null
+
+  // Handle impersonation
+  const handleImpersonate = useCallback(() => {
+    if (!lensService || !inputAddress) return
+
+    // Basic validation
+    if (!/^0x[a-fA-F0-9]{40}$/.test(inputAddress)) {
+      alert('Invalid address format')
+      return
+    }
+
+    lensService.setImpersonatedAddress(inputAddress as `0x${string}`)
+    setInputAddress('')
+  }, [lensService, inputAddress])
+
+  // Handle save address
+  const handleSaveAddress = useCallback(() => {
+    if (!lensService || !inputAddress || !inputLabel) return
+
+    lensService.saveAddress({
+      address: inputAddress as `0x${string}`,
+      label: inputLabel,
+    })
+    setInputAddress('')
+    setInputLabel('')
+  }, [lensService, inputAddress, inputLabel])
+
+  // Handle stop impersonation
+  const handleStopImpersonation = useCallback(() => {
+    if (!lensService) return
+    lensService.clearImpersonation()
+  }, [lensService])
+
+  // Don't render if not the active panel
+  if (activePanel !== 'lens') return null
+
+  // Show message if lens service not available
+  if (!lensService) {
+    return (
+      <div className={className} style={{ color: '#666' }}>
+        <p>Lens service not available.</p>
+        <p style={{ fontSize: '10px', marginTop: '8px' }}>
+          Install @sigil/lens to enable address impersonation.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      {/* Current Status */}
+      <div style={{ marginBottom: '16px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '8px',
+          }}
+        >
+          <div
+            style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              backgroundColor: isImpersonating ? '#10b981' : '#666',
+            }}
+          />
+          <span style={{ color: isImpersonating ? '#10b981' : '#888' }}>
+            {isImpersonating ? 'Impersonating' : 'Not impersonating'}
+          </span>
+        </div>
+
+        {isImpersonating && (
+          <div style={{ marginLeft: '16px' }}>
+            <code
+              style={{
+                fontSize: '11px',
+                color: '#10b981',
+                wordBreak: 'break-all',
+              }}
+            >
+              {state.impersonatedAddress}
+            </code>
+            <button
+              onClick={handleStopImpersonation}
+              style={{
+                display: 'block',
+                marginTop: '8px',
+                padding: '4px 8px',
+                backgroundColor: 'rgba(239, 68, 68, 0.2)',
+                border: '1px solid rgba(239, 68, 68, 0.3)',
+                borderRadius: '4px',
+                color: '#ef4444',
+                fontSize: '10px',
+                cursor: 'pointer',
+              }}
+            >
+              Stop Impersonation
+            </button>
+          </div>
+        )}
+
+        {state.realAddress && (
+          <div style={{ marginTop: '8px', color: '#666', fontSize: '10px' }}>
+            Real: {state.realAddress.slice(0, 6)}...{state.realAddress.slice(-4)}
+          </div>
+        )}
+      </div>
+
+      {/* Impersonate Address */}
+      <div style={{ marginBottom: '16px' }}>
+        <label
+          style={{
+            display: 'block',
+            color: '#888',
+            fontSize: '10px',
+            marginBottom: '4px',
+          }}
+        >
+          Impersonate Address
+        </label>
+        <input
+          type="text"
+          value={inputAddress}
+          onChange={(e) => setInputAddress(e.target.value)}
+          placeholder="0x..."
+          style={{
+            width: '100%',
+            padding: '8px',
+            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: '4px',
+            color: '#fff',
+            fontSize: '11px',
+            fontFamily: 'ui-monospace, monospace',
+          }}
+        />
+        <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+          <button
+            onClick={handleImpersonate}
+            disabled={!inputAddress}
+            style={{
+              flex: 1,
+              padding: '6px 12px',
+              backgroundColor: inputAddress
+                ? 'rgba(16, 185, 129, 0.2)'
+                : 'rgba(255, 255, 255, 0.05)',
+              border: '1px solid rgba(16, 185, 129, 0.3)',
+              borderRadius: '4px',
+              color: inputAddress ? '#10b981' : '#666',
+              fontSize: '11px',
+              cursor: inputAddress ? 'pointer' : 'not-allowed',
+            }}
+          >
+            Impersonate
+          </button>
+        </div>
+      </div>
+
+      {/* Save Address */}
+      <div style={{ marginBottom: '16px' }}>
+        <label
+          style={{
+            display: 'block',
+            color: '#888',
+            fontSize: '10px',
+            marginBottom: '4px',
+          }}
+        >
+          Save with Label
+        </label>
+        <input
+          type="text"
+          value={inputLabel}
+          onChange={(e) => setInputLabel(e.target.value)}
+          placeholder="Label (e.g., Whale)"
+          style={{
+            width: '100%',
+            padding: '8px',
+            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: '4px',
+            color: '#fff',
+            fontSize: '11px',
+            marginBottom: '8px',
+          }}
+        />
+        <button
+          onClick={handleSaveAddress}
+          disabled={!inputAddress || !inputLabel}
+          style={{
+            width: '100%',
+            padding: '6px 12px',
+            backgroundColor:
+              inputAddress && inputLabel
+                ? 'rgba(59, 130, 246, 0.2)'
+                : 'rgba(255, 255, 255, 0.05)',
+            border: '1px solid rgba(59, 130, 246, 0.3)',
+            borderRadius: '4px',
+            color: inputAddress && inputLabel ? '#3b82f6' : '#666',
+            fontSize: '11px',
+            cursor: inputAddress && inputLabel ? 'pointer' : 'not-allowed',
+          }}
+        >
+          Save Address
+        </button>
+      </div>
+
+      {/* Saved Addresses */}
+      {state.savedAddresses.length > 0 && (
+        <div>
+          <label
+            style={{
+              display: 'block',
+              color: '#888',
+              fontSize: '10px',
+              marginBottom: '8px',
+            }}
+          >
+            Saved Addresses
+          </label>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {state.savedAddresses.map((saved) => (
+              <button
+                key={saved.address}
+                onClick={() =>
+                  lensService?.setImpersonatedAddress(saved.address)
+                }
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.02)',
+                  border: '1px solid rgba(255, 255, 255, 0.05)',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                }}
+              >
+                <span style={{ color: '#fff', fontSize: '11px' }}>
+                  {saved.label}
+                </span>
+                <code style={{ color: '#666', fontSize: '10px' }}>
+                  {saved.address.slice(0, 6)}...{saved.address.slice(-4)}
+                </code>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}