@invect/ui 0.0.1

package/src/components/credentials/OAuth2ProviderSelector.tsx

@@ -0,0 +1,360 @@
+/**
+ * OAuth2 Provider Selector Component
+ *
+ * Shows available OAuth2 providers grouped by category with connect buttons.
+ */
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
+import {
+  ExternalLink,
+  FileText,
+  HardDrive,
+  Mail,
+  Calendar,
+  Github,
+  MessageSquare,
+  Cloud,
+  Table,
+  CheckSquare,
+  Bug,
+  Search,
+} from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { useOAuth2Providers } from '../../api/credentials.api';
+import { OAuth2ConnectButton } from './OAuth2ConnectButton';
+import type { OAuth2ProviderDefinition, Credential } from '../../api/types';
+import { InvectLoader } from '../shared/InvectLoader';
+
+// Icon mapping for providers
+const providerIcons: Record<string, React.ElementType> = {
+  FileText,
+  HardDrive,
+  Mail,
+  Calendar,
+  Github,
+  MessageSquare,
+  Cloud,
+  Table,
+  CheckSquare,
+  Bug,
+  Sheet: Table,
+};
+
+// Category labels and colors
+const categoryConfig: Record<string, { label: string; color: string }> = {
+  google: { label: 'Google', color: 'bg-info/15 text-info border-info/30' },
+  microsoft: { label: 'Microsoft', color: 'bg-info/15 text-info border-info/30' },
+  github: { label: 'GitHub', color: 'bg-muted text-muted-foreground border-border' },
+  slack: { label: 'Slack', color: 'bg-primary/15 text-primary border-primary/30' },
+  other: { label: 'Other', color: 'bg-warning/15 text-warning border-warning/30' },
+};
+
+interface OAuth2ProviderSelectorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called when a credential is successfully created */
+  onCredentialCreated?: (credential: Credential) => void;
+  /** Portal container for modals */
+  portalContainer?: HTMLElement | null;
+  /** Filter to only show specific providers by ID (e.g., ["google"]) */
+  filterProviders?: string[];
+  /** Override scopes for the OAuth flow (uses provider defaults if not set) */
+  scopes?: string[];
+}
+
+export function OAuth2ProviderSelector({
+  open,
+  onOpenChange,
+  onCredentialCreated,
+  portalContainer,
+  filterProviders,
+  scopes,
+}: OAuth2ProviderSelectorProps) {
+  const { data: providers, isLoading } = useOAuth2Providers();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState<OAuth2ProviderDefinition | null>(null);
+  const [clientId, setClientId] = useState('');
+  const [clientSecret, setClientSecret] = useState('');
+  const [credentialName, setCredentialName] = useState('');
+
+  // Filter providers by the filterProviders prop first, then by search
+  const availableProviders = useMemo(() => {
+    if (!providers) {
+      return [];
+    }
+    if (!filterProviders || filterProviders.length === 0) {
+      return providers;
+    }
+    return providers.filter((p) => filterProviders.includes(p.id));
+  }, [providers, filterProviders]);
+
+  // Further filter by search query
+  const filteredProviders = availableProviders.filter(
+    (p) =>
+      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      p.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  // If there's only one provider after filtering, auto-select it
+  useEffect(() => {
+    if (open && availableProviders.length === 1 && !selectedProvider) {
+      setSelectedProvider(availableProviders[0]);
+      setCredentialName(availableProviders[0].name);
+    }
+  }, [open, availableProviders, selectedProvider]);
+
+  // Group providers by category
+  const providersByCategory = filteredProviders?.reduce(
+    (acc, provider) => {
+      const category = provider.category;
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(provider);
+      return acc;
+    },
+    {} as Record<string, OAuth2ProviderDefinition[]>,
+  );
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedProvider(null);
+      setClientId('');
+      setClientSecret('');
+      setCredentialName('');
+      setSearchQuery('');
+    }
+  }, [open]);
+
+  const handleProviderSelect = (provider: OAuth2ProviderDefinition) => {
+    setSelectedProvider(provider);
+    setCredentialName(provider.name);
+  };
+
+  const handleBack = () => {
+    setSelectedProvider(null);
+    setClientId('');
+    setClientSecret('');
+    setCredentialName('');
+  };
+
+  const handleSuccess = (credential: Credential) => {
+    onCredentialCreated?.(credential);
+    onOpenChange(false);
+    // Reset state
+    setSelectedProvider(null);
+    setClientId('');
+    setClientSecret('');
+    setCredentialName('');
+  };
+
+  // Get redirect URI for OAuth callback
+  const redirectUri =
+    typeof window !== 'undefined' ? `${window.location.origin}/oauth/callback` : '';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        container={portalContainer}
+        className="sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col"
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {selectedProvider ? `Connect ${selectedProvider.name}` : 'Connect OAuth2 Provider'}
+          </DialogTitle>
+          <DialogDescription>
+            {selectedProvider
+              ? 'Enter your OAuth2 app credentials to connect'
+              : 'Select a service to connect with OAuth2'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <InvectLoader iconClassName="h-14" label="Loading providers..." />
+          </div>
+        ) : selectedProvider ? (
+          // Configuration form for selected provider
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+              {providerIcons[selectedProvider.icon || 'FileText'] &&
+                React.createElement(providerIcons[selectedProvider.icon || 'FileText'], {
+                  className: 'w-6 h-6',
+                })}
+              <div>
+                <p className="font-medium">{selectedProvider.name}</p>
+                <p className="text-xs text-muted-foreground">{selectedProvider.description}</p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="credentialName" className="text-xs">
+                  Credential Name
+                </Label>
+                <Input
+                  id="credentialName"
+                  value={credentialName}
+                  onChange={(e) => setCredentialName(e.target.value)}
+                  placeholder="My Google Docs"
+                  className="h-8 text-xs"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="clientId" className="text-xs">
+                  Client ID *
+                </Label>
+                <Input
+                  id="clientId"
+                  value={clientId}
+                  onChange={(e) => setClientId(e.target.value)}
+                  placeholder="Enter OAuth2 Client ID"
+                  className="h-8 text-xs"
+                  autoComplete="one-time-code"
+                  data-1p-ignore
+                  data-lpignore="true"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="clientSecret" className="text-xs">
+                  Client Secret *
+                </Label>
+                <Input
+                  id="clientSecret"
+                  type="text"
+                  style={{ WebkitTextSecurity: 'disc' }}
+                  value={clientSecret}
+                  onChange={(e) => setClientSecret(e.target.value)}
+                  placeholder="Enter OAuth2 Client Secret"
+                  className="h-8 text-xs"
+                  autoComplete="one-time-code"
+                  data-1p-ignore
+                  data-lpignore="true"
+                />
+              </div>
+
+              <div className="p-2 text-xs rounded-lg bg-muted/50">
+                <p className="font-medium mb-1">Redirect URI</p>
+                <code className="block p-1.5 rounded bg-background text-xs font-mono break-all">
+                  {redirectUri}
+                </code>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Add this URL to your OAuth app's allowed redirect URIs
+                </p>
+              </div>
+
+              {selectedProvider.docsUrl && (
+                <a
+                  href={selectedProvider.docsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 text-xs text-primary hover:underline"
+                >
+                  <ExternalLink className="w-3 h-3" />
+                  View setup documentation
+                </a>
+              )}
+            </div>
+
+            <div className="flex gap-2 pt-2">
+              <Button variant="outline" onClick={handleBack} className="flex-1 h-8 text-xs">
+                Back
+              </Button>
+              <OAuth2ConnectButton
+                provider={selectedProvider}
+                clientId={clientId}
+                clientSecret={clientSecret}
+                redirectUri={redirectUri}
+                scopes={scopes}
+                credentialName={credentialName}
+                onSuccess={handleSuccess}
+                disabled={!clientId || !clientSecret}
+                className="flex-1 h-8 text-xs"
+                variant="default"
+              />
+            </div>
+          </div>
+        ) : (
+          // Provider selection list
+          <div className="flex flex-col min-h-0 -mx-6">
+            {/* Search */}
+            <div className="px-6 pb-3">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-muted-foreground" />
+                <input
+                  type="text"
+                  placeholder="Search providers…"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-8 w-full rounded-lg border border-border bg-transparent pl-9 pr-3 text-xs outline-none placeholder:text-muted-foreground focus:border-primary/50"
+                />
+              </div>
+            </div>
+
+            {/* Provider list */}
+            <ScrollArea className="flex-1 px-6">
+              <div className="space-y-4 pb-4">
+                {providersByCategory &&
+                  Object.entries(providersByCategory).map(([category, categoryProviders]) => {
+                    const config = categoryConfig[category] || categoryConfig.other;
+                    return (
+                      <div key={category}>
+                        <h3 className="mb-2 text-xs font-medium text-muted-foreground">
+                          {config.label}
+                        </h3>
+                        <div className="space-y-2">
+                          {categoryProviders.map((provider) => {
+                            const Icon = providerIcons[provider.icon || 'FileText'] || FileText;
+                            return (
+                              <button
+                                key={provider.id}
+                                onClick={() => handleProviderSelect(provider)}
+                                className="flex items-center w-full gap-3 p-3 text-left transition-colors border rounded-lg hover:bg-muted/50"
+                              >
+                                <div
+                                  className={cn(
+                                    'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border',
+                                    config.color,
+                                  )}
+                                >
+                                  <Icon className="w-4 h-4" />
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-sm font-medium">{provider.name}</p>
+                                  <p className="text-xs truncate text-muted-foreground">
+                                    {provider.description}
+                                  </p>
+                                </div>
+                                <Badge variant="outline" className="text-xs shrink-0">
+                                  {provider.supportsRefresh ? 'Auto-refresh' : 'Manual'}
+                                </Badge>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  })}
+
+                {(!filteredProviders || filteredProviders.length === 0) && (
+                  <div className="py-8 text-center text-muted-foreground">
+                    <p className="text-sm">No providers found</p>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/credentials/credential-utils.ts

@@ -0,0 +1,99 @@
+import type { Credential, CredentialAuthType, CredentialType } from '../../api/types';
+
+// ── Auth type config ───────────────────────────────────────────────────
+
+export const AUTH_TYPE_CONFIG: Record<string, { label: string; color: string }> = {
+  bearer: {
+    label: 'Bearer',
+    color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  },
+  apiKey: {
+    label: 'API Key',
+    color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+  },
+  basic: {
+    label: 'Basic',
+    color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  },
+  oauth2: {
+    label: 'OAuth 2.0',
+    color: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300',
+  },
+  custom: { label: 'Custom', color: 'bg-muted text-muted-foreground' },
+  awsSigV4: {
+    label: 'AWS Sig V4',
+    color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  },
+  jwt: { label: 'JWT', color: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300' },
+  connectionString: {
+    label: 'Connection',
+    color: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
+  },
+};
+
+// ── Dates ──────────────────────────────────────────────────────────────
+
+export const formatDate = (dateString?: string) => {
+  if (!dateString) {
+    return 'Never';
+  }
+  const date = new Date(dateString);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) {
+    return 'Just now';
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  if (days < 30) {
+    return `${days}d ago`;
+  }
+  return date.toLocaleDateString();
+};
+
+export const formatFullDate = (dateString?: string) => {
+  if (!dateString) {
+    return 'Never';
+  }
+  return new Date(dateString).toLocaleString();
+};
+
+export function isTokenExpired(credential: Credential): boolean {
+  const expiresAt = credential.expiresAt || credential.config?.expiresAt;
+  if (!expiresAt) {
+    return false;
+  }
+  return new Date(expiresAt) < new Date();
+}
+
+// ── Edit form auth type helpers ────────────────────────────────────────
+
+const ALL_AUTH_TYPES: { value: CredentialAuthType; label: string }[] = [
+  { value: 'bearer', label: 'Bearer Token' },
+  { value: 'apiKey', label: 'API Key' },
+  { value: 'basic', label: 'Basic Auth' },
+  { value: 'oauth2', label: 'OAuth2' },
+  { value: 'custom', label: 'Custom Headers' },
+  { value: 'awsSigV4', label: 'AWS Signature V4' },
+  { value: 'jwt', label: 'JWT' },
+  { value: 'connectionString', label: 'Connection String' },
+];
+
+export function getAuthTypesForType(type: CredentialType) {
+  if (type === 'database') {
+    return ALL_AUTH_TYPES.filter((t) => ['basic', 'connectionString', 'oauth2'].includes(t.value));
+  }
+  if (type === 'llm') {
+    return ALL_AUTH_TYPES.filter((t) => ['apiKey', 'bearer'].includes(t.value));
+  }
+  return ALL_AUTH_TYPES.filter((t) => !['connectionString'].includes(t.value));
+}

package/src/components/credentials/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Credentials Components
+ *
+ * Export all credential-related components.
+ */
+
+export { CreateCredentialModal } from './CreateCredentialModal';
+export { EditCredentialModal } from './EditCredentialModal';
+export { OAuth2ConnectButton, OAuth2CallbackHandler } from './OAuth2ConnectButton';
+export { OAuth2ProviderSelector } from './OAuth2ProviderSelector';

package/src/components/dashboard/FailedRunsAlert.tsx

@@ -0,0 +1,67 @@
+import { Link } from 'react-router';
+import { AlertTriangle, XCircle, ArrowRight } from 'lucide-react';
+import { Button } from '~/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
+import { useListFlowRuns } from '~/api/executions.api';
+import { formatRelativeTime } from './status-helpers';
+
+export function FailedRunsAlert({ basePath }: { basePath: string }) {
+  const { data: failedResponse, isLoading } = useListFlowRuns(
+    undefined,
+    'FAILED',
+    1,
+    5,
+    'startedAt',
+    'desc',
+  );
+
+  const failedRuns = failedResponse?.data ?? [];
+
+  if (isLoading || failedRuns.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card className="border-red-200 dark:border-red-900 gap-0 py-0">
+      <CardHeader className="pb-2 pt-4">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4 text-red-500" />
+          <CardTitle className="text-sm">Attention Required</CardTitle>
+        </div>
+        <CardDescription className="text-xs">
+          Recent failed runs that may need investigation
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="space-y-2">
+          {failedRuns.map((run) => (
+            <Link
+              key={run.id}
+              to={`${basePath}/flow/${run.flowId}`}
+              className="flex items-center justify-between rounded-md border border-red-100 dark:border-red-900/50 bg-red-50/50 dark:bg-red-950/20 p-2.5 text-sm hover:bg-red-100/50 dark:hover:bg-red-950/40 transition-colors"
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <XCircle className="h-3.5 w-3.5 text-red-500 shrink-0" />
+                <span className="truncate font-medium text-xs">{run.flowId.slice(0, 24)}</span>
+                {run.error && (
+                  <span className="text-xs text-red-600/70 dark:text-red-400/70 truncate max-w-[200px]">
+                    {run.error}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground shrink-0 ml-2">
+                {formatRelativeTime(run.startedAt)}
+              </span>
+            </Link>
+          ))}
+        </div>
+        <Button variant="ghost" size="sm" asChild className="mt-2 w-full text-xs">
+          <Link to={`${basePath}/flow-runs`}>
+            View all flow runs
+            <ArrowRight className="ml-1 h-3 w-3" />
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/FlowCard.tsx

@@ -0,0 +1,64 @@
+import { Link, useNavigate } from 'react-router';
+import { Edit, History } from 'lucide-react';
+import { Button } from '~/components/ui/button';
+import { useLatestFlowRun } from '~/api/executions.api';
+import { StatusBadge, formatRelativeTime } from './status-helpers';
+import type { Flow } from '@invect/core/types';
+
+interface FlowCardProps {
+  flow: Flow;
+  basePath: string;
+}
+
+export function FlowCard({ flow, basePath }: FlowCardProps) {
+  const { data: latestRun } = useLatestFlowRun(flow.id);
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className="flex items-center justify-between px-4 py-3 transition-all border rounded-lg cursor-pointer group bg-card hover:shadow-sm hover:border-primary/20"
+      onClick={() => navigate(`${basePath}/flow/${flow.id}`)}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2.5">
+          <h3 className="text-sm font-medium truncate">{flow.name}</h3>
+          {latestRun && <StatusBadge status={latestRun.status} />}
+        </div>
+        <div className="mt-1.5 flex items-center gap-3 text-xs text-muted-foreground">
+          {flow.description && <span className="truncate max-w-75">{flow.description}</span>}
+          {latestRun ? (
+            <span className="shrink-0">Last run {formatRelativeTime(latestRun.startedAt)}</span>
+          ) : (
+            <span className="italic">Never run</span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 ml-4 transition-opacity opacity-0 group-hover:opacity-100">
+        <Button
+          size="sm"
+          variant="outline"
+          className="text-xs h-7"
+          onClick={(e) => {
+            e.stopPropagation();
+            navigate(`${basePath}/flow/${flow.id}`);
+          }}
+        >
+          <Edit className="w-3 h-3 mr-1" />
+          Edit
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className="text-xs h-7"
+          asChild
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Link to={`${basePath}/flow/${flow.id}/runs`}>
+            <History className="w-3 h-3 mr-1" />
+            Runs
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}