@agentiffai/design 1.5.3 → 1.5.5

package/dist/workflow/index.d.ts

@@ -1,208 +1,214 @@
+export { b as WorkflowCard, W as WorkflowCardProps, d as WorkflowErrorAlert, c as WorkflowErrorAlertProps, a as WorkflowIntegration, f as WorkflowProgressBar, e as WorkflowProgressBarProps, h as WorkflowResultPanel, g as WorkflowResultPanelProps, j as WorkflowStatusBadge, i as WorkflowStatusBadgeProps } from '../WorkflowStatusBadge-47sYxc2F.js';
 import React__default from 'react';
 
 /**
- * WorkflowCard Component
+ * WorkflowDiscoveryCard Component (v2 of WorkflowCard)
  *
- * A card for displaying available workflows in a list.
- * Used for browsing and activating workflows, showing
- * integrations and input requirements.
+ * Linear: APP-262 — Design subtask: Workflow list card UI and metadata states
+ * Linear: AGE-56 — Workflow Card Design and Implementation
+ *
+ * The next-generation workflow list card. Designed for the workflows discovery
+ * screen where users browse and pick a workflow to run.
+ *
+ * Why this is a new component (vs editing WorkflowCard):
+ * - The existing WorkflowCard answers "what's the name and which integrations".
+ *   That isn't enough for users facing 100s of workflows. They also need to
+ *   know "can I run this now?", "do I need n8n / a paid sub / a Google login?",
+ *   "is there a demo I can watch?".
+ * - Keeping the original simple card stable for places it is still used.
+ *
+ * Card has two states:
+ *   • Collapsed — compact, scannable. Name, 1-line summary, readiness
+ *     status, integration icons, tiny metadata icons.
+ *   • Expanded — the "decision layer". Full description, setup checklist,
+ *     required vs optional integrations, paid sheet trigger, demo player,
+ *     source link, run button.
+ *
+ * Designed to be responsive — works at mobile, tablet, and desktop widths.
+ * Extensible — accepts arbitrary `customIndicators` for future flags
+ * (secure/private LLM, community node, etc.) without code changes here.
+ *
+ * Ranking/popularity slot is always reserved per Nick's note on Linear: even
+ * when the feature is not backed yet, design the indicator in and let the
+ * slot render empty.
  */
 
