@thehoneyjar/sigil-hud 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@thehoneyjar/sigil-hud",
+  "version": "0.1.0",
+  "description": "Diagnostic HUD for Sigil - composable React components for development",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "zustand": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "optionalDependencies": {
+    "@thehoneyjar/sigil-anchor": "4.3.1",
+    "@thehoneyjar/sigil-diagnostics": "0.1.0",
+    "@thehoneyjar/sigil-lens": "0.1.0",
+    "@thehoneyjar/sigil-simulation": "0.1.0",
+    "@thehoneyjar/sigil-fork": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@thehoneyjar/sigil-anchor": "4.3.1",
+    "@thehoneyjar/sigil-simulation": "0.1.0",
+    "@thehoneyjar/sigil-fork": "0.1.0",
+    "@thehoneyjar/sigil-lens": "0.1.0",
+    "@thehoneyjar/sigil-diagnostics": "0.1.0"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/0xHoneyJar/sigil.git",
+    "directory": "packages/hud"
+  },
+  "bugs": {
+    "url": "https://github.com/0xHoneyJar/sigil/issues"
+  },
+  "homepage": "https://github.com/0xHoneyJar/sigil/tree/main/packages/hud#readme",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/components/DataSourceIndicator.tsx

@@ -0,0 +1,185 @@
+/**
+ * Data Source Indicator Component
+ *
+ * Shows the source and staleness of displayed data values.
+ * Full implementation in TASK-202.
+ */
+
+/**
+ * Data source type
+ */
+export type DataSourceType = 'on-chain' | 'indexed' | 'cached' | 'unknown'
+
+/**
+ * Props for DataSourceIndicator
+ */
+export interface DataSourceIndicatorProps {
+  /** Data source type */
+  source: DataSourceType
+  /** Block number for on-chain data */
+  blockNumber?: number
+  /** Current block for staleness calculation */
+  currentBlock?: number
+  /** Timestamp for time-based staleness */
+  timestamp?: number
+  /** Whether to show expanded details */
+  expanded?: boolean
+  /** Callback when clicked */
+  onClick?: () => void
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Source type colors and labels
+ */
+const sourceConfig: Record<
+  DataSourceType,
+  { label: string; color: string; bgColor: string }
+> = {
+  'on-chain': { label: 'On-Chain', color: '#22c55e', bgColor: 'rgba(34, 197, 94, 0.1)' },
+  indexed: { label: 'Indexed', color: '#3b82f6', bgColor: 'rgba(59, 130, 246, 0.1)' },
+  cached: { label: 'Cached', color: '#eab308', bgColor: 'rgba(234, 179, 8, 0.1)' },
+  unknown: { label: 'Unknown', color: '#666', bgColor: 'rgba(100, 100, 100, 0.1)' },
+}
+
+/**
+ * Calculate staleness status
+ */
+function getStaleness(props: DataSourceIndicatorProps): {
+  level: 'fresh' | 'stale' | 'very-stale'
+  label: string
+} {
+  const { source, blockNumber, currentBlock, timestamp } = props
+
+  // Block-based staleness for on-chain data
+  if (source === 'on-chain' && blockNumber && currentBlock) {
+    const blocksBehind = currentBlock - blockNumber
+    if (blocksBehind <= 1) return { level: 'fresh', label: 'current' }
+    if (blocksBehind <= 5) return { level: 'stale', label: `${blocksBehind} blocks behind` }
+    return { level: 'very-stale', label: `${blocksBehind} blocks behind` }
+  }
+
+  // Time-based staleness for indexed/cached
+  if (timestamp) {
+    const secondsAgo = Math.floor((Date.now() - timestamp) / 1000)
+    if (secondsAgo < 30) return { level: 'fresh', label: 'just now' }
+    if (secondsAgo < 60) return { level: 'fresh', label: `${secondsAgo}s ago` }
+    if (secondsAgo < 300) return { level: 'stale', label: `${Math.floor(secondsAgo / 60)}m ago` }
+    return { level: 'very-stale', label: `${Math.floor(secondsAgo / 60)}m ago` }
+  }
+
+  return { level: 'fresh', label: '' }
+}
+
+/**
+ * Staleness color mapping
+ */
+const stalenessColors = {
+  fresh: '#22c55e',
+  stale: '#eab308',
+  'very-stale': '#ef4444',
+}
+
+/**
+ * Data Source Indicator component
+ */
+export function DataSourceIndicator({
+  source,
+  blockNumber,
+  currentBlock,
+  timestamp,
+  expanded = false,
+  onClick,
+  className = '',
+}: DataSourceIndicatorProps) {
+  const config = sourceConfig[source]
+  const staleness = getStaleness({ source, blockNumber, currentBlock, timestamp })
+
+  return (
+    <button
+      onClick={onClick}
+      className={className}
+      style={{
+        ...styles.container,
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      {/* Source Badge */}
+      <span
+        style={{
+          ...styles.badge,
+          backgroundColor: config.bgColor,
+          borderColor: `${config.color}40`,
+          color: config.color,
+        }}
+      >
+        {config.label}
+      </span>
+
+      {/* Staleness Indicator */}
+      {staleness.label && (
+        <span style={{ ...styles.staleness, color: stalenessColors[staleness.level] }}>
+          <span style={styles.dot}>●</span>
+          {staleness.label}
+        </span>
+      )}
+
+      {/* Expanded Details */}
+      {expanded && blockNumber && (
+        <div style={styles.expanded}>
+          <span style={styles.detailLabel}>Block:</span>
+          <span style={styles.detailValue}>#{blockNumber.toLocaleString()}</span>
+        </div>
+      )}
+    </button>
+  )
+}
+
+/**
+ * Styles
+ */
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    padding: '0',
+    backgroundColor: 'transparent',
+    border: 'none',
+    fontSize: '10px',
+    fontFamily: 'inherit',
+  },
+  badge: {
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '9px',
+    fontWeight: 600,
+    border: '1px solid',
+    textTransform: 'uppercase',
+    letterSpacing: '0.3px',
+  },
+  staleness: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '3px',
+    fontSize: '10px',
+  },
+  dot: {
+    fontSize: '6px',
+  },
+  expanded: {
+    display: 'flex',
+    gap: '4px',
+    marginLeft: '4px',
+    paddingLeft: '4px',
+    borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
+  },
+  detailLabel: {
+    color: '#666',
+  },
+  detailValue: {
+    color: '#888',
+    fontFamily: 'monospace',
+  },
+}

