Frontend Components

​

Paper Components

​

PaperCard

<PaperCard>
  <h2>Document Title</h2>
  <p>Document content...</p>
</PaperCard>

• className - Additional CSS classes
• variant - Card variant style
• onClick - Click handler

​

PaperButton

<PaperButton onClick={handleClick} variant="primary">
  Click Me
</PaperButton>

• primary - Solid ink background, paper text
• ghost - Transparent background, ink text
• danger - Warning/error styling

• variant - Button variant
• size - Button size (sm, md, lg)
• icon - Icon element (React node)
• disabled - Disabled state

​

PaperInput

<PaperInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter text..."
/>

​

PaperBadge

<PaperBadge color="ink">SYSTEM_STATUS: ONLINE</PaperBadge>

• ink - Dark/primary
• accent - Success/highlight
• warning - Warning/alert

​

PaperModal

<PaperModal isOpen={isOpen} onClose={handleClose}>
  <h2>Modal Title</h2>
  <p>Modal content...</p>
</PaperModal>

​

PaperTextArea

<PaperTextArea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  rows={5}
/>

​

PaperSelect

<PaperSelect
  value={selected}
  onChange={(e) => setSelected(e.target.value)}
  options={options}
/>

​

Layout Components

​

Layout

• Header: Navigation and user info
• Sidebar: View navigation (if applicable)
• Content Area: Main view content
• Footer: System status and links

​

ErrorBoundary

<ErrorBoundary fallback={<ErrorFallback />}>
  <YourComponent />
</ErrorBoundary>

• Catches React errors
• Displays error UI
• Logs errors for debugging

​

Specialized Components

​

GraphAnalysis

• Centrality metrics display
• Cluster identification
• Connection strength visualization
• Node type distribution

​

GlobalToast

// Usage in services
toast.success('Document uploaded successfully');
toast.error('Upload failed');
toast.info('Processing...');

• success - Green, success messages
• error - Red, error messages
• info - Blue, informational messages
• warning - Yellow, warning messages

​

GlobalAIModal

• Context-aware AI assistance
• Streaming responses
• Multi-turn conversations

​

SupervisorToast

• High-confidence decisions
• Urgent alerts
• Decision summaries
• Dismissible notifications

​

SupervisorWidget

• Active decision count
• Confidence levels
• Monitoring status
• Quick actions

​

SystemPromptAlert

• Notifies users of prompt updates
• Shows prompt preview
• Accept/dismiss actions

​

Component Patterns

​

Composition

<PaperCard>
  <PaperCard.Header>
    <h2>Title</h2>
  </PaperCard.Header>
  <PaperCard.Body>
    Content
  </PaperCard.Body>
  <PaperCard.Footer>
    Actions
  </PaperCard.Footer>
</PaperCard>

​

Props Interface

interface PaperButtonProps {
  variant?: 'primary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  icon?: React.ReactNode;
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

​

Styling

• Hard shadows: shadow-[4px_4px_0px_0px_rgb(24,24,27)]
• Hard borders: border-2 border-ink
• High contrast colors
• No rounded corners (max 2px border-radius)

​

State Management

import { useStore } from '../store';

const MyComponent = () => {
  const documents = useStore((state) => state.documents);
  const updateDocuments = useStore((state) => state.updateDocuments);
  
  // Component logic
};

​

Animations

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  Content
</motion.div>

​

Related Documentation

• Frontend Views - View components and pages
• Design System - Paper UI design principles
• Backend Worker - Worker API