-interface WorkflowIntegration {
-    /** Icon URL or path */
-    icon: string;
-    /** Integration name for alt text */
+/**
+ * Readiness state — the single most important piece of info on the card.
+ * Translates "can the user run this workflow right now?" into one clear label.
+ */
+type WorkflowReadiness = 'ready' | 'setup-required' | 'needs-n8n' | 'paid' | 'provisioning' | 'failed' | 'unavailable';
+interface WorkflowDiscoveryIntegration {
+    /** Icon — string URL or a React node (e.g. an icon component) */
+    icon: string | React__default.ReactNode;
+    /** Integration name for alt text / tooltip */
     name: string;
-    /** Whether this integration is connected */
+    /** Whether the integration is connected */
     connected?: boolean;
-    /** Whether this integration is optional (softer visual when not connected) */
+    /** Whether the integration is optional */
     optional?: boolean;
 }
-interface WorkflowCardProps {
-    /** Unique identifier for the workflow */
-    id: string;
-    /** Workflow name */
+interface PaidIntegrationInfo {
+    /** Name of the paid integration (e.g. "Apify", "Postiz") */
     name: string;
-    /** Workflow description */
-    description?: string;
-    /** List of required integrations */
-    integrations?: WorkflowIntegration[];
-    /** Whether the workflow needs setup (not yet provisioned) */
-    needsSetup?: boolean;
-    /** Estimated cost per run (e.g., "~$0.15") */
-    estimatedCostPerRun?: string;
-    /** Click handler */
-    onClick?: () => void;
-    /** Whether the card is disabled */
-    disabled?: boolean;
-    /** Optional className for styling */
-    className?: string;
+    /** Short pricing note, e.g. "$5/mo · free trial available" */
+    pricingNote?: string;
+    /** True if the integration offers a free trial */
+    hasFreeTrial?: boolean;
+    /** Affiliate signup URL */
+    signupUrl?: string;
+    /** Optional Loom/YouTube setup video URL */
+    setupVideoUrl?: string;
 }
-declare const WorkflowCard: React__default.FC<WorkflowCardProps>;
-
-/**
- * WorkflowErrorAlert Component
- *
- * Displays workflow execution errors with inline, banner, or modal variants.
- *
- * @see specs/015-restyle-ai-chat/spec.md
- */
-
-interface WorkflowErrorAlertProps {
-    /** Error object or message */
-    error: Error | string;
-    /** Optional error code */
-    errorCode?: string;
-    /** Timestamp of the error */
-    timestamp?: string;
-    /** Visual variant */
-    variant?: 'inline' | 'banner' | 'modal';
-    /** Severity level */
-    severity?: 'error' | 'warning' | 'info';
-    /** Whether the error can be retried */
-    retryable?: boolean;
-    /** Callback when retry is clicked */
-    onRetry?: () => void;
-    /** Callback when dismiss is clicked */
-    onDismiss?: () => void;
-    /** Whether to show details section */
-    showDetails?: boolean;
-    /** Stack trace to display */
-    stackTrace?: string;
-    /** Custom title */
-    title?: string;
-    /** Custom className */
-    className?: string;
+type SetupRequirementType = 'oauth' | 'api-key' | 'n8n' | 'paid' | 'apify-rental';
+interface SetupRequirement {
+    /** Unique key */
+    id: string;
+    /** Kind of requirement (drives icon / styling) */
+    type: SetupRequirementType;
+    /** Human-readable label, e.g. "Connect Google", "Deploy n8n" */
+    label: string;
+    /** Whether this requirement is already satisfied */
+    done?: boolean;
+    /** Label for the action button, e.g. "Connect", "Set up" */
+    actionLabel?: string;
+    /** Action callback */
+    onAction?: () => void;
 }
-/**
- * WorkflowErrorAlert component for displaying workflow errors
- *
- * Features:
- * - Inline, banner, and modal variants
- * - Severity levels (error/warning/info)
- * - Error code and timestamp display
- * - Expandable stack trace
- * - Retry and dismiss actions
- * - Accessible error reporting
- */
-declare const WorkflowErrorAlert: React__default.FC<WorkflowErrorAlertProps>;
-
-/**
- * WorkflowProgressBar Component
- *
- * Displays workflow execution progress with linear or circular variants.
- *
- * @see specs/015-restyle-ai-chat/spec.md
- */
-
-interface WorkflowProgressBarProps {
-    /** Progress percentage (0-100), or undefined for indeterminate */
-    progress?: number;
-    /** Optional message to display */
-    message?: string;
-    /** Status affects the color */
-    status?: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
-    /** Visual variant */
-    variant?: 'linear' | 'circular';
-    /** Size of the progress bar */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether to show percentage text */
-    showPercentage?: boolean;
-    /** Whether to animate progress changes */
-    animated?: boolean;
-    /** Custom className */
-    className?: string;
+interface PopularityInfo {
+    /** Total run count (e.g. 1240) */
+    runCount?: number;
+    /** Ranking position (e.g. 2 = #2) */
+    rank?: number;
+    /** "Trending" flag */
+    trending?: boolean;
+}
+interface CustomIndicator {
+    /** Unique key */
+    id: string;
+    /** Small icon (16px target) */
+    icon: React__default.ReactNode;
+    /** Tooltip / aria-label text */
+    tooltip: string;
+    /** Optional accent color */
+    color?: string;
+}
+interface ProvenanceSource {
+    /** Display label, e.g. "n8n.io template" */
+    label: string;
+    /** Source URL */
+    url: string;
 }
 /**
- * WorkflowProgressBar component for showing workflow execution progress
- *
- * Features:
- * - Linear and circular variants
- * - Determinate and indeterminate modes
- * - Color-coded status (gray/blue/green/red/orange)
- * - Size options (sm/md/lg)
- * - Optional percentage display
- * - Smooth animations
- * - Progress message support
- */
-declare const WorkflowProgressBar: React__default.FC<WorkflowProgressBarProps>;
-
-/**
- * WorkflowResultPanel Component
- *
- * Displays workflow execution results with JSON/formatted/table views.
- *
- * @see specs/015-restyle-ai-chat/spec.md
+ * Community voting state for a workflow. Lives in design exploration only —
+ * each brainstorm variation can place it differently to see how it feels.
  */
-
-interface WorkflowResultPanelProps {
-    /** Output data to display */
-    outputData: unknown;
-    /** Visual variant */
-    variant?: 'json' | 'formatted' | 'table';
-    /** Whether the panel can be collapsed */
-    collapsible?: boolean;
-    /** Default expanded state */
-    defaultExpanded?: boolean;
-    /** Maximum height of content area */
-    maxHeight?: string;
-    /** Callback when download is clicked */
-    onDownload?: () => void;
-    /** Callback when copy is clicked */
-    onCopy?: () => void;
-    /** Custom title */
-    title?: string;
-    /** Custom className */
-    className?: string;
+interface VotesInfo {
+    /** Upvote count */
+    up: number;
+    /** Downvote count */
+    down: number;
+    /** What the current user has voted (or null if not voted) */
+    userVote?: 'up' | 'down' | null;
 }
 /**
- * WorkflowResultPanel component for displaying workflow results
- *
- * Features:
- * - JSON, formatted, and table view variants
- * - Collapsible content
- * - Download and copy actions
- * - Maximum height with scrolling
- * - Empty state handling
- * - Syntax highlighting for JSON
+ * Where the voting affordance renders on the card. Each placement is a
+ * distinct design hypothesis — we audition them in the brainstorm story
+ * so product + design can pick the right home for voting.
  */
-declare const WorkflowResultPanel: React__default.FC<WorkflowResultPanelProps>;
-
+type VotesPlacement = 
+/** Tiny compact arrow + count in the metadata icon row (top-right) */
+'metadata'
+/** Full pill (up arrow + count + down arrow + count) on the collapsed bottom row */
+ | 'bottom-row'
+/** Block at the bottom of the expanded view */
+ | 'expanded-footer';
 /**
- * WorkflowStatusBadge Component
- *
- * Displays workflow execution status with color coding.
- *
- * @see specs/015-restyle-ai-chat/spec.md
+ * Where the support / report-issue affordance renders on the card.
  */
-
-interface WorkflowStatusBadgeProps {
-    /** Workflow execution status */
-    status: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
-    /** Size of the badge */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether to show status icon */
-    showIcon?: boolean;
-    /** Whether to show status label */
-    showLabel?: boolean;
-    /** Whether to animate the icon */
-    animated?: boolean;
-    /** Custom status label text */
-    label?: string;
+type SupportPlacement = 
+/** Tiny icon in the metadata icon row (top-right) */
+'metadata'
+/** Button in the expanded view footer */
+ | 'expanded-footer';
+interface WorkflowDiscoveryCardProps {
+    /** Unique workflow identifier */
+    id: string;
+    /** Workflow display name */
+    name: string;
+    /** 1-line plain English summary (collapsed view) */
+    summary: string;
+    /** Longer description (expanded view). Falls back to `summary` if absent. */
+    description?: string;
+    /** Optional category */
+    category?: 'social_media' | 'ops' | 'crm' | string;
+    /** Optional workflow icon (URL or node) */
+    icon?: string | React__default.ReactNode;
+    /** Readiness state — drives the status label color and copy */
+    readiness: WorkflowReadiness;
+    /** Custom status label override (otherwise derived from `readiness`) */
+    statusLabel?: string;
+    /** Integration icons (collapsed view shows up to 4, rest as "+N") */
+    integrations?: WorkflowDiscoveryIntegration[];
+    /** Optional integrations — shown separately in expanded view */
+    optionalIntegrations?: WorkflowDiscoveryIntegration[];
+    /** Setup checklist for expanded view */
+    setupRequirements?: SetupRequirement[];
+    /** When set, the card shows a play-demo affordance */
+    demoVideoUrl?: string;
+    /** When set, the card shows the paid affiliate indicator + expanded sheet */
+    paidIntegration?: PaidIntegrationInfo;
+    /**
+     * Whether the workflow uses n8n under the hood. Shows a small n8n badge
+     * in the metadata icon row — except when the status already says "Needs n8n",
+     * in which case the badge is hidden to avoid duplication.
+     */
+    usesN8n?: boolean;
+    /** Provenance source (e.g. n8n.io template the workflow was based on) */
+    source?: ProvenanceSource;
+    /** Popularity info — always reserves a slot per Nick's design ask */
+    popularity?: PopularityInfo;
+    /** Reserve popularity slot even if data is empty (defaults to true) */
+    reservePopularitySpace?: boolean;
+    /** Future-proofing — extra indicators (secure LLM, community node, etc.) */
+    customIndicators?: CustomIndicator[];
+    /** Estimated cost per run, e.g. "~$0.15" */
+    estimatedCostPerRun?: string;
+    /** Whether the card starts expanded (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    isExpanded?: boolean;
+    /** Called when the expand state toggles */
+    onToggleExpanded?: (id: string, nextExpanded: boolean) => void;
+    /** Called when the user clicks Run (or the primary action) */
+    onRun?: (id: string) => void;
+    /** Called when the user wants to play the demo */
+    onPlayDemo?: (id: string, url: string) => void;
+    /** Called when the user wants to open the paid-integration sheet */
+    onOpenPaidSheet?: (id: string, info: PaidIntegrationInfo) => void;
+    /**
+     * Community voting state. When provided the voting affordance renders in
+     * the placement specified by `votesPlacement` (defaults to expanded-footer).
+     */
+    votes?: VotesInfo;
+    /** Where to render the voting affordance. Only used if `votes` is set. */
+    votesPlacement?: VotesPlacement;
+    /** Called when the user up/down votes */
+    onVote?: (id: string, direction: 'up' | 'down') => void;
+    /**
+     * Called when the user wants to report an issue with this workflow. The
+     * workflow name is passed so the consumer can pre-fill the support form
+     * with it as context (as Nick asked). Pass this callback to render the
+     * support affordance in the placement set by `supportPlacement`.
+     */
+    onReportIssue?: (id: string, workflowName: string) => void;
+    /** Where to render the support affordance. Only used if `onReportIssue` is set. */
+    supportPlacement?: SupportPlacement;
+    /** Disabled state (greyed out, not interactive) */
+    disabled?: boolean;
     /** Custom className */
     className?: string;
 }
-/**
- * WorkflowStatusBadge component for showing workflow execution status
- *
- * Features:
- * - Color-coded status badges (gray/blue/green/red/orange)
- * - Status icons with optional animations
- * - Size options (sm/md/lg)
- * - Optional status labels
- * - Spinning animation for running state
- * - Pulse animation for pending state
- */
-declare const WorkflowStatusBadge: React__default.FC<WorkflowStatusBadgeProps>;
+declare const WorkflowDiscoveryCard: React__default.FC<WorkflowDiscoveryCardProps>;
 
-export { WorkflowCard, type WorkflowCardProps, WorkflowErrorAlert, type WorkflowErrorAlertProps, type WorkflowIntegration, WorkflowProgressBar, type WorkflowProgressBarProps, WorkflowResultPanel, type WorkflowResultPanelProps, WorkflowStatusBadge, type WorkflowStatusBadgeProps };
+export { type CustomIndicator, type PaidIntegrationInfo, type PopularityInfo, type ProvenanceSource, type SetupRequirement, type SetupRequirementType, type SupportPlacement, type VotesInfo, type VotesPlacement, WorkflowDiscoveryCard, type WorkflowDiscoveryCardProps, type WorkflowDiscoveryIntegration, type WorkflowReadiness };