@dilipod/ui 0.4.22 → 0.4.24

package/src/components/worker-spec.tsx

@@ -0,0 +1,544 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import {
+  Target,
+  Crosshair,
+  ListNumbers,
+  TreeStructure,
+  Lightning,
+  Wrench,
+  Plugs,
+  ShieldCheck,
+  CaretDown,
+  CaretRight,
+  Clock,
+  TrendUp,
+  CurrencyEur,
+  Sparkle,
+  Lightbulb,
+  Robot,
+  MagnifyingGlass,
+  FilmStrip,
+  FileText,
+  TextT,
+  VideoCamera,
+  ImageSquare,
+} from '@phosphor-icons/react'
+import { FlowchartDiagram } from './flowchart-diagram'
+import { Badge } from './badge'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
+
+// ============================================
+// Types
+// ============================================
+
+export interface AnalysisSource {
+  type: string
+  name: string
+  size: number
+  insights?: string[]
+  processing_time_ms?: number
+}
+
+export interface AnalysisSummary {
+  total_sources: number
+  video_count: number
+  document_count: number
+  image_count: number
+  total_insights: number
+  analyzed_at: string
+}
+
+export interface WorkerSpecDocumentation {
+  scope: string | null
+  goal: string | null
+  steps: Array<{
+    step: number
+    title: string
+    description: string
+    tools_used?: string[]
+  }> | null
+  diagram: string | null
+  expected_impact: {
+    time_saved_per_occurrence_minutes: number
+    frequency: string
+    yearly_hours_saved: number
+    yearly_cost_savings_euros: number
+    qualitative_benefits: string[]
+  } | null
+  technical_requirements: string[] | null
+  integration_points: string[] | null
+  edge_cases_handled: Array<{
+    scenario: string
+    handling: string
+  }> | null
+  analysis_sources: AnalysisSource[] | null
+  analysis_summary: AnalysisSummary | null
+  analysis_context: string | null
+  version: number
+  model_used: string | null
+  updated_at: string
+}
+
+export interface WorkerSpecProps {
+  /** The Knowledge Builder final documentation */
+  documentation: WorkerSpecDocumentation | null
+  /** Optional className for the container */
+  className?: string
+}
+
+// ============================================
+// Frequency labels for impact display
+// ============================================
+
+const frequencyLabels: Record<string, string> = {
+  multiple_daily: 'occurrence',
+  daily: 'day',
+  weekly: 'week',
+  monthly: 'month',
+  quarterly: 'quarter',
+  yearly: 'year',
+}
+
+// ============================================
+// Section Header Component
+// ============================================
+
+function SectionHeader({
+  icon,
+  title,
+  count,
+  expanded,
+  onToggle,
+  iconColor = 'text-[var(--cyan)]',
+}: {
+  icon: React.ReactNode
+  title: string
+  count?: number
+  expanded: boolean
+  onToggle: () => void
+  iconColor?: string
+}) {
+  return (
+    <button
+      onClick={onToggle}
+      className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide hover:text-[var(--black)] transition-colors w-full"
+    >
+      {expanded ? <CaretDown size={12} /> : <CaretRight size={12} />}
+      <span className={iconColor}>{icon}</span>
+      {title}
+      {count !== undefined && (
+        <span className="text-muted-foreground font-normal">({count})</span>
+      )}
+    </button>
+  )
+}
+
+// ============================================
+// Analysis Context Renderer
+// ============================================
+
+function AnalysisContextRenderer({ content }: { content: string }) {
+  const sections = content.split(/^## /gm).filter(Boolean)
+
+  const getIcon = (title: string) => {
+    if (title.includes('Request')) return <Target size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Video')) return <VideoCamera size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Document')) return <FileText size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Rules')) return <Lightbulb size={14} className="text-amber-500" />
+    if (title.includes('Context')) return <TextT size={14} className="text-[var(--cyan)]" />
+    return null
+  }
+
+  return (
+    <div className="space-y-6">
+      {sections.map((section, index) => {
+        const lines = section.split('\n')
+        const title = lines[0]?.trim()
+        const body = lines.slice(1).join('\n').trim()
+
+        if (!body) return null
+
+        return (
+          <div key={index}>
+            <h4 className="text-sm font-medium text-[var(--black)] flex items-center gap-2 mb-3">
+              {getIcon(title)}
+              {title}
+            </h4>
+            <div className="text-sm text-muted-foreground pl-5 space-y-2 whitespace-pre-line">
+              {body}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================
+// Main Component
+// ============================================
+
+export function WorkerSpec({ documentation, className }: WorkerSpecProps) {
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(['goal', 'scope', 'steps', 'diagram', 'impact', 'requirements', 'edge_cases'])
+  )
+
+  const toggleSection = (section: string) => {
+    setExpandedSections(prev => {
+      const next = new Set(prev)
+      if (next.has(section)) {
+        next.delete(section)
+      } else {
+        next.add(section)
+      }
+      return next
+    })
+  }
+
+  // Empty state
+  if (!documentation) {
+    return (
+      <div className={className}>
+        <div className="flex items-center gap-3 p-6 rounded-sm border border-dashed border-gray-300 bg-gray-50/50">
+          <div className="w-10 h-10 rounded-sm bg-gray-100 flex items-center justify-center">
+            <Robot size={20} className="text-gray-400" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-[var(--black)]">Worker Spec Pending</h3>
+            <p className="text-sm text-muted-foreground">
+              The final specification will be generated automatically after the documentation is approved.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const freqLabel = documentation.expected_impact?.frequency
+    ? frequencyLabels[documentation.expected_impact.frequency] || documentation.expected_impact.frequency
+    : 'occurrence'
+
+  const hasAnalysis = documentation.analysis_context || (documentation.analysis_sources && documentation.analysis_sources.length > 0)
+
+  return (
+    <div className={className}>
+      <div className="space-y-5">
+        {/* What was analyzed */}
+        {hasAnalysis && (
+          <div>
+            <Dialog>
+              <DialogTrigger asChild>
+                <button className="flex items-center gap-2 text-sm font-medium text-[var(--cyan)] hover:text-[var(--cyan)]/80 transition-colors">
+                  <MagnifyingGlass size={16} />
+                  What was analyzed
+                  {documentation.analysis_summary && (
+                    <span className="text-xs text-muted-foreground font-normal">
+                      ({documentation.analysis_summary.total_sources} source{documentation.analysis_summary.total_sources !== 1 ? 's' : ''})
+                    </span>
+                  )}
+                  <CaretRight size={12} />
+                </button>
+              </DialogTrigger>
+              <DialogContent className="max-w-xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>What was analyzed</DialogTitle>
+                  {documentation.analysis_summary && (
+                    <DialogDescription className="flex items-center gap-4 text-xs">
+                      <span>{documentation.analysis_summary.total_sources} source{documentation.analysis_summary.total_sources !== 1 ? 's' : ''}</span>
+                      {documentation.analysis_summary.video_count > 0 && (
+                        <span className="flex items-center gap-1">
+                          <FilmStrip size={12} />
+                          {documentation.analysis_summary.video_count} video{documentation.analysis_summary.video_count !== 1 ? 's' : ''}
+                        </span>
+                      )}
+                      {documentation.analysis_summary.document_count > 0 && (
+                        <span className="flex items-center gap-1">
+                          <FileText size={12} />
+                          {documentation.analysis_summary.document_count} doc{documentation.analysis_summary.document_count !== 1 ? 's' : ''}
+                        </span>
+                      )}
+                    </DialogDescription>
+                  )}
+                </DialogHeader>
+
+                {/* Sources Section */}
+                {documentation.analysis_sources && documentation.analysis_sources.length > 0 && (
+                  <div className="space-y-2">
+                    <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Sources</h4>
+                    <div className="space-y-1.5">
+                      {documentation.analysis_sources.map((source, i) => (
+                        <div key={i} className="flex items-center gap-2 text-sm">
+                          <div className="flex-shrink-0 text-muted-foreground">
+                            {source.type === 'video' && <FilmStrip size={14} />}
+                            {(source.type === 'document' || source.type === 'pdf') && <FileText size={14} />}
+                            {source.type === 'spreadsheet' && <FileText size={14} />}
+                            {source.type === 'image' && <ImageSquare size={14} />}
+                            {source.type === 'description' && <TextT size={14} />}
+                          </div>
+                          <span className="truncate text-[var(--black)]">{source.name}</span>
+                          {source.size > 0 && (
+                            <span className="text-xs text-muted-foreground flex-shrink-0">
+                              {source.size > 1024 * 1024
+                                ? `${(source.size / 1024 / 1024).toFixed(1)}MB`
+                                : `${Math.round(source.size / 1024)}KB`}
+                            </span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Analysis Details Section */}
+                {documentation.analysis_context && (
+                  <div className="border-t border-gray-100 pt-4 space-y-1">
+                    <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Analysis Details</h4>
+                    <AnalysisContextRenderer content={documentation.analysis_context} />
+                  </div>
+                )}
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
+        {/* Goal */}
+        {documentation.goal && (
+          <div>
+            <SectionHeader
+              icon={<Target size={12} weight="fill" />}
+              title="Goal"
+              expanded={expandedSections.has('goal')}
+              onToggle={() => toggleSection('goal')}
+            />
+            {expandedSections.has('goal') && (
+              <p className="text-sm text-muted-foreground leading-relaxed pl-5 mt-2">
+                {documentation.goal}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Scope */}
+        {documentation.scope && (
+          <div>
+            <SectionHeader
+              icon={<Crosshair size={12} weight="fill" />}
+              title="Scope"
+              expanded={expandedSections.has('scope')}
+              onToggle={() => toggleSection('scope')}
+            />
+            {expandedSections.has('scope') && (
+              <p className="text-sm text-muted-foreground leading-relaxed pl-5 mt-2">
+                {documentation.scope}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Detailed Steps */}
+        {documentation.steps && documentation.steps.length > 0 && (
+          <div>
+            <SectionHeader
+              icon={<ListNumbers size={12} weight="fill" />}
+              title="Steps"
+              count={documentation.steps.length}
+              expanded={expandedSections.has('steps')}
+              onToggle={() => toggleSection('steps')}
+            />
+            {expandedSections.has('steps') && (
+              <div className="space-y-3 pl-5 mt-2">
+                {documentation.steps.map((step, i) => (
+                  <div key={i} className="flex items-start gap-3">
+                    <span className="w-6 h-6 rounded-sm bg-[var(--cyan)]/10 flex items-center justify-center text-xs font-bold text-[var(--cyan)] shrink-0 mt-0.5">
+                      {step.step || i + 1}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-[var(--black)]">{step.title}</p>
+                      <p className="text-sm text-muted-foreground mt-0.5">{step.description}</p>
+                      {step.tools_used && step.tools_used.length > 0 && (
+                        <div className="flex flex-wrap gap-1 mt-1.5">
+                          {step.tools_used.map((tool, j) => (
+                            <span key={j} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-sm bg-gray-100 text-[10px] font-medium text-gray-600">
+                              <Wrench size={10} />
+                              {tool}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Workflow Diagram */}
+        {documentation.diagram && (
+          <div>
+            <SectionHeader
+              icon={<TreeStructure size={12} weight="fill" />}
+              title="Workflow Diagram"
+              expanded={expandedSections.has('diagram')}
+              onToggle={() => toggleSection('diagram')}
+              iconColor="text-purple-500"
+            />
+            {expandedSections.has('diagram') && (
+              <div className="pl-5 mt-2">
+                <div className="bg-white border border-gray-100 rounded-sm p-4 overflow-x-auto">
+                  <FlowchartDiagram mermaid={documentation.diagram} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Expected Impact */}
+        {documentation.expected_impact && (
+          <div>
+            <SectionHeader
+              icon={<Lightning size={12} weight="fill" />}
+              title="Expected Impact"
+              expanded={expandedSections.has('impact')}
+              onToggle={() => toggleSection('impact')}
+              iconColor="text-purple-500"
+            />
+            {expandedSections.has('impact') && (
+              <div className="pl-5 mt-2">
+                <div className="bg-emerald-50/50 border border-emerald-100 rounded-sm p-4">
+                  <div className="grid grid-cols-3 gap-3 mb-3">
+                    <div className="bg-white rounded-sm p-3 border border-emerald-100 text-center">
+                      <Clock size={18} className="text-emerald-600 mx-auto mb-1" />
+                      <p className="text-lg font-bold text-[var(--black)]">
+                        {documentation.expected_impact.time_saved_per_occurrence_minutes} min
+                      </p>
+                      <p className="text-[10px] text-muted-foreground">saved per {freqLabel}</p>
+                    </div>
+                    <div className="bg-white rounded-sm p-3 border border-emerald-100 text-center">
+                      <TrendUp size={18} className="text-emerald-600 mx-auto mb-1" />
+                      <p className="text-lg font-bold text-[var(--black)]">
+                        {documentation.expected_impact.yearly_hours_saved}h
+                      </p>
+                      <p className="text-[10px] text-muted-foreground">saved per year</p>
+                    </div>
+                    <div className="bg-white rounded-sm p-3 border border-emerald-100 text-center">
+                      <CurrencyEur size={18} className="text-emerald-600 mx-auto mb-1" />
+                      <p className="text-lg font-bold text-[var(--black)]">
+                        €{documentation.expected_impact.yearly_cost_savings_euros.toLocaleString()}
+                      </p>
+                      <p className="text-[10px] text-muted-foreground">estimated yearly savings</p>
+                    </div>
+                  </div>
+                  {documentation.expected_impact.qualitative_benefits && documentation.expected_impact.qualitative_benefits.length > 0 && (
+                    <div className="space-y-1">
+                      {documentation.expected_impact.qualitative_benefits.map((benefit, i) => (
+                        <div key={i} className="flex items-start gap-2 text-sm text-emerald-700">
+                          <Sparkle size={14} className="text-emerald-500 shrink-0 mt-0.5" weight="fill" />
+                          {benefit}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Technical Requirements & Integration Points */}
+        {((documentation.technical_requirements && documentation.technical_requirements.length > 0) ||
+          (documentation.integration_points && documentation.integration_points.length > 0)) && (
+          <div>
+            <SectionHeader
+              icon={<Plugs size={12} weight="fill" />}
+              title="Requirements & Integrations"
+              expanded={expandedSections.has('requirements')}
+              onToggle={() => toggleSection('requirements')}
+            />
+            {expandedSections.has('requirements') && (
+              <div className="grid md:grid-cols-2 gap-4 pl-5 mt-2">
+                {documentation.technical_requirements && documentation.technical_requirements.length > 0 && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+                      Technical Requirements
+                    </p>
+                    <ul className="space-y-1.5">
+                      {documentation.technical_requirements.map((req, i) => (
+                        <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
+                          <Wrench size={12} className="text-gray-400 shrink-0 mt-1" />
+                          {req}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {documentation.integration_points && documentation.integration_points.length > 0 && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+                      Integration Points
+                    </p>
+                    <ul className="space-y-1.5">
+                      {documentation.integration_points.map((point, i) => (
+                        <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
+                          <Plugs size={12} className="text-gray-400 shrink-0 mt-1" />
+                          {point}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Edge Cases Handled */}
+        {documentation.edge_cases_handled && documentation.edge_cases_handled.length > 0 && (
+          <div>
+            <SectionHeader
+              icon={<ShieldCheck size={12} weight="fill" />}
+              title="Edge Cases Handled"
+              count={documentation.edge_cases_handled.length}
+              expanded={expandedSections.has('edge_cases')}
+              onToggle={() => toggleSection('edge_cases')}
+              iconColor="text-amber-500"
+            />
+            {expandedSections.has('edge_cases') && (
+              <div className="space-y-2 pl-5 mt-2">
+                {documentation.edge_cases_handled.map((ec, i) => (
+                  <div key={i} className="text-sm p-3 bg-gray-50 rounded-sm border border-gray-100">
+                    <p className="font-medium text-[var(--black)]">{ec.scenario}</p>
+                    <p className="text-muted-foreground mt-1">→ {ec.handling}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Version footer */}
+        <div className="pt-3 border-t border-gray-100 flex items-center gap-2 text-xs text-muted-foreground">
+          <Badge variant="outline" size="sm">v{documentation.version}</Badge>
+          {documentation.model_used && (
+            <>
+              <span>•</span>
+              <span>{documentation.model_used}</span>
+            </>
+          )}
+          <span>•</span>
+          <span>Updated {new Date(documentation.updated_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/index.ts

@@ -293,6 +293,14 @@ export type {
   WorkflowTemplate 
 } from './components/workflow-viewer'
 
+// Worker Spec Components
+export { WorkerSpec } from './components/worker-spec'
+export type { WorkerSpecProps, WorkerSpecDocumentation, AnalysisSource, AnalysisSummary } from './components/worker-spec'
+
+// Flowchart Diagram Components
+export { FlowchartDiagram } from './components/flowchart-diagram'
+export type { FlowchartDiagramProps } from './components/flowchart-diagram'
+
 // Utilities
 export { cn } from './lib/utils'