orcheo-studio 0.21.1

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

@@ -0,0 +1,327 @@
+import { useRef, useState } from "react";
+import type { KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
+import { MoreHorizontal, Send, Star, UserMinus, UserPlus } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/design-system/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { resolveAvatarUrl } from "@/assets/avatars";
+import { ConfirmDeleteWorkflowDialog } from "@features/workflow/components/dialogs/confirm-delete-workflow-dialog";
+import { getCandidateBadgeDefinition } from "@features/workflow/data/templates/candidate-badges";
+import { type Workflow } from "@features/workflow/data/workflow-data";
+import { getWorkflowRouteRef } from "@features/workflow/lib/workflow-storage-helpers";
+import { WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME } from "./workflow-card-size";
+
+const getWorkflowTemplateAvatar = (workflow: Workflow): string | undefined => {
+  const templateId = workflow.versions?.at(-1)?.templateId;
+  if (!templateId) {
+    return undefined;
+  }
+  return (
+    getCandidateBadgeDefinition(templateId)?.workflow.avatarEmoji ?? undefined
+  );
+};
+
+interface WorkflowCardProps {
+  workflow: Workflow;
+  isTemplate: boolean;
+  workspaceLabel: string;
+  onOpenWorkflow: (workflowId: string) => void;
+  onUseTemplate: (workflowId: string) => void;
+  onExportWorkflow: (workflow: Workflow) => void;
+  onDeleteWorkflow: (
+    workflowId: string,
+    workflowName: string,
+  ) => Promise<void> | void;
+}
+
+export const WorkflowCard = ({
+  workflow,
+  isTemplate,
+  workspaceLabel,
+  onOpenWorkflow,
+  onUseTemplate,
+  onExportWorkflow,
+  onDeleteWorkflow,
+}: WorkflowCardProps) => {
+  const workflowRouteRef = getWorkflowRouteRef(workflow);
+  const isClickable = !isTemplate;
+  const canDeleteWorkflow = !isTemplate;
+  const candidateBadge = isTemplate
+    ? getCandidateBadgeDefinition(workflow.id)
+    : undefined;
+  const headerLabel = isTemplate ? "Candidate" : workspaceLabel;
+  const workflowSlug = workflow.handle ?? workflow.id;
+  const avatarUrl = resolveAvatarUrl(
+    workflow.avatarEmoji ?? getWorkflowTemplateAvatar(workflow),
+    workflow.id,
+  );
+
+  const suppressCardOpenRef = useRef(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDeletePending, setIsDeletePending] = useState(false);
+
+  const suppressCardOpen = () => {
+    suppressCardOpenRef.current = true;
+    setTimeout(() => {
+      suppressCardOpenRef.current = false;
+    }, 0);
+  };
+
+  const handleCardOpen = (event: MouseEvent<HTMLDivElement>) => {
+    if (!isClickable) {
+      return;
+    }
+    if (isMenuOpen || suppressCardOpenRef.current) {
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    if (target.closest('[data-card-action="true"]')) {
+      return;
+    }
+
+    onOpenWorkflow(workflowRouteRef);
+  };
+
+  const handleCardKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!isClickable) {
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    if (target.closest('[data-card-action="true"]')) {
+      return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onOpenWorkflow(workflowRouteRef);
+    }
+  };
+
+  const stopPropagation = (event: SyntheticEvent) => {
+    event.stopPropagation();
+    suppressCardOpen();
+  };
+
+  const handleConfirmDelete = async () => {
+    setIsDeletePending(true);
+    try {
+      await onDeleteWorkflow(workflow.id, workflow.name);
+      setIsDeleteDialogOpen(false);
+    } finally {
+      setIsDeletePending(false);
+    }
+  };
+
+  return (
+    <>
+      <Card
+        className={cn(
+          "flex w-full flex-col overflow-hidden border-border/70 bg-card text-card-foreground shadow-[0_16px_48px_rgba(15,23,42,0.08)] transition-transform duration-200 hover:-translate-y-1 dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)] text-[20px] md:text-[14px]",
+          WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME,
+          isClickable && "cursor-pointer",
+        )}
+        data-testid="workflow-card"
+        onClick={handleCardOpen}
+        onKeyDown={handleCardKeyDown}
+        role={isClickable ? "button" : undefined}
+        tabIndex={isClickable ? 0 : undefined}
+      >
+        <CardHeader className="relative flex h-12 items-center justify-center overflow-hidden border-b border-border/70 bg-gradient-to-r from-slate-950 via-slate-900 to-slate-800 px-4 py-0 text-center text-slate-50 dark:border-border/60 dark:from-slate-100 dark:via-slate-50 dark:to-slate-200 dark:text-slate-950">
+          <div
+            className="absolute inset-0 opacity-25 dark:opacity-40"
+            aria-hidden="true"
+            style={{
+              backgroundImage:
+                "radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px)",
+              backgroundSize: "30px 18px",
+            }}
+          />
+
+          <div className="relative z-10 flex items-center gap-2">
+            <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70 dark:text-slate-700">
+              {headerLabel}
+            </span>
+          </div>
+
+          <DropdownMenu
+            open={isMenuOpen}
+            onOpenChange={(open) => {
+              setIsMenuOpen(open);
+              if (!open) {
+                suppressCardOpen();
+              }
+            }}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-2 top-2 z-10 h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white dark:text-slate-700 dark:hover:bg-slate-950/10 dark:hover:text-slate-950"
+                onClick={stopPropagation}
+                onPointerDown={stopPropagation}
+                aria-label="Workflow actions"
+                data-card-action="true"
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {isTemplate ? (
+                <DropdownMenuItem
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onExportWorkflow(workflow);
+                  }}
+                >
+                  <Send className="mr-2 h-4 w-4" />
+                  Transfer
+                </DropdownMenuItem>
+              ) : (
+                <>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onExportWorkflow(workflow);
+                    }}
+                  >
+                    <Send className="mr-2 h-4 w-4" />
+                    Transfer
+                  </DropdownMenuItem>
+                  {canDeleteWorkflow ? (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        className="text-red-600"
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          setIsDeleteDialogOpen(true);
+                        }}
+                      >
+                        <UserMinus className="mr-2 h-4 w-4" />
+                        Offboard
+                      </DropdownMenuItem>
+                    </>
+                  ) : null}
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardHeader>
+
+        <CardContent className="flex flex-1 min-h-0 flex-col items-center px-5 py-3 text-center">
+          <div className="relative flex w-full shrink-0 items-start justify-center">
+            <div className="absolute left-0 top-0 flex items-center gap-1 rounded-md border border-border/70 bg-muted/60 px-2 py-1 text-muted-foreground shadow-sm dark:bg-slate-950/20">
+              <span className="h-1.5 w-1.5 rounded-full bg-slate-800 shadow-[0_0_6px_rgba(15,23,42,0.32)] dark:bg-slate-200 dark:shadow-[0_0_6px_rgba(226,232,240,0.28)]" />
+              <span className="font-mono text-[9px] font-bold uppercase tracking-[0.1em] text-slate-700 dark:text-slate-300">
+                AI
+              </span>
+            </div>
+
+            <div className="flex h-[7em] w-[7em] items-center justify-center overflow-hidden rounded-full border-4 border-slate-900 bg-slate-100 shadow-[0_4px_16px_rgba(15,23,42,0.18)] dark:border-slate-100 dark:bg-slate-800 dark:shadow-[0_4px_16px_rgba(0,0,0,0.35)]">
+              <img
+                src={avatarUrl}
+                alt={workflow.name}
+                className="h-full w-full object-cover"
+                aria-hidden="true"
+              />
+            </div>
+
+            {!isTemplate ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-0 top-0 h-8 w-8"
+                aria-label="Star workflow"
+                data-card-action="true"
+                onClick={(event) => {
+                  stopPropagation(event);
+                  toast({
+                    title: "Starred workflows coming soon",
+                    description: `We'll remember ${workflow.name} as a starred workflow soon.`,
+                  });
+                }}
+                onPointerDown={stopPropagation}
+              >
+                <Star className="h-3 w-3" />
+              </Button>
+            ) : null}
+          </div>
+
+          <div className="mt-4 shrink-0 text-[1.5em] font-semibold tracking-[-0.025em] text-card-foreground">
+            {workflow.name}
+          </div>
+
+          <div className="mt-1 shrink-0 font-mono text-[10px] tracking-[0.04em] text-muted-foreground">
+            @{workflowSlug}
+          </div>
+
+          <div className="mt-3 flex min-h-0 w-full flex-1 flex-col items-center justify-start">
+            <div className="h-px w-8 rounded-full bg-border/80" />
+
+            {candidateBadge?.subtitle ? (
+              <div className="mt-1 shrink-0 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                {candidateBadge.subtitle}
+              </div>
+            ) : null}
+
+            <p className="mt-1 w-full flex-1 overflow-hidden text-[13px] leading-7 text-muted-foreground">
+              {workflow.description || "No description provided"}
+            </p>
+          </div>
+        </CardContent>
+
+        {isTemplate ? (
+          <CardFooter className="flex items-center justify-end gap-2 px-4 py-1.5">
+            <Button
+              size="sm"
+              className="h-8 px-3 text-xs"
+              data-card-action="true"
+              onClick={(event) => {
+                stopPropagation(event);
+                toast({
+                  title: "Onboarding agent…",
+                  description:
+                    "Setting up your new agent. This may take a few seconds.",
+                });
+                onUseTemplate(workflow.id);
+              }}
+              onPointerDown={stopPropagation}
+            >
+              <UserPlus className="mr-1 h-3 w-3" />
+              Onboard
+            </Button>
+          </CardFooter>
+        ) : null}
+      </Card>
+
+      {canDeleteWorkflow ? (
+        <ConfirmDeleteWorkflowDialog
+          open={isDeleteDialogOpen}
+          workflowName={workflow.name}
+          isPending={isDeletePending}
+          onOpenChange={setIsDeleteDialogOpen}
+          onConfirm={handleConfirmDelete}
+        />
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,173 @@
+import { ChangeEvent, useState } from "react";
+import { Input } from "@/design-system/ui/input";
+import { Button } from "@/design-system/ui/button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import { Loader2, Search, Upload, Zap } from "lucide-react";
+import { type Workflow } from "@features/workflow/data/workflow-data";
+import { UploadWorkflowDialog } from "@features/workflow/components/dialogs/upload-workflow-dialog";
+import { useUploadsAllowed } from "@/hooks/use-uploads-allowed";
+import { WorkflowCard } from "./workflow-card";
+import {
+  type WorkflowGalleryTab,
+  type WorkflowGalleryTabCounts,
+} from "./types";
+
+interface WorkflowGalleryTabsProps {
+  selectedTab: WorkflowGalleryTab;
+  onSelectedTabChange: (value: WorkflowGalleryTab) => void;
+  isLoading: boolean;
+  sortedWorkflows: Workflow[];
+  tabCounts: WorkflowGalleryTabCounts;
+  isTemplateView: boolean;
+  workspaceLabel: string;
+  searchQuery: string;
+  onSearchQueryChange: (value: string) => void;
+  onImportStarterPack: () => void;
+  onOpenWorkflow: (workflowId: string) => void;
+  onUseTemplate: (workflowId: string) => void;
+  onExportWorkflow: (workflow: Workflow) => void;
+  onDeleteWorkflow: (
+    workflowId: string,
+    workflowName: string,
+  ) => Promise<void> | void;
+}
+
+export const WorkflowGalleryTabs = ({
+  selectedTab,
+  onSelectedTabChange,
+  isLoading,
+  sortedWorkflows,
+  tabCounts,
+  isTemplateView,
+  workspaceLabel,
+  searchQuery,
+  onSearchQueryChange,
+  onImportStarterPack,
+  onOpenWorkflow,
+  onUseTemplate,
+  onExportWorkflow,
+  onDeleteWorkflow,
+}: WorkflowGalleryTabsProps) => {
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const uploadsAllowed = useUploadsAllowed();
+
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onSearchQueryChange(event.target.value);
+  };
+
+  return (
+    <Tabs
+      value={selectedTab}
+      onValueChange={(value) =>
+        onSelectedTabChange(value as WorkflowGalleryTab)
+      }
+      className="px-4 pt-3"
+    >
+      <div className="mb-3 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-4">
+          <TabsList className="flex h-auto flex-wrap justify-start gap-1">
+            <TabsTrigger value="all" className="gap-2">
+              <span>AI Colleagues</span>
+              <span className="text-xs text-muted-foreground">
+                {tabCounts.all}
+              </span>
+            </TabsTrigger>
+            <TabsTrigger value="pinned" className="gap-2">
+              <span>Starred</span>
+              <span className="text-xs text-muted-foreground">
+                {tabCounts.pinned}
+              </span>
+            </TabsTrigger>
+            <TabsTrigger value="templates" className="gap-2">
+              <span>Candidates</span>
+              <span className="text-xs text-muted-foreground">
+                {tabCounts.templates}
+              </span>
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="relative w-full md:w-[320px]">
+            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search colleagues..."
+              className="pl-10"
+              value={searchQuery}
+              onChange={handleSearchChange}
+            />
+          </div>
+        </div>
+        {uploadsAllowed === true && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsUploadOpen(true)}
+            >
+              <Upload className="mr-2 h-4 w-4" />
+              Upload
+            </Button>
+            <UploadWorkflowDialog
+              open={isUploadOpen}
+              onOpenChange={setIsUploadOpen}
+            />
+          </>
+        )}
+      </div>
+
+      <TabsContent value={selectedTab} className="mt-0">
+        {isLoading && !isTemplateView ? (
+          <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 text-center">
+            <div className="rounded-full bg-muted p-4">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+            <div>
+              <h3 className="text-lg font-medium">Loading colleagues</h3>
+              <p className="text-sm text-muted-foreground">
+                Pulling your workspace from storage.
+              </p>
+            </div>
+          </div>
+        ) : 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 colleagues found</h3>
+            <p className="mb-6 max-w-md text-muted-foreground">
+              {searchQuery
+                ? `No colleagues match your search for "${searchQuery}"`
+                : "Import starter colleagues or onboard candidates to get started."}
+            </p>
+            <div className="flex flex-col items-center gap-3">
+              {!isTemplateView ? (
+                <Button variant="outline" onClick={onImportStarterPack}>
+                  Import Starter Pack
+                </Button>
+              ) : null}
+            </div>
+          </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}
+                workspaceLabel={workspaceLabel}
+                onOpenWorkflow={onOpenWorkflow}
+                onUseTemplate={onUseTemplate}
+                onExportWorkflow={onExportWorkflow}
+                onDeleteWorkflow={onDeleteWorkflow}
+              />
+            ))}
+          </div>
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import TopNavigation from "@features/shared/components/top-navigation";
+import { getActiveWorkspace } from "@/lib/api";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import { usePageContext } from "@/hooks/use-page-context";
+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 { setPageContext } = usePageContext();
+  const [workspaceLabel, setWorkspaceLabel] = useState("AI Colleagues");
+  useEffect(() => {
+    setPageContext({ page: "gallery" });
+  }, [setPageContext]);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadWorkspaceLabel = async () => {
+      try {
+        const workspace = await getActiveWorkspace();
+        if (active && workspace.name.trim()) {
+          setWorkspaceLabel(workspace.name.trim());
+        }
+      } catch {
+        if (active) {
+          setWorkspaceLabel("AI Colleagues");
+        }
+      }
+    };
+
+    void loadWorkspaceLabel();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onUpdateCredential,
+    onDeleteCredential,
+    onRevealCredentialSecret,
+  } = useCredentialVault();
+
+  const {
+    searchQuery,
+    setSearchQuery,
+    selectedTab,
+    setSelectedTab,
+    isLoadingWorkflows,
+    sortedWorkflows,
+    tabCounts,
+    isTemplateView,
+    handleUseTemplate,
+    handleImportStarterPack,
+    handleExportWorkflow,
+    handleDeleteWorkflow,
+    handleOpenWorkflow,
+  } = useWorkflowGallery();
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onUpdateCredential={onUpdateCredential}
+        onDeleteCredential={onDeleteCredential}
+        onRevealCredentialSecret={onRevealCredentialSecret}
+      />
+
+      <main className="flex flex-1 min-h-0 flex-col overflow-hidden">
+        <div className="flex-1 overflow-auto">
+          <WorkflowGalleryTabs
+            selectedTab={selectedTab}
+            onSelectedTabChange={setSelectedTab}
+            isLoading={isLoadingWorkflows}
+            sortedWorkflows={sortedWorkflows}
+            tabCounts={tabCounts}
+            isTemplateView={isTemplateView}
+            workspaceLabel={workspaceLabel}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+            onImportStarterPack={handleImportStarterPack}
+            onOpenWorkflow={handleOpenWorkflow}
+            onUseTemplate={handleUseTemplate}
+            onExportWorkflow={handleExportWorkflow}
+            onDeleteWorkflow={handleDeleteWorkflow}
+          />
+        </div>
+      </main>
+    </div>
+  );
+}