package/src/components/DiagnosticsPanel.tsx

@@ -0,0 +1,444 @@
+/**
+ * Diagnostics Panel Component
+ *
+ * Panel for physics compliance checking and issue detection.
+ * Implements TASK-201 requirements:
+ * - Physics analysis display
+ * - Data source indicators
+ * - Issue detection
+ * - Quick action buttons
+ */
+
+import { useState, useCallback, useEffect } from 'react'
+import { useHud } from '../providers/HudProvider'
+import { PhysicsAnalysis } from './PhysicsAnalysis'
+import { IssueList } from './IssueList'
+import { DataSourceIndicator } from './DataSourceIndicator'
+import type { EffectType, ComplianceResult, DiagnosticIssue } from '../types'
+
+/**
+ * Props for DiagnosticsPanel
+ */
+export interface DiagnosticsPanelProps {
+  /** Custom class name */
+  className?: string
+}
+
+/**
+ * Current analysis state
+ */
+interface AnalysisState {
+  component: string | null
+  effect: EffectType | null
+  compliance: ComplianceResult | null
+  issues: DiagnosticIssue[]
+  isLoading: boolean
+}
+
+const initialAnalysisState: AnalysisState = {
+  component: null,
+  effect: null,
+  compliance: null,
+  issues: [],
+  isLoading: false,
+}
+
+/**
+ * Diagnostics panel for physics analysis
+ */
+export function DiagnosticsPanel({ className = '' }: DiagnosticsPanelProps) {
+  const { diagnosticsService, activePanel, config } = useHud()
+  const [analysis, setAnalysis] = useState<AnalysisState>(initialAnalysisState)
+  const [symptom, setSymptom] = useState('')
+  const [diagnosis, setDiagnosis] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [showSymptomInput, setShowSymptomInput] = useState(false)
+
+  // Analyze component when selected (placeholder - could be wired to component selection)
+  const analyzeComponent = useCallback(
+    async (componentName: string, code?: string) => {
+      if (!diagnosticsService) return
+
+      setAnalysis((prev) => ({ ...prev, isLoading: true }))
+      try {
+        const result = await diagnosticsService.analyze(componentName, code)
+        setAnalysis({
+          component: result.component,
+          effect: result.effect,
+          compliance: result.compliance,
+          issues: result.issues,
+          isLoading: false,
+        })
+      } catch (error) {
+        setAnalysis({
+          ...initialAnalysisState,
+          isLoading: false,
+        })
+      }
+    },
+    [diagnosticsService]
+  )
+
+  // Handle diagnose symptom
+  const handleDiagnose = useCallback(async () => {
+    if (!diagnosticsService || !symptom) return
+
+    setIsLoading(true)
+    try {
+      const result = diagnosticsService.diagnose(symptom)
+      setDiagnosis(result)
+    } catch (error) {
+      setDiagnosis(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [diagnosticsService, symptom])
+
+  // Handle clear
+  const handleClear = useCallback(() => {
+    setSymptom('')
+    setDiagnosis(null)
+    setShowSymptomInput(false)
+  }, [])
+
+  // Handle capture observation (quick action)
+  const handleCaptureObservation = useCallback(() => {
+    // Trigger observation capture modal via keyboard shortcut simulation
+    const event = new KeyboardEvent('keydown', {
+      key: 'o',
+      metaKey: true,
+      shiftKey: true,
+    })
+    window.dispatchEvent(event)
+  }, [])
+
+  // Handle record signal (quick action)
+  const handleRecordSignal = useCallback(() => {
+    // TODO: Implement signal recording - TASK-204
+    console.log('Record signal triggered')
+  }, [])
+
+  // Handle issue click
+  const handleIssueClick = useCallback((issue: DiagnosticIssue) => {
+    // Could open a detail panel or link to docs
+    console.log('Issue clicked:', issue.code)
+  }, [])
+
+  // Don't render if not the active panel
+  if (activePanel !== 'diagnostics') return null
+
+  // Show message if diagnostics service not available
+  if (!diagnosticsService) {
+    return (
+      <div className={className} style={styles.container}>
+        <div style={styles.header}>
+          <span style={styles.title}>Diagnostics</span>
+        </div>
+        <div style={styles.unavailable}>
+          <p style={styles.unavailableText}>Diagnostics service not available.</p>
+          <p style={styles.unavailableHint}>
+            Install @sigil/diagnostics to enable physics analysis.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={className} style={styles.container}>
+      {/* Header with Quick Actions */}
+      <div style={styles.header}>
+        <span style={styles.title}>Diagnostics</span>
+        <div style={styles.quickActions}>
+          {config.observationCapture && (
+            <button
+              onClick={handleCaptureObservation}
+              style={styles.quickActionButton}
+              title="Capture Observation (Cmd+Shift+O)"
+            >
+              📸
+            </button>
+          )}
+          {config.signalCapture && (
+            <button
+              onClick={handleRecordSignal}
+              style={styles.quickActionButton}
+              title="Record Signal"
+            >
+              📡
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Physics Analysis Section */}
+      <PhysicsAnalysis
+        effect={analysis.effect}
+        compliance={analysis.compliance}
+        isLoading={analysis.isLoading}
+      />
+
+      {/* Data Source Indicator (placeholder for TASK-202) */}
+      <div style={styles.section}>
+        <span style={styles.sectionLabel}>Data Sources</span>
+        <div style={styles.dataSourceRow}>
+          <DataSourceIndicator source="on-chain" blockNumber={19234567} currentBlock={19234569} />
+        </div>
+      </div>
+
+      {/* Issues Section */}
+      <div style={styles.section}>
+        <IssueList
+          issues={analysis.issues}
+          onIssueClick={handleIssueClick}
+          maxVisible={3}
+        />
+      </div>
+
+      {/* Symptom Input (toggleable) */}
+      {!showSymptomInput ? (
+        <button
+          onClick={() => setShowSymptomInput(true)}
+          style={styles.showDiagnoseButton}
+        >
+          + Describe a symptom to diagnose
+        </button>
+      ) : (
+        <div style={styles.diagnoseSection}>
+          <label style={styles.inputLabel}>Describe the issue or symptom</label>
+          <textarea
+            value={symptom}
+            onChange={(e) => setSymptom(e.target.value)}
+            placeholder="e.g., Dialog flickers on open, Hydration mismatch, Button feels slow..."
+            rows={2}
+            style={styles.textarea}
+          />
+          <div style={styles.diagnoseActions}>
+            <button
+              onClick={handleDiagnose}
+              disabled={!symptom || isLoading}
+              style={{
+                ...styles.diagnoseButton,
+                opacity: symptom ? 1 : 0.5,
+                cursor: symptom ? 'pointer' : 'not-allowed',
+              }}
+            >
+              {isLoading ? 'Analyzing...' : 'Diagnose'}
+            </button>
+            <button onClick={handleClear} style={styles.cancelButton}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Diagnosis Result */}
+      {diagnosis && (
+        <div style={styles.diagnosisResult}>
+          <div
+            style={styles.diagnosisContent}
+            dangerouslySetInnerHTML={{
+              __html: formatDiagnosis(diagnosis),
+            }}
+          />
+        </div>
+      )}
+
+      {/* Quick Diagnose Buttons */}
+      <div style={styles.quickDiagnose}>
+        <span style={styles.quickDiagnoseLabel}>Quick Diagnose</span>
+        <div style={styles.quickDiagnoseGrid}>
+          {['hydration mismatch', 'dialog glitch', 'slow performance', 'layout shift'].map(
+            (quick) => (
+              <button
+                key={quick}
+                onClick={() => {
+                  setSymptom(quick)
+                  setShowSymptomInput(true)
+                }}
+                style={styles.quickDiagnoseButton}
+              >
+                {quick}
+              </button>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Format diagnosis for display (simple markdown-like formatting)
+ */
+function formatDiagnosis(text: string): string {
+  return text
+    .replace(/\*\*(.*?)\*\*/g, '<strong style="color: #10b981">$1</strong>')
+    .replace(
+      /`([^`]+)`/g,
+      '<code style="background: rgba(255,255,255,0.1); padding: 2px 4px; border-radius: 2px;">$1</code>'
+    )
+    .replace(
+      /```(\w+)?\n([\s\S]*?)```/g,
+      '<pre style="background: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px; overflow-x: auto; margin: 8px 0;">$2</pre>'
+    )
+}
+
+/**
+ * Styles
+ */
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: '12px',
+    fontWeight: 600,
+    color: '#fff',
+  },
+  quickActions: {
+    display: 'flex',
+    gap: '4px',
+  },
+  quickActionButton: {
+    width: '28px',
+    height: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    transition: 'background-color 0.15s ease-out',
+  },
+  unavailable: {
+    padding: '16px',
+    textAlign: 'center',
+  },
+  unavailableText: {
+    color: '#666',
+    fontSize: '11px',
+    margin: 0,
+  },
+  unavailableHint: {
+    color: '#555',
+    fontSize: '10px',
+    marginTop: '4px',
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  sectionLabel: {
+    fontSize: '10px',
+    fontWeight: 600,
+    color: '#888',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  dataSourceRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  showDiagnoseButton: {
+    width: '100%',
+    padding: '8px 12px',
+    backgroundColor: 'rgba(255, 255, 255, 0.02)',
+    border: '1px dashed rgba(255, 255, 255, 0.1)',
+    borderRadius: '4px',
+    color: '#666',
+    fontSize: '11px',
+    cursor: 'pointer',
+    textAlign: 'left',
+  },
+  diagnoseSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  inputLabel: {
+    fontSize: '10px',
+    color: '#888',
+  },
+  textarea: {
+    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: 'inherit',
+    resize: 'vertical',
+  },
+  diagnoseActions: {
+    display: 'flex',
+    gap: '8px',
+  },
+  diagnoseButton: {
+    flex: 1,
+    padding: '6px 12px',
+    backgroundColor: 'rgba(16, 185, 129, 0.2)',
+    border: '1px solid rgba(16, 185, 129, 0.3)',
+    borderRadius: '4px',
+    color: '#10b981',
+    fontSize: '11px',
+    cursor: 'pointer',
+  },
+  cancelButton: {
+    padding: '6px 12px',
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '4px',
+    color: '#888',
+    fontSize: '11px',
+    cursor: 'pointer',
+  },
+  diagnosisResult: {
+    padding: '12px',
+    backgroundColor: 'rgba(16, 185, 129, 0.05)',
+    border: '1px solid rgba(16, 185, 129, 0.2)',
+    borderRadius: '4px',
+  },
+  diagnosisContent: {
+    fontSize: '11px',
+    color: '#fff',
+    whiteSpace: 'pre-wrap',
+    lineHeight: 1.6,
+  },
+  quickDiagnose: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  quickDiagnoseLabel: {
+    fontSize: '10px',
+    color: '#888',
+  },
+  quickDiagnoseGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '4px',
+  },
+  quickDiagnoseButton: {
+    padding: '6px 8px',
+    backgroundColor: 'rgba(255, 255, 255, 0.02)',
+    border: '1px solid rgba(255, 255, 255, 0.05)',
+    borderRadius: '4px',
+    color: '#888',
+    fontSize: '10px',
+    cursor: 'pointer',
+    textAlign: 'center',
+  },
+}