jblyons15-research-ui 1.0.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "jblyons15-research-ui",
+  "version": "1.0.0",
+  "description": "React UI components for CommandCenter research system",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "research",
+    "react",
+    "components",
+    "ui"
+  ],
+  "author": "Crossover Research",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "jblyons15-research-sdk": "^1.0.0",
+    "jblyons15-research-types": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,463 @@
+// @crossover/research-ui - Complete Package Definition
+// React components for research requests, results, and history
+
+import React, { useState, useEffect } from 'react'
+import type {
+  ResearchRequest,
+  ResearchResult,
+  ResearchJobStatus,
+  ResearchStatus,
+  ResearchError,
+} from '@crossover/research-types'
+import { ResearchOrchestrator } from '@crossover/research-sdk'
+
+// ============================================================================
+// HOOK: useResearchOrchestrator
+// ============================================================================
+
+export function useResearchOrchestrator(config?: {
+  perplexityApiKey?: string
+  firecrawlApiKey?: string
+  supabaseUrl?: string
+  supabaseAnonKey?: string
+}): ResearchOrchestrator {
+  const [orchestrator] = useState(() => {
+    // In real usage, get these from environment or context
+    return new ResearchOrchestrator({
+      perplexityApiKey: config?.perplexityApiKey || process.env.REACT_APP_PERPLEXITY_KEY || '',
+      firecrawlApiKey: config?.firecrawlApiKey || process.env.REACT_APP_FIRECRAWL_KEY || '',
+      supabaseUrl: config?.supabaseUrl || process.env.REACT_APP_SUPABASE_URL || '',
+      supabaseAnonKey: config?.supabaseAnonKey || process.env.REACT_APP_SUPABASE_ANON_KEY || '',
+    })
+  })
+
+  return orchestrator
+}
+
+// ============================================================================
+// HOOK: useResearchStatus - Real-time job status polling
+// ============================================================================
+
+export function useResearchStatus(jobId: string, orchestrator: ResearchOrchestrator) {
+  const [status, setStatus] = useState<ResearchJobStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<ResearchError | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+    let pollInterval: NodeJS.Timeout
+
+    const fetchStatus = async () => {
+      try {
+        const result = await orchestrator.getStatus(jobId)
+        if (isMounted) {
+          setStatus(result)
+          setLoading(false)
+        }
+
+        // Continue polling if not completed
+        if (result && result.status !== 'completed' && result.status !== 'failed') {
+          pollInterval = setTimeout(fetchStatus, 2000) // Poll every 2s
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err as ResearchError)
+          setLoading(false)
+        }
+      }
+    }
+
+    fetchStatus()
+
+    return () => {
+      isMounted = false
+      if (pollInterval) clearTimeout(pollInterval)
+    }
+  }, [jobId, orchestrator])
+
+  return { status, loading, error }
+}
+
+// ============================================================================
+// COMPONENT: RequestForm - Submit research requests
+// ============================================================================
+
+interface RequestFormProps {
+  onSubmit?: (jobId: string) => void
+  onError?: (error: ResearchError) => void
+  defaultCompany?: string
+}
+
+export function RequestForm({
+  onSubmit,
+  onError,
+  defaultCompany = '',
+}: RequestFormProps) {
+  const orchestrator = useResearchOrchestrator()
+  const [loading, setLoading] = useState(false)
+  const [company, setCompany] = useState(defaultCompany)
+  const [questions, setQuestions] = useState<string[]>([''])
+  const [format, setFormat] = useState<'summary' | 'detailed' | 'brief'>('summary')
+  const [timeline, setTimeline] = useState<'urgent' | 'normal' | 'flexible'>('normal')
+  const [context, setContext] = useState('')
+
+  const handleAddQuestion = () => {
+    setQuestions([...questions, ''])
+  }
+
+  const handleRemoveQuestion = (index: number) => {
+    setQuestions(questions.filter((_, i) => i !== index))
+  }
+
+  const handleQuestionChange = (index: number, value: string) => {
+    const updated = [...questions]
+    updated[index] = value
+    setQuestions(updated)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      const jobId = await orchestrator.submitRequest({
+        company,
+        questions: questions.filter(q => q.trim()),
+        format,
+        timeline,
+        context: context || undefined,
+        submittedBy: 'current-user-id', // Would get from auth context
+      })
+
+      onSubmit?.(jobId)
+    } catch (error) {
+      onError?.(error as ResearchError)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium mb-2">Company Name</label>
+        <input
+          type="text"
+          value={company}
+          onChange={(e) => setCompany(e.target.value)}
+          required
+          placeholder="e.g., Acme Corp"
+          className="w-full px-3 py-2 border rounded-md"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">Research Questions</label>
+        {questions.map((q, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <input
+              type="text"
+              value={q}
+              onChange={(e) => handleQuestionChange(i, e.target.value)}
+              placeholder={`Question ${i + 1}`}
+              className="flex-1 px-3 py-2 border rounded-md"
+            />
+            {questions.length > 1 && (
+              <button
+                type="button"
+                onClick={() => handleRemoveQuestion(i)}
+                className="px-3 py-2 bg-red-50 text-red-600 rounded-md"
+              >
+                Remove
+              </button>
+            )}
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={handleAddQuestion}
+          className="mt-2 px-3 py-2 bg-blue-50 text-blue-600 rounded-md"
+        >
+          Add Question
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">Format</label>
+          <select
+            value={format}
+            onChange={(e) => setFormat(e.target.value as any)}
+            className="w-full px-3 py-2 border rounded-md"
+          >
+            <option value="summary">Executive Summary</option>
+            <option value="detailed">Detailed Analysis</option>
+            <option value="brief">Quick Brief</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Timeline</label>
+          <select
+            value={timeline}
+            onChange={(e) => setTimeline(e.target.value as any)}
+            className="w-full px-3 py-2 border rounded-md"
+          >
+            <option value="urgent">Urgent (24h)</option>
+            <option value="normal">Normal (3-5d)</option>
+            <option value="flexible">Flexible (1-2w)</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">Additional Context (optional)</label>
+        <textarea
+          value={context}
+          onChange={(e) => setContext(e.target.value)}
+          placeholder="Any additional details or constraints..."
+          rows={3}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+      >
+        {loading ? 'Submitting...' : 'Submit Research Request'}
+      </button>
+    </form>
+  )
+}
+
+// ============================================================================
+// COMPONENT: ResultsViewer - Display research results
+// ============================================================================
+
+interface ResultsViewerProps {
+  jobId: string
+  orchestrator: ResearchOrchestrator
+}
+
+export function ResultsViewer({ jobId, orchestrator }: ResultsViewerProps) {
+  const { status, loading, error } = useResearchStatus(jobId, orchestrator)
+  const [results, setResults] = useState<ResearchResult | null>(null)
+
+  useEffect(() => {
+    if (status?.status === 'completed') {
+      orchestrator.getResults(jobId).then(setResults)
+    }
+  }, [status?.status, jobId, orchestrator])
+
+  if (loading) {
+    return <div className="p-4 text-center">Loading...</div>
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+        <p className="text-red-600 font-medium">Error: {error.message}</p>
+        {error.details && <pre className="mt-2 text-sm">{JSON.stringify(error.details, null, 2)}</pre>}
+      </div>
+    )
+  }
+
+  if (!status) {
+    return <div className="p-4 text-center">No results found</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Status */}
+      <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="font-medium">Status: {status.status}</p>
+            <p className="text-sm text-gray-600">Progress: {status.progress}%</p>
+          </div>
+          <div className="w-32 h-2 bg-gray-300 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-blue-600 transition-all"
+              style={{ width: `${status.progress}%` }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Results */}
+      {results && (
+        <>
+          {/* Synthesis */}
+          <div>
+            <h3 className="text-lg font-medium mb-2">Research Synthesis</h3>
+            <div className="p-4 bg-gray-50 border rounded-md">
+              <p className="text-sm">{results.synthesis}</p>
+            </div>
+          </div>
+
+          {/* Sources */}
+          <div>
+            <h3 className="text-lg font-medium mb-2">Sources</h3>
+            <div className="space-y-2">
+              {results.sources.map((source, i) => (
+                <div key={i} className="p-3 bg-gray-50 border rounded-md">
+                  <a href={source.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline font-medium">
+                    {source.title}
+                  </a>
+                  <p className="text-xs text-gray-500 mt-1">{source.url}</p>
+                  <p className="text-sm text-gray-700 mt-1">{source.snippet}</p>
+                  <p className="text-xs text-gray-500 mt-1">Confidence: {(source.confidence * 100).toFixed(0)}%</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Metadata */}
+          <div className="grid grid-cols-3 gap-4">
+            <div className="p-3 bg-gray-50 border rounded-md">
+              <p className="text-xs text-gray-500">Cost</p>
+              <p className="font-medium">${results.cost.toFixed(2)}</p>
+            </div>
+            <div className="p-3 bg-gray-50 border rounded-md">
+              <p className="text-xs text-gray-500">Latency</p>
+              <p className="font-medium">{results.latency_ms}ms</p>
+            </div>
+            <div className="p-3 bg-gray-50 border rounded-md">
+              <p className="text-xs text-gray-500">Confidence</p>
+              <p className="font-medium">{(results.confidence * 100).toFixed(0)}%</p>
+            </div>
+          </div>
+
+          {/* Export */}
+          <div className="flex gap-2">
+            <button
+              onClick={() => {
+                const json = JSON.stringify(results, null, 2)
+                const blob = new Blob([json], { type: 'application/json' })
+                const url = URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `research-${jobId}.json`
+                a.click()
+              }}
+              className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
+            >
+              Export JSON
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// COMPONENT: ResearchCard - Compact research result display
+// ============================================================================
+
+interface ResearchCardProps {
+  jobId: string
+  company: string
+  status: ResearchStatus
+  progress: number
+  onClick?: () => void
+}
+
+export function ResearchCard({
+  jobId,
+  company,
+  status,
+  progress,
+  onClick,
+}: ResearchCardProps) {
+  const statusColor = {
+    pending: 'bg-gray-100 text-gray-700',
+    running: 'bg-blue-100 text-blue-700',
+    completed: 'bg-green-100 text-green-700',
+    failed: 'bg-red-100 text-red-700',
+  }
+
+  return (
+    <div
+      onClick={onClick}
+      className="p-4 border rounded-md hover:bg-gray-50 cursor-pointer transition"
+    >
+      <div className="flex items-start justify-between">
+        <div>
+          <h4 className="font-medium">{company}</h4>
+          <p className="text-xs text-gray-500">ID: {jobId.slice(0, 8)}...</p>
+        </div>
+        <span className={`px-2 py-1 rounded text-xs font-medium ${statusColor[status]}`}>
+          {status}
+        </span>
+      </div>
+      <div className="mt-2 w-full h-2 bg-gray-300 rounded-full overflow-hidden">
+        <div
+          className="h-full bg-blue-600 transition-all"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// COMPONENT: HistoryDashboard - List of research requests
+// ============================================================================
+
+interface HistoryDashboardProps {
+  orchestrator: ResearchOrchestrator
+  onSelectJob?: (jobId: string) => void
+}
+
+export function HistoryDashboard({
+  orchestrator,
+  onSelectJob,
+}: HistoryDashboardProps) {
+  const [jobs, setJobs] = useState<Array<{
+    jobId: string
+    company: string
+    status: ResearchStatus
+    progress: number
+  }>>([])
+
+  // This would normally fetch from your backend
+  // For now it's a placeholder
+
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Research History</h2>
+      {jobs.length === 0 ? (
+        <div className="p-4 text-center text-gray-500">No research requests yet</div>
+      ) : (
+        <div className="grid gap-4">
+          {jobs.map((job) => (
+            <ResearchCard
+              key={job.jobId}
+              jobId={job.jobId}
+              company={job.company}
+              status={job.status}
+              progress={job.progress}
+              onClick={() => onSelectJob?.(job.jobId)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export default {
+  useResearchOrchestrator,
+  useResearchStatus,
+  RequestForm,
+  ResultsViewer,
+  ResearchCard,
+  HistoryDashboard,
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}