orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-gallery/workflow-gallery-tabs.tsx

@@ -0,0 +1,93 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import { Plus, Zap } from "lucide-react";
+import { type Workflow } from "@features/workflow/data/workflow-data";
+import { WorkflowCard } from "./workflow-card";
+import { type WorkflowGalleryTab } from "./types";
+
+interface WorkflowGalleryTabsProps {
+  selectedTab: WorkflowGalleryTab;
+  onSelectedTabChange: (value: WorkflowGalleryTab) => void;
+  sortedWorkflows: Workflow[];
+  isTemplateView: boolean;
+  searchQuery: string;
+  onCreateWorkflowRequest: () => void;
+  onOpenWorkflow: (workflowId: string) => void;
+  onUseTemplate: (workflowId: string) => void;
+  onDuplicateWorkflow: (workflowId: string) => void;
+  onExportWorkflow: (workflow: Workflow) => void;
+  onDeleteWorkflow: (workflowId: string, workflowName: string) => void;
+}
+
+export const WorkflowGalleryTabs = ({
+  selectedTab,
+  onSelectedTabChange,
+  sortedWorkflows,
+  isTemplateView,
+  searchQuery,
+  onCreateWorkflowRequest,
+  onOpenWorkflow,
+  onUseTemplate,
+  onDuplicateWorkflow,
+  onExportWorkflow,
+  onDeleteWorkflow,
+}: WorkflowGalleryTabsProps) => {
+  return (
+    <Tabs
+      value={selectedTab}
+      onValueChange={(value) =>
+        onSelectedTabChange(value as WorkflowGalleryTab)
+      }
+      className="px-4"
+    >
+      <div className="mb-6 flex items-center justify-between">
+        <TabsList>
+          <TabsTrigger value="all">All</TabsTrigger>
+          <TabsTrigger value="favorites">Favorites</TabsTrigger>
+          <TabsTrigger value="shared">Shared with me</TabsTrigger>
+          <TabsTrigger value="templates">Templates</TabsTrigger>
+        </TabsList>
+      </div>
+
+      <TabsContent value={selectedTab} className="mt-0">
+        {sortedWorkflows.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="mb-4 rounded-full bg-muted p-4">
+              <Zap className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <h3 className="mb-2 text-lg font-medium">No workflows found</h3>
+            <p className="mb-6 max-w-md text-muted-foreground">
+              {searchQuery
+                ? `No workflows match your search for "${searchQuery}"`
+                : "Get started by creating your first workflow"}
+            </p>
+            <Button onClick={onCreateWorkflowRequest}>
+              <Plus className="mr-2 h-4 w-4" />
+              Create Workflow
+            </Button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-3 pb-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+            {sortedWorkflows.map((workflow) => (
+              <WorkflowCard
+                key={workflow.id}
+                workflow={workflow}
+                isTemplate={isTemplateView}
+                onOpenWorkflow={onOpenWorkflow}
+                onUseTemplate={onUseTemplate}
+                onDuplicateWorkflow={onDuplicateWorkflow}
+                onExportWorkflow={onExportWorkflow}
+                onDeleteWorkflow={onDeleteWorkflow}
+              />
+            ))}
+          </div>
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+};

package/src/features/workflow/pages/workflow-gallery/workflow-thumbnail.tsx

@@ -0,0 +1,82 @@
+import { type Workflow } from "@features/workflow/data/workflow-data";
+
+const NODE_COLORS: Record<string, string> = {
+  trigger: "#f59e0b",
+  api: "#3b82f6",
+  function: "#8b5cf6",
+  data: "#10b981",
+  ai: "#6366f1",
+  python: "#f97316",
+};
+
+interface WorkflowThumbnailProps {
+  workflow: Workflow;
+}
+
+export const WorkflowThumbnail = ({ workflow }: WorkflowThumbnailProps) => {
+  return (
+    <div className="relative h-24 w-full overflow-hidden rounded-md bg-muted/30">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 200 100"
+        className="absolute inset-0"
+      >
+        {workflow.nodes.slice(0, 5).map((node, index) => {
+          const x = 30 + (index % 3) * 70;
+          const y = 30 + Math.floor(index / 3) * 40;
+          const color = NODE_COLORS[node.type] ?? "#99a1b3";
+
+          return (
+            <g key={node.id}>
+              <rect
+                x={x - 15}
+                y={y - 10}
+                width={30}
+                height={20}
+                rx={4}
+                fill={color}
+                fillOpacity={0.3}
+                stroke={color}
+                strokeWidth={1}
+              />
+            </g>
+          );
+        })}
+
+        {workflow.edges.slice(0, 4).map((edge) => {
+          const sourceIndex = workflow.nodes.findIndex(
+            (node) => node.id === edge.source,
+          );
+          const targetIndex = workflow.nodes.findIndex(
+            (node) => node.id === edge.target,
+          );
+
+          if (
+            sourceIndex < 0 ||
+            targetIndex < 0 ||
+            sourceIndex >= 5 ||
+            targetIndex >= 5
+          ) {
+            return null;
+          }
+
+          const sourceX = 30 + (sourceIndex % 3) * 70 + 15;
+          const sourceY = 30 + Math.floor(sourceIndex / 3) * 40;
+          const targetX = 30 + (targetIndex % 3) * 70 - 15;
+          const targetY = 30 + Math.floor(targetIndex / 3) * 40;
+
+          return (
+            <path
+              key={edge.id}
+              d={`M${sourceX},${sourceY} C${sourceX + 20},${sourceY} ${targetX - 20},${targetY} ${targetX},${targetY}`}
+              stroke="#99a1b3"
+              strokeWidth={1}
+              fill="none"
+            />
+          );
+        })}
+      </svg>
+    </div>
+  );
+};

package/src/features/workflow/pages/workflow-gallery.tsx

@@ -0,0 +1,100 @@
+import TopNavigation from "@features/shared/components/top-navigation";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import { WorkflowGalleryHeader } from "@/features/workflow/pages/workflow-gallery/workflow-gallery-header";
+import { WorkflowGalleryTabs } from "@/features/workflow/pages/workflow-gallery/workflow-gallery-tabs";
+import { useWorkflowGallery } from "@/features/workflow/pages/workflow-gallery/use-workflow-gallery";
+
+export default function WorkflowGallery() {
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onDeleteCredential,
+  } = useCredentialVault();
+
+  const {
+    searchQuery,
+    setSearchQuery,
+    sortBy,
+    setSortBy,
+    filters,
+    setFilters,
+    showFilterPopover,
+    setShowFilterPopover,
+    showNewFolderDialog,
+    setShowNewFolderDialog,
+    newFolderName,
+    setNewFolderName,
+    showNewWorkflowDialog,
+    setShowNewWorkflowDialog,
+    newWorkflowName,
+    setNewWorkflowName,
+    selectedTab,
+    setSelectedTab,
+    sortedWorkflows,
+    isTemplateView,
+    handleCreateFolder,
+    handleCreateWorkflow,
+    handleUseTemplate,
+    handleDuplicateWorkflow,
+    handleExportWorkflow,
+    handleDeleteWorkflow,
+    handleApplyFilters,
+    handleOpenWorkflow,
+  } = useWorkflowGallery();
+
+  return (
+    <div className="flex h-screen flex-col">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onDeleteCredential={onDeleteCredential}
+      />
+
+      <main className="flex-1 overflow-auto">
+        <div className="h-full">
+          <div className="flex h-[calc(100%-80px)] flex-col">
+            <div className="flex-1 overflow-auto">
+              <WorkflowGalleryHeader
+                searchQuery={searchQuery}
+                onSearchQueryChange={setSearchQuery}
+                sortBy={sortBy}
+                onSortChange={setSortBy}
+                filters={filters}
+                onFiltersChange={setFilters}
+                showFilterPopover={showFilterPopover}
+                onFilterPopoverChange={setShowFilterPopover}
+                showNewFolderDialog={showNewFolderDialog}
+                onNewFolderDialogChange={setShowNewFolderDialog}
+                newFolderName={newFolderName}
+                onFolderNameChange={setNewFolderName}
+                onCreateFolder={handleCreateFolder}
+                showNewWorkflowDialog={showNewWorkflowDialog}
+                onNewWorkflowDialogChange={setShowNewWorkflowDialog}
+                newWorkflowName={newWorkflowName}
+                onWorkflowNameChange={setNewWorkflowName}
+                onCreateWorkflow={handleCreateWorkflow}
+                onApplyFilters={handleApplyFilters}
+              />
+
+              <WorkflowGalleryTabs
+                selectedTab={selectedTab}
+                onSelectedTabChange={setSelectedTab}
+                sortedWorkflows={sortedWorkflows}
+                isTemplateView={isTemplateView}
+                searchQuery={searchQuery}
+                onCreateWorkflowRequest={() => setShowNewWorkflowDialog(true)}
+                onOpenWorkflow={handleOpenWorkflow}
+                onUseTemplate={handleUseTemplate}
+                onDuplicateWorkflow={handleDuplicateWorkflow}
+                onExportWorkflow={handleExportWorkflow}
+                onDeleteWorkflow={handleDeleteWorkflow}
+              />
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/src/features/workflow/types/credential-vault.ts

@@ -0,0 +1,36 @@
+export type CredentialVaultAccessLevel = "private" | "shared" | "public";
+
+export type CredentialVaultHealthStatus = "healthy" | "unhealthy" | "unknown";
+
+export interface Credential {
+  id: string;
+  name: string;
+  type?: string;
+  createdAt: string;
+  updatedAt: string;
+  owner?: string | null;
+  access: CredentialVaultAccessLevel;
+  secrets?: Record<string, string>;
+  status?: CredentialVaultHealthStatus;
+}
+
+export type CredentialInput = Omit<
+  Credential,
+  "id" | "createdAt" | "updatedAt" | "owner"
+> & {
+  owner?: string;
+};
+
+export interface CredentialVaultEntryResponse {
+  id: string;
+  name: string;
+  provider: string;
+  kind: "secret" | "oauth";
+  created_at: string;
+  updated_at: string;
+  last_rotated_at: string | null;
+  owner: string | null;
+  access: CredentialVaultAccessLevel;
+  status: CredentialVaultHealthStatus;
+  secret_preview?: string | null;
+}

package/src/hooks/use-color-scheme.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+
+export type ColorScheme = "light" | "dark";
+
+const getPreferredScheme = (): ColorScheme => {
+  if (typeof document !== "undefined") {
+    return document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+  }
+
+  if (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    return "dark";
+  }
+
+  return "light";
+};
+
+/**
+ * Subscribes to theme changes performed by the global preference handler and
+ * exposes the currently applied color scheme.
+ */
+export const useColorScheme = (): ColorScheme => {
+  const [scheme, setScheme] = useState<ColorScheme>(() => getPreferredScheme());
+
+  useEffect(() => {
+    if (
+      typeof MutationObserver === "undefined" ||
+      typeof document === "undefined"
+    ) {
+      return;
+    }
+
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setScheme(getPreferredScheme());
+    });
+    observer.observe(target, { attributes: true, attributeFilter: ["class"] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (event: MediaQueryListEvent) => {
+      setScheme(event.matches ? "dark" : "light");
+    };
+
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handler);
+    } else if (typeof media.addListener === "function") {
+      media.addListener(handler);
+    }
+
+    return () => {
+      if (typeof media.removeEventListener === "function") {
+        media.removeEventListener("change", handler);
+      } else if (typeof media.removeListener === "function") {
+        media.removeListener(handler);
+      }
+    };
+  }, []);
+
+  return scheme;
+};

package/src/hooks/use-credential-vault.ts

@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "@/hooks/use-toast";
+import { buildBackendHttpUrl, getBackendBaseUrl } from "@/lib/config";
+import type {
+  Credential,
+  CredentialInput,
+  CredentialVaultEntryResponse,
+} from "@features/workflow/types/credential-vault";
+
+interface UseCredentialVaultOptions {
+  actorName?: string;
+  workflowId?: string | null;
+}
+
+interface UseCredentialVaultResult {
+  credentials: Credential[];
+  isLoading: boolean;
+  onAddCredential: (credential: CredentialInput) => Promise<void>;
+  onDeleteCredential: (id: string) => Promise<void>;
+}
+
+const DEFAULT_ACTOR = "system";
+
+const mapEntryToCredential = (
+  entry: CredentialVaultEntryResponse,
+): Credential => ({
+  id: entry.id,
+  name: entry.name,
+  type: entry.provider ?? entry.kind,
+  createdAt: entry.created_at,
+  updatedAt: entry.updated_at,
+  owner: entry.owner,
+  access: entry.access,
+  secrets: entry.secret_preview ? { secret: entry.secret_preview } : undefined,
+  status: entry.status,
+});
+
+export function useCredentialVault(
+  options: UseCredentialVaultOptions = {},
+): UseCredentialVaultResult {
+  const { workflowId = null } = options;
+  const backendBaseUrl = useMemo(() => getBackendBaseUrl(), []);
+  const actorName = options.actorName?.trim() || DEFAULT_ACTOR;
+
+  const [credentials, setCredentials] = useState<Credential[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let isCancelled = false;
+
+    const fetchCredentials = async () => {
+      setIsLoading(true);
+      try {
+        const url = new URL(
+          buildBackendHttpUrl("/api/credentials", backendBaseUrl),
+        );
+        if (workflowId) {
+          url.searchParams.set("workflow_id", workflowId);
+        }
+
+        const response = await fetch(url.toString(), {
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to load credentials (status ${response.status})`,
+          );
+        }
+
+        const payload =
+          (await response.json()) as CredentialVaultEntryResponse[];
+
+        if (isCancelled) {
+          return;
+        }
+
+        setCredentials(payload.map(mapEntryToCredential));
+      } catch (error) {
+        if (controller.signal.aborted || isCancelled) {
+          return;
+        }
+
+        console.error("Failed to load credential vault", error);
+        toast({
+          title: "Unable to load credentials",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred while loading credentials.",
+          variant: "destructive",
+        });
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void fetchCredentials();
+
+    return () => {
+      isCancelled = true;
+      controller.abort();
+    };
+  }, [backendBaseUrl, workflowId]);
+
+  const onAddCredential = useCallback(
+    async (credential: CredentialInput) => {
+      const secret = credential.secrets?.apiKey?.trim();
+      if (!secret) {
+        const message = "API key is required to save a credential.";
+        toast({
+          title: "Missing credential secret",
+          description: message,
+          variant: "destructive",
+        });
+        throw new Error(message);
+      }
+
+      const response = await fetch(
+        buildBackendHttpUrl("/api/credentials", backendBaseUrl),
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: credential.name,
+            provider: credential.type ?? "custom",
+            secret,
+            actor: actorName,
+            access: credential.access,
+            workflow_id: workflowId,
+            scopes: [],
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        let detail = `Failed to save credential (status ${response.status})`;
+        try {
+          const payload = (await response.json()) as { detail?: unknown };
+          if (typeof payload?.detail === "string") {
+            detail = payload.detail;
+          } else if (
+            payload?.detail &&
+            typeof (payload.detail as { message?: unknown }).message ===
+              "string"
+          ) {
+            detail = (payload.detail as { message?: string }).message as string;
+          }
+        } catch (parseError) {
+          console.warn("Failed to parse credential creation error", parseError);
+        }
+
+        toast({
+          title: "Unable to save credential",
+          description: detail,
+          variant: "destructive",
+        });
+        throw new Error(detail);
+      }
+
+      const payload = (await response.json()) as CredentialVaultEntryResponse;
+      const credentialRecord: Credential = {
+        id: payload.id,
+        name: payload.name,
+        type: payload.provider ?? payload.kind,
+        createdAt: payload.created_at,
+        updatedAt: payload.updated_at,
+        owner: payload.owner,
+        access: payload.access,
+        secrets: credential.secrets,
+        status: payload.status,
+      };
+
+      setCredentials((previous) => {
+        const withoutDuplicate = previous.filter(
+          (existing) => existing.id !== credentialRecord.id,
+        );
+        return [...withoutDuplicate, credentialRecord];
+      });
+
+      toast({
+        title: "Credential added to vault",
+        description: `${credentialRecord.name} is now available for nodes that require secure access.`,
+      });
+    },
+    [actorName, backendBaseUrl, workflowId],
+  );
+
+  const onDeleteCredential = useCallback(
+    async (id: string) => {
+      const url = new URL(
+        buildBackendHttpUrl(`/api/credentials/${id}`, backendBaseUrl),
+      );
+      if (workflowId) {
+        url.searchParams.set("workflow_id", workflowId);
+      }
+
+      try {
+        const response = await fetch(url.toString(), {
+          method: "DELETE",
+        });
+
+        if (!response.ok && response.status !== 404) {
+          throw new Error(
+            `Failed to delete credential (status ${response.status})`,
+          );
+        }
+
+        setCredentials((previous) =>
+          previous.filter((credential) => credential.id !== id),
+        );
+        toast({
+          title: "Credential removed",
+          description:
+            "Nodes referencing this credential will require reconfiguration before publish.",
+        });
+      } catch (error) {
+        console.error("Failed to delete credential", error);
+        const message =
+          error instanceof Error ? error.message : "Credential removal failed.";
+        toast({
+          title: "Unable to delete credential",
+          description: message,
+          variant: "destructive",
+        });
+        return;
+      }
+    },
+    [backendBaseUrl, workflowId],
+  );
+
+  return {
+    credentials,
+    isLoading,
+    onAddCredential,
+    onDeleteCredential,
+  };
+}
+
+export default useCredentialVault;

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}