orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/workflow-execution-sidebar.tsx

@@ -0,0 +1,221 @@
+import { Button } from "@/design-system/ui/button";
+import { Badge } from "@/design-system/ui/badge";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/design-system/ui/pagination";
+import { Clock, Filter, MessageSquare, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  formatDuration,
+  formatExecutionDate,
+  getStatusBadgeClass,
+} from "./workflow-execution-history.utils";
+import type { WorkflowExecution } from "./workflow-execution-history.types";
+
+interface WorkflowExecutionSidebarProps {
+  totalExecutions: number;
+  currentPageExecutions: WorkflowExecution[];
+  selectedExecutionId?: string | null;
+  page: number;
+  pageCount: number;
+  pageSize: number;
+  pageSizeOptions: number[];
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  startOffset: number;
+  endOffset: number;
+  onSelectExecution: (execution: WorkflowExecution) => void;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+  onPageSizeChange: (size: number) => void;
+  onRefresh?: () => void;
+  onViewDetails?: (execution: WorkflowExecution) => void;
+}
+
+const WorkflowExecutionSidebar = ({
+  totalExecutions,
+  currentPageExecutions,
+  selectedExecutionId,
+  page,
+  pageCount,
+  pageSize,
+  pageSizeOptions,
+  isFirstPage,
+  isLastPage,
+  startOffset,
+  endOffset,
+  onSelectExecution,
+  onPreviousPage,
+  onNextPage,
+  onPageSizeChange,
+  onRefresh,
+  onViewDetails,
+}: WorkflowExecutionSidebarProps) => (
+  <div className="flex h-full flex-col">
+    <div className="space-y-2 border-b border-border p-2">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold">Executions</h2>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={onRefresh}
+            title="Refresh"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline" size="icon" title="Filter">
+            <Filter className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>
+          {totalExecutions === 1
+            ? "1 execution"
+            : `${totalExecutions} executions`}
+        </span>
+        <div className="flex items-center gap-2">
+          <span>Rows</span>
+          <Select
+            value={String(pageSize)}
+            onValueChange={(value) => onPageSizeChange(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[80px]">
+              <SelectValue aria-label="Rows per page" />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((option) => (
+                <SelectItem key={option} value={String(option)}>
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+    <ScrollArea className="flex-1">
+      <div className="p-2">
+        {totalExecutions === 0 ? (
+          <div className="py-8 text-center text-muted-foreground">
+            No executions found
+          </div>
+        ) : (
+          currentPageExecutions.map((execution) => (
+            <div
+              key={execution.id}
+              className={cn(
+                "mb-2 cursor-pointer rounded-lg border p-4 transition-colors",
+                selectedExecutionId === execution.id
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50",
+              )}
+              onClick={() => onSelectExecution(execution)}
+            >
+              <div className="mb-2 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Badge className={cn(getStatusBadgeClass(execution.status))}>
+                    {execution.status.charAt(0).toUpperCase() +
+                      execution.status.slice(1)}
+                  </Badge>
+                  <span className="font-medium">Run #{execution.runId}</span>
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  {formatExecutionDate(execution.startTime)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    <Clock className="h-4 w-4 text-muted-foreground" />
+                    <span>{formatDuration(execution.duration)}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                    <span>
+                      {execution.issues}{" "}
+                      {execution.issues === 1 ? "issue" : "issues"}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onViewDetails?.(execution);
+                    }}
+                  >
+                    View Details
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </ScrollArea>
+    <div className="flex flex-col gap-2 border-t border-border p-2 text-sm md:flex-row md:items-center md:justify-between">
+      <span className="text-xs text-muted-foreground md:text-sm">
+        {totalExecutions === 0
+          ? "No executions to display"
+          : `Showing ${startOffset + 1}-${endOffset} of ${totalExecutions}`}
+      </span>
+      <Pagination className="mx-0 justify-center md:justify-end">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                onPreviousPage();
+              }}
+              className={cn(isFirstPage && "pointer-events-none opacity-50")}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink
+              href="#"
+              isActive
+              onClick={(event) => event.preventDefault()}
+              className="px-3"
+            >
+              {`Page ${pageCount === 0 ? 0 : page + 1} of ${Math.max(
+                pageCount,
+                1,
+              )}`}
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                onNextPage();
+              }}
+              className={cn(isLastPage && "pointer-events-none opacity-50")}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  </div>
+);
+
+export default WorkflowExecutionSidebar;

package/src/features/workflow/components/panels/workflow-governance-panel/subworkflow-list-card.tsx

@@ -0,0 +1,147 @@
+import { Plus, Puzzle, Trash2, CalendarClock } from "lucide-react";
+
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+
+import type { SubworkflowTemplate } from "./types";
+
+interface SubworkflowListCardProps {
+  subworkflows: SubworkflowTemplate[];
+  onCreateSubworkflow: () => void;
+  onInsertSubworkflow: (subworkflow: SubworkflowTemplate) => void;
+  onDeleteSubworkflow: (id: string) => void;
+}
+
+const STATUS_LABEL: Record<SubworkflowTemplate["status"], string> = {
+  stable: "Stable",
+  beta: "Beta",
+  deprecated: "Deprecated",
+};
+
+function renderSubworkflowStatus(status: SubworkflowTemplate["status"]) {
+  if (status === "stable") {
+    return <Badge variant="secondary">{STATUS_LABEL[status]}</Badge>;
+  }
+
+  if (status === "deprecated") {
+    return (
+      <Badge
+        variant="destructive"
+        className="bg-destructive/10 text-destructive"
+      >
+        {STATUS_LABEL[status]}
+      </Badge>
+    );
+  }
+
+  return <Badge variant="outline">{STATUS_LABEL[status]}</Badge>;
+}
+
+export function SubworkflowListCard({
+  subworkflows,
+  onCreateSubworkflow,
+  onInsertSubworkflow,
+  onDeleteSubworkflow,
+}: SubworkflowListCardProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+        <div>
+          <CardTitle>Reusable Sub-workflows</CardTitle>
+          <CardDescription>
+            Curate reusable workflow templates to accelerate delivery across
+            teams.
+          </CardDescription>
+        </div>
+        <Button onClick={onCreateSubworkflow} className="mt-2 md:mt-0">
+          <Plus className="mr-2 h-4 w-4" />
+          New sub-workflow
+        </Button>
+      </CardHeader>
+      <CardContent>
+        {subworkflows.length === 0 ? (
+          <div className="rounded-lg border border-dashed border-muted-foreground/50 p-10 text-center text-sm text-muted-foreground">
+            No reusable sub-workflows yet. Create your first template to share
+            best practices with your team.
+          </div>
+        ) : (
+          <div className="grid gap-4 lg:grid-cols-2">
+            {subworkflows.map((subworkflow) => (
+              <div
+                key={subworkflow.id}
+                className="flex h-full flex-col justify-between rounded-lg border border-border bg-muted/30 p-5"
+              >
+                <div className="space-y-4">
+                  <div className="flex flex-wrap items-start justify-between gap-3">
+                    <div>
+                      <h3 className="text-base font-semibold leading-tight">
+                        {subworkflow.name}
+                      </h3>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {subworkflow.description}
+                      </p>
+                    </div>
+                    {renderSubworkflowStatus(subworkflow.status)}
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    {subworkflow.tags.map((tag) => (
+                      <Badge key={`${subworkflow.id}-${tag}`} variant="outline">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="mt-6 space-y-3 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-2">
+                    <Puzzle className="h-4 w-4" />
+                    {subworkflow.usageCount}{" "}
+                    {subworkflow.usageCount === 1 ? "workflow" : "workflows"}{" "}
+                    rely on this template
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <CalendarClock className="h-4 w-4" />
+                    Updated {new Date(subworkflow.lastUpdated).toLocaleString()}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="secondary" className="uppercase">
+                      v{subworkflow.version}
+                    </Badge>
+                    Versioned for consistency
+                  </div>
+                </div>
+
+                <div className="mt-6 flex flex-wrap justify-end gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => onInsertSubworkflow(subworkflow)}
+                  >
+                    Insert into canvas
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="text-destructive hover:text-destructive"
+                    onClick={() => onDeleteSubworkflow(subworkflow.id)}
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/workflow/components/panels/workflow-governance-panel/types.ts

@@ -0,0 +1,26 @@
+import type { ValidationError } from "../canvas/connection-validator";
+
+export interface SubworkflowTemplate {
+  id: string;
+  name: string;
+  description: string;
+  tags: string[];
+  version: string;
+  status: "stable" | "beta" | "deprecated";
+  usageCount: number;
+  lastUpdated: string;
+}
+
+export interface WorkflowGovernancePanelProps {
+  subworkflows: SubworkflowTemplate[];
+  onCreateSubworkflow: () => void;
+  onInsertSubworkflow: (subworkflow: SubworkflowTemplate) => void;
+  onDeleteSubworkflow: (id: string) => void;
+  validationErrors: ValidationError[];
+  onRunValidation: () => void;
+  onDismissValidation: (id: string) => void;
+  onFixValidation: (error: ValidationError) => void;
+  isValidating: boolean;
+  lastValidationRun?: string | null;
+  className?: string;
+}

package/src/features/workflow/components/panels/workflow-governance-panel/validation-section.tsx

@@ -0,0 +1,126 @@
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { AlertTriangle, CheckCircle2, Loader2, RefreshCcw } from "lucide-react";
+
+import type { WorkflowGovernancePanelProps } from "./types";
+
+type ValidationSectionProps = Pick<
+  WorkflowGovernancePanelProps,
+  | "validationErrors"
+  | "isValidating"
+  | "onRunValidation"
+  | "onDismissValidation"
+  | "onFixValidation"
+  | "lastValidationRun"
+>;
+
+export function ValidationSection({
+  validationErrors,
+  isValidating,
+  onRunValidation,
+  onDismissValidation,
+  onFixValidation,
+  lastValidationRun,
+}: ValidationSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+        <div>
+          <CardTitle>Publish-time validation</CardTitle>
+          <CardDescription>
+            Run automated checks to confirm your workflow is ready for
+            production deployment.
+          </CardDescription>
+        </div>
+        <Button
+          onClick={onRunValidation}
+          disabled={isValidating}
+          variant="secondary"
+        >
+          {isValidating ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Validating...
+            </>
+          ) : (
+            <>
+              <RefreshCcw className="mr-2 h-4 w-4" />
+              Run validation
+            </>
+          )}
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {lastValidationRun && (
+          <p className="text-xs text-muted-foreground">
+            Last run {new Date(lastValidationRun).toLocaleString()}
+          </p>
+        )}
+
+        {validationErrors.length === 0 ? (
+          <Alert className="border-green-500/50 bg-green-500/5 text-green-900 dark:border-green-500/40 dark:bg-green-500/10 dark:text-green-200">
+            <CheckCircle2 className="h-4 w-4" />
+            <AlertTitle>Workflow is ready for publish</AlertTitle>
+            <AlertDescription>
+              All automated checks have passed. You can publish with confidence.
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <div className="space-y-3">
+            {validationErrors.map((error) => (
+              <Alert key={error.id} variant="destructive" className="pr-3">
+                <AlertTriangle className="h-4 w-4" />
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div>
+                    <AlertTitle className="capitalize">
+                      {error.type.replace("_", " ")}
+                    </AlertTitle>
+                    <AlertDescription className="mt-1 text-sm">
+                      {error.message}
+                      {error.type === "connection" &&
+                        error.sourceId &&
+                        error.targetId && (
+                          <span className="mt-1 block text-xs opacity-80">
+                            {error.sourceId} → {error.targetId}
+                          </span>
+                        )}
+                      {error.nodeName && (
+                        <span className="mt-1 block text-xs opacity-80">
+                          Node: {error.nodeName}
+                        </span>
+                      )}
+                    </AlertDescription>
+                  </div>
+                  <div className="flex flex-shrink-0 flex-wrap justify-end gap-2">
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => onFixValidation(error)}
+                    >
+                      Review
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => onDismissValidation(error.id)}
+                    >
+                      Dismiss
+                    </Button>
+                  </div>
+                </div>
+              </Alert>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/workflow/components/panels/workflow-governance-panel.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+
+import { SubworkflowListCard } from "./workflow-governance-panel/subworkflow-list-card";
+import { ValidationSection } from "./workflow-governance-panel/validation-section";
+import type { WorkflowGovernancePanelProps } from "./workflow-governance-panel/types";
+
+export default function WorkflowGovernancePanel({
+  subworkflows,
+  onCreateSubworkflow,
+  onInsertSubworkflow,
+  onDeleteSubworkflow,
+  validationErrors,
+  onRunValidation,
+  onDismissValidation,
+  onFixValidation,
+  isValidating,
+  lastValidationRun,
+  className,
+}: WorkflowGovernancePanelProps) {
+  return (
+    <div className={cn("space-y-6", className)}>
+      <SubworkflowListCard
+        subworkflows={subworkflows}
+        onCreateSubworkflow={onCreateSubworkflow}
+        onInsertSubworkflow={onInsertSubworkflow}
+        onDeleteSubworkflow={onDeleteSubworkflow}
+      />
+      <ValidationSection
+        validationErrors={validationErrors}
+        isValidating={isValidating}
+        onRunValidation={onRunValidation}
+        onDismissValidation={onDismissValidation}
+        onFixValidation={onFixValidation}
+        lastValidationRun={lastValidationRun}
+      />
+    </div>
+  );
+}
+
+export type {
+  SubworkflowTemplate,
+  WorkflowGovernancePanelProps,
+} from "./workflow-governance-panel/types";

package/src/features/workflow/components/panels/workflow-history-filters.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Search } from "lucide-react";
+
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowHistoryFiltersProps {
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  compareVersionId: string | null;
+  onSelectCompareVersion: (value: string | null) => void;
+  versions: WorkflowVersionRecord[];
+  selectedVersionId: string | null;
+}
+
+export default function WorkflowHistoryFilters({
+  searchQuery,
+  onSearchChange,
+  compareVersionId,
+  onSelectCompareVersion,
+  versions,
+  selectedVersionId,
+}: WorkflowHistoryFiltersProps) {
+  return (
+    <div className="flex items-center gap-2 p-4 border-b border-border">
+      <div className="relative flex-1">
+        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+
+        <Input
+          placeholder="Search versions..."
+          className="pl-8"
+          value={searchQuery}
+          onChange={(event) => onSearchChange(event.target.value)}
+        />
+      </div>
+      <Select
+        value={compareVersionId ?? ""}
+        onValueChange={(value) => onSelectCompareVersion(value || null)}
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Compare with..." />
+        </SelectTrigger>
+        <SelectContent>
+          {versions
+            .filter((version) => version.id !== selectedVersionId)
+            .map((version) => (
+              <SelectItem key={version.id} value={version.id}>
+                {version.version}
+              </SelectItem>
+            ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-history-footer.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+
+interface WorkflowHistoryFooterProps {
+  totalVersions: number;
+}
+
+export default function WorkflowHistoryFooter({
+  totalVersions,
+}: WorkflowHistoryFooterProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-t border-border">
+      <div className="text-sm text-muted-foreground">
+        {totalVersions} versions
+      </div>
+      <div className="flex items-center gap-1">
+        <Button variant="outline" size="icon" className="h-8 w-8">
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" className="h-8 w-8">
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}