@papernote/ui 1.10.26 → 1.11.1

package/src/components/ActionCard.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface ActionCardAction {
+  /** Button label */
+  label: string;
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  /** Click handler */
+  onClick: () => void;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+  /** Icon to show */
+  icon?: React.ReactNode;
+}
+
+export interface ActionCardProps {
+  /** Card title — what needs action */
+  title: string;
+  /** Description — why the system flagged it */
+  description?: string;
+  /** Affected entity type and ID */
+  entityType?: string;
+  entityId?: string;
+  /** Entity link click handler */
+  onEntityClick?: () => void;
+  /** Reasoning text — why the system flagged this */
+  reasoning?: string;
+  /** Available actions */
+  actions: ActionCardAction[];
+  /** Priority/urgency level */
+  priority?: 'high' | 'medium' | 'low';
+  /** Icon */
+  icon?: React.ReactNode;
+  /** Confidence score (0-100) */
+  confidence?: number;
+  /** Timestamp */
+  timestamp?: string;
+  /** Whether the card is selected */
+  selected?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const priorityStyles: Record<string, { border: string; dot: string }> = {
+  high:   { border: 'border-l-4 border-l-red-400', dot: 'bg-red-500' },
+  medium: { border: 'border-l-4 border-l-yellow-400', dot: 'bg-yellow-500' },
+  low:    { border: 'border-l-4 border-l-blue-400', dot: 'bg-blue-500' },
+};
+
+const buttonVariants: Record<string, string> = {
+  primary:   'bg-primary-600 text-white hover:bg-primary-700',
+  secondary: 'bg-paper-100 text-ink-700 hover:bg-paper-200 border border-paper-300',
+  danger:    'bg-error-600 text-white hover:bg-error-700',
+  ghost:     'text-ink-600 hover:bg-paper-100',
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ActionCard — Approval workflow card with action buttons
+ *
+ * Shows what needs action, why it was flagged, and provides quick-action buttons.
+ * Used in the Approvals & Review queue across all process domains.
+ */
+export default function ActionCard({
+  title,
+  description,
+  entityType,
+  entityId,
+  onEntityClick,
+  reasoning,
+  actions,
+  priority,
+  icon,
+  confidence,
+  timestamp,
+  selected = false,
+  className = '',
+}: ActionCardProps) {
+  const prioStyle = priority ? priorityStyles[priority] : undefined;
+
+  return (
+    <div
+      className={`
+        rounded-lg border bg-white dark:bg-ink-900 p-4
+        ${selected ? 'border-primary-400 ring-2 ring-primary-100' : 'border-paper-200 dark:border-ink-700'}
+        ${prioStyle?.border || ''}
+        ${className}
+      `}
+    >
+      {/* Header: icon + title + confidence */}
+      <div className="flex items-start gap-3 mb-3">
+        {icon && (
+          <div className="flex-shrink-0 text-ink-400 mt-0.5">{icon}</div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-ink-900 dark:text-ink-100">
+              {title}
+            </h4>
+            {priority && prioStyle && (
+              <span className={`w-2 h-2 rounded-full ${prioStyle.dot} flex-shrink-0`} />
+            )}
+          </div>
+          {description && (
+            <p className="text-sm text-ink-500 mt-0.5">{description}</p>
+          )}
+        </div>
+        {confidence !== undefined && (
+          <span className={`text-xs px-2 py-0.5 rounded flex-shrink-0 ${
+            confidence >= 80 ? 'bg-success-50 text-success-700' :
+            confidence >= 50 ? 'bg-warning-50 text-warning-700' :
+            'bg-error-50 text-error-700'
+          }`}>
+            {confidence}% confidence
+          </span>
+        )}
+      </div>
+
+      {/* Entity link */}
+      {entityType && entityId && (
+        <div className="mb-2">
+          <button
+            type="button"
+            onClick={onEntityClick}
+            className="text-xs text-primary-600 hover:text-primary-700 hover:underline"
+          >
+            {entityType} #{entityId}
+          </button>
+        </div>
+      )}
+
+      {/* Reasoning */}
+      {reasoning && (
+        <div className="mb-3 px-3 py-2 bg-paper-50 dark:bg-ink-800 rounded text-xs text-ink-600 dark:text-ink-400 border-l-2 border-ink-200">
+          {reasoning}
+        </div>
+      )}
+
+      {/* Actions + timestamp */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          {actions.map((action, idx) => (
+            <button
+              key={idx}
+              type="button"
+              onClick={action.onClick}
+              disabled={action.disabled}
+              className={`
+                inline-flex items-center gap-1 px-3 py-1.5 rounded text-xs font-medium
+                transition-colors disabled:opacity-50 disabled:cursor-not-allowed
+                ${buttonVariants[action.variant || 'secondary']}
+              `}
+            >
+              {action.icon}
+              {action.label}
+            </button>
+          ))}
+        </div>
+        {timestamp && (
+          <span className="text-xs text-ink-400 flex-shrink-0">{timestamp}</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/AnomalyBanner.tsx

@@ -0,0 +1,113 @@
+import { AlertTriangle, X, ArrowRight } from 'lucide-react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface AnomalyBannerProps {
+  /** Anomaly title/summary */
+  title: string;
+  /** Detailed description */
+  description?: string;
+  /** Severity level */
+  severity?: 'info' | 'warning' | 'critical';
+  /** Affected entity count */
+  affectedCount?: number;
+  /** Action button label */
+  actionLabel?: string;
+  /** Action button handler */
+  onAction?: () => void;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const severityConfig: Record<string, { bg: string; border: string; text: string; icon: string }> = {
+  info:     { bg: 'bg-blue-50 dark:bg-blue-900/20',   border: 'border-blue-200 dark:border-blue-800',   text: 'text-blue-800 dark:text-blue-200',   icon: 'text-blue-500' },
+  warning:  { bg: 'bg-warning-50 dark:bg-warning-900/20', border: 'border-warning-200 dark:border-warning-800', text: 'text-warning-800 dark:text-warning-200', icon: 'text-warning-500' },
+  critical: { bg: 'bg-error-50 dark:bg-error-900/20',  border: 'border-error-200 dark:border-error-800',  text: 'text-error-800 dark:text-error-200',  icon: 'text-error-500' },
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * AnomalyBanner — Alert banner for anomaly detection
+ *
+ * Shows a prominent banner when the system detects unusual patterns.
+ * Severity levels: info (FYI), warning (review recommended), critical (immediate action).
+ * Used at the top of process views and dashboards.
+ */
+export default function AnomalyBanner({
+  title,
+  description,
+  severity = 'warning',
+  affectedCount,
+  actionLabel,
+  onAction,
+  onDismiss,
+  className = '',
+}: AnomalyBannerProps) {
+  const config = severityConfig[severity];
+
+  return (
+    <div
+      className={`
+        flex items-start gap-3 px-4 py-3 rounded-lg border
+        ${config.bg} ${config.border}
+        ${className}
+      `}
+      role="alert"
+    >
+      {/* Icon */}
+      <AlertTriangle className={`h-5 w-5 flex-shrink-0 mt-0.5 ${config.icon}`} />
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h4 className={`text-sm font-medium ${config.text}`}>
+            {title}
+          </h4>
+          {affectedCount !== undefined && (
+            <span className={`text-xs px-1.5 py-0.5 rounded-full ${config.bg} ${config.text} font-medium`}>
+              {affectedCount} affected
+            </span>
+          )}
+        </div>
+        {description && (
+          <p className={`text-sm mt-1 ${config.text} opacity-80`}>
+            {description}
+          </p>
+        )}
+        {actionLabel && onAction && (
+          <button
+            type="button"
+            onClick={onAction}
+            className={`inline-flex items-center gap-1 text-sm font-medium mt-2 ${config.text} hover:underline`}
+          >
+            {actionLabel}
+            <ArrowRight className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Dismiss */}
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className={`flex-shrink-0 p-1 rounded hover:bg-white/50 transition-colors ${config.text} opacity-60 hover:opacity-100`}
+          aria-label="Dismiss"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/CaseQueueItem.tsx

@@ -0,0 +1,145 @@
+import { Clock, AlertTriangle, User } from 'lucide-react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface CaseQueueItemProps {
+  /** Case ID or number */
+  caseNumber: string;
+  /** Case subject/title */
+  subject: string;
+  /** Priority level */
+  priority: 'critical' | 'high' | 'medium' | 'low';
+  /** Current status */
+  status: string;
+  /** Status color variant */
+  statusColor?: 'slate' | 'blue' | 'indigo' | 'purple' | 'green' | 'red' | 'yellow' | 'orange' | 'teal';
+  /** Assignee name */
+  assignee?: string;
+  /** Account/customer name */
+  account?: string;
+  /** SLA deadline (ISO timestamp) */
+  /** Whether the SLA is breached */
+  slaBreach?: boolean;
+  /** Time remaining display string (e.g., "2h 15m") */
+  slaTimeRemaining?: string;
+  /** Click handler */
+  onClick?: () => void;
+  /** Whether the item is selected */
+  selected?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const priorityConfig: Record<string, { bg: string; text: string; label: string; dot: string }> = {
+  critical: { bg: 'bg-red-50', text: 'text-red-700', label: 'Critical', dot: 'bg-red-500' },
+  high:     { bg: 'bg-orange-50', text: 'text-orange-700', label: 'High', dot: 'bg-orange-500' },
+  medium:   { bg: 'bg-yellow-50', text: 'text-yellow-700', label: 'Medium', dot: 'bg-yellow-500' },
+  low:      { bg: 'bg-blue-50', text: 'text-blue-700', label: 'Low', dot: 'bg-blue-500' },
+};
+
+const statusColors: Record<string, { bg: string; text: string }> = {
+  slate:  { bg: 'bg-slate-100',  text: 'text-slate-700' },
+  blue:   { bg: 'bg-blue-100',   text: 'text-blue-700' },
+  indigo: { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+  purple: { bg: 'bg-purple-100', text: 'text-purple-700' },
+  green:  { bg: 'bg-green-100',  text: 'text-green-700' },
+  red:    { bg: 'bg-red-100',    text: 'text-red-700' },
+  yellow: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+  orange: { bg: 'bg-orange-100', text: 'text-orange-700' },
+  teal:   { bg: 'bg-teal-100',   text: 'text-teal-700' },
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * CaseQueueItem — Priority-sorted case card for support queue views
+ *
+ * Shows case subject, priority indicator, status, assignee, and SLA countdown.
+ * Designed for use in the Support Center's case queue list.
+ */
+export default function CaseQueueItem({
+  caseNumber,
+  subject,
+  priority,
+  status,
+  statusColor = 'slate',
+  assignee,
+  account,
+  slaBreach = false,
+  slaTimeRemaining,
+  onClick,
+  selected = false,
+  className = '',
+}: CaseQueueItemProps) {
+  const prio = priorityConfig[priority] || priorityConfig.medium;
+  const stColor = statusColors[statusColor];
+
+  return (
+    <div
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); } : undefined}
+      className={`
+        group relative rounded-lg border bg-white dark:bg-ink-900 p-4
+        ${selected ? 'border-primary-400 ring-2 ring-primary-100' : 'border-paper-200 dark:border-ink-700'}
+        ${onClick ? 'cursor-pointer hover:shadow-md hover:border-primary-300 transition-all' : ''}
+        ${slaBreach ? 'border-l-4 border-l-red-500' : ''}
+        ${className}
+      `}
+      aria-label={`Case ${caseNumber}: ${subject}`}
+    >
+      {/* Top row: case number + priority + SLA */}
+      <div className="flex items-center justify-between gap-2 mb-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-mono text-ink-400">{caseNumber}</span>
+          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${prio.bg} ${prio.text}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${prio.dot}`} />
+            {prio.label}
+          </span>
+        </div>
+
+        {/* SLA countdown */}
+        {(slaTimeRemaining || slaBreach) && (
+          <div className={`flex items-center gap-1 text-xs ${slaBreach ? 'text-red-600 font-medium' : 'text-ink-500'}`}>
+            {slaBreach ? <AlertTriangle className="h-3 w-3" /> : <Clock className="h-3 w-3" />}
+            <span>{slaBreach ? 'SLA Breached' : slaTimeRemaining}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Subject */}
+      <h4 className="text-sm font-medium text-ink-900 dark:text-ink-100 mb-1 line-clamp-2">
+        {subject}
+      </h4>
+
+      {/* Account */}
+      {account && (
+        <p className="text-xs text-ink-500 mb-2">{account}</p>
+      )}
+
+      {/* Bottom row: status + assignee */}
+      <div className="flex items-center justify-between gap-2">
+        {stColor && (
+          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${stColor.bg} ${stColor.text}`}>
+            {status}
+          </span>
+        )}
+        {assignee && (
+          <div className="flex items-center gap-1 text-xs text-ink-500">
+            <User className="h-3 w-3" />
+            <span>{assignee}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ConfidenceBadge.tsx

@@ -0,0 +1,62 @@
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface ConfidenceBadgeProps {
+  /** Confidence score (0-100) */
+  score: number;
+  /** Whether to show the score as text */
+  showScore?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ConfidenceBadge — Compact inline confidence display
+ *
+ * Shows a color-coded badge with optional score text.
+ * Used in table cells, Kanban cards, and list items where
+ * the full ConfidenceIndicator gauge would be too large.
+ */
+export default function ConfidenceBadge({
+  score,
+  showScore = true,
+  size = 'md',
+  className = '',
+}: ConfidenceBadgeProps) {
+  const normalizedScore = Math.min(100, Math.max(0, score));
+
+  const colorClasses = normalizedScore >= 80
+    ? 'bg-success-50 text-success-700 border-success-200'
+    : normalizedScore >= 50
+    ? 'bg-warning-50 text-warning-700 border-warning-200'
+    : 'bg-error-50 text-error-700 border-error-200';
+
+  const dotColor = normalizedScore >= 80
+    ? 'bg-success-500'
+    : normalizedScore >= 50
+    ? 'bg-warning-500'
+    : 'bg-error-500';
+
+  const sizeClasses = {
+    sm: { wrapper: 'px-1.5 py-0.5 text-[10px]', dot: 'w-1.5 h-1.5' },
+    md: { wrapper: 'px-2 py-0.5 text-xs', dot: 'w-2 h-2' },
+  };
+  const sizes = sizeClasses[size];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full border font-medium ${sizes.wrapper} ${colorClasses} ${className}`}
+      title={`${normalizedScore}% confidence`}
+    >
+      <span className={`${sizes.dot} rounded-full ${dotColor} flex-shrink-0`} />
+      {showScore && <span>{normalizedScore}%</span>}
+    </span>
+  );
+}

package/src/components/ConfidenceIndicator.tsx

@@ -0,0 +1,96 @@
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface ConfidenceIndicatorProps {
+  /** Confidence score (0-100) */
+  score: number;
+  /** Label to display below the gauge */
+  label?: string;
+  /** Size in pixels */
+  size?: number;
+  /** Stroke width */
+  strokeWidth?: number;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ConfidenceIndicator — Circular gauge showing confidence percentage
+ *
+ * Renders a circular progress arc with color based on score thresholds:
+ * - >= 80: green (high confidence)
+ * - >= 50: yellow (medium confidence)
+ * - < 50: red (low confidence)
+ *
+ * Used in review workflows and process views to show system confidence
+ * in automated actions.
+ */
+export default function ConfidenceIndicator({
+  score,
+  label,
+  size = 80,
+  strokeWidth = 6,
+  className = '',
+}: ConfidenceIndicatorProps) {
+  const normalizedScore = Math.min(100, Math.max(0, score));
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (normalizedScore / 100) * circumference;
+  const center = size / 2;
+
+  const color = normalizedScore >= 80 ? '#10b981' : // success green
+    normalizedScore >= 50 ? '#f59e0b' : // warning amber
+    '#ef4444'; // error red
+
+  const bgColor = normalizedScore >= 80 ? '#d1fae5' :
+    normalizedScore >= 50 ? '#fef3c7' :
+    '#fee2e2';
+
+  return (
+    <div className={`inline-flex flex-col items-center ${className}`}>
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="transform -rotate-90">
+          {/* Background circle */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={bgColor}
+            strokeWidth={strokeWidth}
+          />
+          {/* Progress arc */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            className="transition-all duration-500 ease-out"
+          />
+        </svg>
+        {/* Center text */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span
+            className="font-bold text-ink-900 dark:text-ink-100"
+            style={{ fontSize: size * 0.22 }}
+          >
+            {normalizedScore}%
+          </span>
+        </div>
+      </div>
+      {label && (
+        <span className="text-xs text-ink-500 mt-1">{label}</span>
+      )}
+    </div>
+  );
+}