@startsimpli/ui 0.4.22 → 0.4.23

package/src/components/workflows/WorkflowSettingsCard.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useState } from 'react';
+import { Pencil, Save, X, Settings2 } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../ui/card';
+
+export interface WorkflowSettingsCardProps {
+  /** Workflow identifier — passed through to {@link onSave} so the consumer can persist. */
+  workflowId: string;
+  /** Current workflow-level settings (arbitrary key/value map). */
+  settings: Record<string, unknown>;
+  /**
+   * Persist edited settings. Supplied by the consumer (no API coupling here).
+   * Rejecting the promise surfaces its message inline. When omitted the card
+   * is read-only (the Edit affordance is hidden).
+   */
+  onSave?: (settings: Record<string, unknown>) => Promise<void>;
+}
+
+/** Well-known settings with labels and descriptions */
+const KNOWN_FIELDS: {
+  key: string;
+  label: string;
+  hint: string;
+  type: 'number' | 'text';
+}[] = [
+  { key: 'timeout', label: 'Timeout', hint: 'seconds', type: 'number' },
+  { key: 'maxRetries', label: 'Max Retries', hint: 'attempts', type: 'number' },
+];
+
+export function WorkflowSettingsCard({
+  workflowId: _workflowId,
+  settings,
+  onSave,
+}: WorkflowSettingsCardProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState<Record<string, unknown>>({ ...settings });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const knownKeys = new Set(KNOWN_FIELDS.map((f) => f.key));
+  const unknownKeys = Object.keys(settings).filter((k) => !knownKeys.has(k));
+
+  function handleEdit() {
+    setDraft({ ...settings });
+    setError(null);
+    setEditing(true);
+  }
+
+  function handleCancel() {
+    setDraft({ ...settings });
+    setError(null);
+    setEditing(false);
+  }
+
+  async function handleSave() {
+    if (!onSave) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(draft);
+      setEditing(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to save settings'
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function setField(key: string, value: unknown) {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const isEmpty = Object.keys(settings).length === 0;
+  const canEdit = !!onSave;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <Settings2 className="h-5 w-5" />
+            Settings
+          </CardTitle>
+          <CardDescription>Workflow-level configuration</CardDescription>
+        </div>
+        {!isEmpty &&
+          canEdit &&
+          (editing ? (
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCancel}
+                disabled={saving}
+                className="gap-1.5"
+              >
+                <X className="h-3.5 w-3.5" />
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={saving}
+                className="gap-1.5"
+              >
+                <Save className="h-3.5 w-3.5" />
+                {saving ? 'Saving…' : 'Save'}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleEdit}
+              className="gap-1.5"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+              Edit
+            </Button>
+          ))}
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {isEmpty ? (
+          <p className="text-sm text-muted-foreground">
+            No settings configured.
+          </p>
+        ) : (
+          <>
+            {/* Known fields */}
+            {KNOWN_FIELDS.filter((f) => f.key in settings).map((field) => (
+              <div key={field.key} className="space-y-1.5">
+                <Label className="text-sm font-medium">{field.label}</Label>
+                {editing ? (
+                  <div className="flex items-center gap-2">
+                    <Input
+                      type={field.type}
+                      value={(draft[field.key] as string | number) ?? ''}
+                      onChange={(e) =>
+                        setField(
+                          field.key,
+                          field.type === 'number'
+                            ? Number(e.target.value)
+                            : e.target.value
+                        )
+                      }
+                      className="max-w-[160px]"
+                    />
+                    <span className="text-sm text-muted-foreground">
+                      {field.hint}
+                    </span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono bg-muted px-2.5 py-1 rounded">
+                      {String(settings[field.key])}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {field.hint}
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {/* Unknown / arbitrary keys */}
+            {unknownKeys.map((key) => (
+              <div key={key} className="space-y-1.5">
+                <Label className="text-sm font-medium font-mono">{key}</Label>
+                {editing ? (
+                  <Input
+                    value={
+                      typeof draft[key] === 'object'
+                        ? JSON.stringify(draft[key])
+                        : String(draft[key] ?? '')
+                    }
+                    onChange={(e) => setField(key, e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                ) : (
+                  <span className="text-sm font-mono bg-muted px-2.5 py-1 rounded block w-fit">
+                    {typeof settings[key] === 'object'
+                      ? JSON.stringify(settings[key])
+                      : String(settings[key])}
+                  </span>
+                )}
+              </div>
+            ))}
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/workflows/WorkflowStatsOverview.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { Activity, CheckCircle, Clock, XCircle } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { Skeleton } from '../ui/skeleton';
+import { cn } from '../../lib/utils';
+
+/**
+ * Minimal, in-package shape of the workflow execution stats payload. Mirrors
+ * the subset of the backend stats record this overview actually reads — kept
+ * local so the component carries no app/Redux coupling.
+ */
+export interface WorkflowStats {
+  totals: {
+    total: number;
+    completed: number;
+    failed: number;
+  };
+  rates: {
+    successRate: number;
+    failureRate: number;
+  };
+  duration: {
+    avgSeconds: number | null;
+    minSeconds: number | null;
+    maxSeconds: number | null;
+  };
+}
+
+export interface WorkflowStatsOverviewProps {
+  /** Execution stats to render. When undefined, cards show a skeleton/empty value. */
+  stats?: WorkflowStats | null;
+  /** Whether stats are currently loading (drives the per-card skeleton). */
+  isLoading?: boolean;
+  /**
+   * Optional refresh callback. When provided, changing the period selector
+   * invokes it with the selected period so the consumer can refetch.
+   */
+  onRefresh?: (period: string) => Promise<void>;
+}
+
+const PERIOD_OPTIONS = [
+  { label: '7d', value: '7d' },
+  { label: '30d', value: '30d' },
+  { label: '90d', value: '90d' },
+] as const;
+
+function formatDuration(seconds: number | null | undefined): string {
+  if (seconds === null || seconds === undefined || seconds === 0) return '0s';
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.round(seconds % 60);
+  if (remainingSeconds === 0) return `${minutes}m`;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+/**
+ * Inline metric card — substitute for the app's `MetricsCard` primitive,
+ * which is not part of @startsimpli/ui. Renders a titled value with an icon,
+ * optional description, and a loading skeleton.
+ */
+function MetricCard({
+  title,
+  value,
+  icon,
+  description,
+  loading,
+}: {
+  title: string;
+  value: ReactNode;
+  icon: ReactNode;
+  description?: ReactNode;
+  loading?: boolean;
+}) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-muted-foreground">
+            {title}
+          </span>
+          <span className="text-muted-foreground">{icon}</span>
+        </div>
+        {loading ? (
+          <Skeleton className="mt-2 h-7 w-20" />
+        ) : (
+          <div className="mt-2 text-2xl font-bold">{value ?? '—'}</div>
+        )}
+        {description && !loading && (
+          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function WorkflowStatsOverview({
+  stats,
+  isLoading = false,
+  onRefresh,
+}: WorkflowStatsOverviewProps) {
+  const [period, setPeriod] = useState('30d');
+
+  const handlePeriodChange = (value: string) => {
+    setPeriod(value);
+    void onRefresh?.(value);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Execution Metrics
+        </h3>
+        <div className="flex items-center gap-1 rounded-lg border bg-muted/50 p-0.5">
+          {PERIOD_OPTIONS.map((opt) => (
+            <Button
+              key={opt.value}
+              variant="ghost"
+              size="sm"
+              className={cn(
+                'h-7 px-3 text-xs font-medium',
+                period === opt.value
+                  ? 'bg-background shadow-sm text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => handlePeriodChange(opt.value)}
+            >
+              {opt.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <MetricCard
+          title="Total Runs"
+          value={stats?.totals.total ?? null}
+          icon={<Activity className="h-4 w-4" />}
+          description={`Last ${period}`}
+          loading={isLoading}
+        />
+        <MetricCard
+          title="Success Rate"
+          value={stats ? `${stats.rates.successRate}%` : null}
+          icon={<CheckCircle className="h-4 w-4" />}
+          description={`${stats?.totals.completed ?? 0} completed`}
+          loading={isLoading}
+        />
+        <MetricCard
+          title="Avg Duration"
+          value={stats ? formatDuration(stats.duration.avgSeconds) : null}
+          icon={<Clock className="h-4 w-4" />}
+          description={
+            stats
+              ? `${formatDuration(stats.duration.minSeconds)} - ${formatDuration(stats.duration.maxSeconds)}`
+              : undefined
+          }
+          loading={isLoading}
+        />
+        <MetricCard
+          title="Failed Runs"
+          value={stats?.totals.failed ?? null}
+          icon={<XCircle className="h-4 w-4" />}
+          description={
+            stats ? `${stats.rates.failureRate}% failure rate` : undefined
+          }
+          loading={isLoading}
+        />
+      </div>
+    </div>
+  );
+}