orcheo-studio 0.21.1

package/src/features/shared/components/workspace-bootstrap-gate.tsx

@@ -0,0 +1,235 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { toast } from "@/hooks/use-toast";
+import {
+  createWorkspace,
+  getMyWorkspaces,
+  type WorkspaceMembershipSummary,
+} from "@/lib/api";
+import { slugifyWorkspace } from "@/lib/workspace-slug";
+import {
+  clearSelectedWorkspaceSlug,
+  getSelectedWorkspaceSlug,
+  setSelectedWorkspaceSlug,
+} from "@/lib/workspace-session";
+import { getWorkspaceGalleryPath } from "@/lib/workspace-routing";
+import { getAuthenticatedUserProfile } from "@features/auth/lib/auth-session";
+
+interface WorkspaceBootstrapGateProps {
+  children: ReactNode;
+}
+
+export function WorkspaceBootstrapGate({
+  children,
+}: WorkspaceBootstrapGateProps) {
+  const authUser = useMemo(() => getAuthenticatedUserProfile(), []);
+  const suggestedWorkspaceName = useMemo(() => {
+    if (!authUser?.name) {
+      return "My workspace";
+    }
+    return `${authUser.name}'s workspace`;
+  }, [authUser]);
+  const [workspaces, setWorkspaces] = useState<WorkspaceMembershipSummary[]>(
+    [],
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [workspaceSlug, setWorkspaceSlugState] = useState("");
+  const [workspaceSlugIsManual, setWorkspaceSlugIsManual] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const workspaceNameRef = useRef(workspaceName);
+
+  useEffect(() => {
+    workspaceNameRef.current = workspaceName;
+  }, [workspaceName]);
+
+  useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+      try {
+        const payload = await getMyWorkspaces();
+        if (!active) {
+          return;
+        }
+
+        setWorkspaces(payload.memberships);
+        const currentSlug = getSelectedWorkspaceSlug();
+
+        if (payload.memberships.length === 0) {
+          const nextWorkspaceName =
+            workspaceNameRef.current.trim() || suggestedWorkspaceName;
+          setWorkspaceName(nextWorkspaceName);
+          setWorkspaceSlugState(slugifyWorkspace(nextWorkspaceName));
+          setWorkspaceSlugIsManual(false);
+          if (currentSlug) {
+            clearSelectedWorkspaceSlug();
+          }
+          setIsLoading(false);
+          return;
+        }
+
+        const selectedWorkspace =
+          payload.memberships.find(
+            (workspace) => workspace.slug === currentSlug,
+          ) ?? payload.memberships[0];
+
+        if (selectedWorkspace) {
+          if (selectedWorkspace.slug !== currentSlug) {
+            setSelectedWorkspaceSlug(selectedWorkspace.slug);
+          }
+        } else if (currentSlug) {
+          clearSelectedWorkspaceSlug();
+        }
+
+        setIsLoading(false);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+        console.error("Failed to load workspace memberships", error);
+        setIsLoading(false);
+      }
+    };
+
+    void load();
+
+    return () => {
+      active = false;
+    };
+  }, [suggestedWorkspaceName]);
+
+  useEffect(() => {
+    if (workspaceSlugIsManual) {
+      return;
+    }
+    setWorkspaceSlugState(slugifyWorkspace(workspaceName));
+  }, [workspaceName, workspaceSlugIsManual]);
+
+  useEffect(() => {
+    if (workspaceName.trim()) {
+      return;
+    }
+    setWorkspaceName(suggestedWorkspaceName);
+  }, [suggestedWorkspaceName, workspaceName]);
+
+  const handleCreateWorkspace = async () => {
+    const name = workspaceName.trim();
+    const slug = workspaceSlug.trim() || slugifyWorkspace(name);
+
+    if (!name || !slug) {
+      toast({
+        title: "Workspace details required",
+        description: "Provide both a name and a slug for the new workspace.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsCreating(true);
+    try {
+      const created = await createWorkspace({ name, slug });
+      setSelectedWorkspaceSlug(created.slug);
+      window.location.assign(getWorkspaceGalleryPath(created.slug));
+    } catch (error) {
+      toast({
+        title: "Failed to create workspace",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-100 text-foreground dark:bg-slate-950">
+        <Card className="w-full max-w-md border-border bg-card/80 backdrop-blur-xl dark:border-primary/25 dark:bg-primary/5">
+          <CardContent className="flex items-center gap-3 p-6 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span>Checking workspace access…</span>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (workspaces.length > 0) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-100 text-foreground dark:bg-slate-950">
+      <div
+        className="absolute inset-0 bg-gradient-to-br from-slate-100 via-slate-200 to-slate-100 dark:from-slate-950 dark:via-slate-900/80 dark:to-black"
+        aria-hidden="true"
+      />
+      <div
+        className="absolute inset-0 opacity-40 mix-blend-soft-light dark:opacity-60"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.2), transparent 45%), radial-gradient(circle at 80% 30%, rgba(56, 189, 248, 0.25), transparent 50%), radial-gradient(circle at 50% 80%, rgba(45, 212, 191, 0.2), transparent 55%)",
+        }}
+        aria-hidden="true"
+      />
+      <Card className="relative z-10 mx-auto w-full max-w-lg border-border bg-card/85 backdrop-blur-xl dark:border-primary/25 dark:bg-primary/5">
+        <CardHeader className="space-y-2">
+          <CardTitle className="text-2xl">
+            Create your first workspace
+          </CardTitle>
+          <CardDescription>
+            Studio needs a workspace before it can open. Create one to continue
+            with your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-name">Workspace name</Label>
+            <Input
+              id="workspace-name"
+              value={workspaceName}
+              onChange={(event) => setWorkspaceName(event.target.value)}
+              placeholder="Acme"
+              autoFocus
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-slug">Workspace URL name</Label>
+            <Input
+              id="workspace-slug"
+              value={workspaceSlug}
+              onChange={(event) => {
+                const nextValue = event.target.value;
+                setWorkspaceSlugState(nextValue);
+                setWorkspaceSlugIsManual(nextValue.trim().length > 0);
+              }}
+              placeholder="acme"
+            />
+            <p className="text-xs text-muted-foreground">
+              Used in links to your workspace. You can keep the suggested value
+              or choose a short name.
+            </p>
+          </div>
+          <Button onClick={handleCreateWorkspace} disabled={isCreating}>
+            {isCreating ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : null}
+            {isCreating ? "Creating…" : "Create workspace"}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/features/workflow/components/dialogs/add-credential-dialog.tsx

@@ -0,0 +1,245 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import { Eye, EyeOff, Loader2, Plus } from "lucide-react";
+import type {
+  CredentialInput,
+  CredentialVaultAccessLevel,
+} from "@features/workflow/types/credential-vault";
+
+type CredentialAccess = CredentialVaultAccessLevel;
+
+interface AddCredentialDialogProps {
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+}
+
+const DEFAULT_CREDENTIAL: CredentialInput = {
+  name: "",
+  provider: "Custom",
+  access: "shared",
+  secrets: { secret: "" },
+};
+
+export function AddCredentialDialog({
+  onAddCredential,
+}: AddCredentialDialogProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingCredential, setPendingCredential] =
+    useState<CredentialInput>(DEFAULT_CREDENTIAL);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showSecret, setShowSecret] = useState(false);
+
+  const hasName = pendingCredential.name.trim().length > 0;
+  const hasProvider = pendingCredential.provider.trim().length > 0;
+
+  const resetState = useCallback(() => {
+    setPendingCredential(DEFAULT_CREDENTIAL);
+    setError(null);
+    setIsSaving(false);
+    setShowSecret(false);
+  }, []);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        resetState();
+      }
+    },
+    [resetState],
+  );
+
+  const handleAddCredential = useCallback(async () => {
+    if (!onAddCredential || !hasName) {
+      return;
+    }
+
+    setError(null);
+    setIsSaving(true);
+    try {
+      await onAddCredential(pendingCredential);
+      handleOpenChange(false);
+    } catch (err) {
+      console.error("Failed to save credential", err);
+      const message =
+        err instanceof Error
+          ? err.message
+          : "Unable to save credential. Please try again.";
+      setError(message);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [handleOpenChange, hasName, onAddCredential, pendingCredential]);
+
+  const updateCredential = useCallback((partial: Partial<CredentialInput>) => {
+    setPendingCredential((prev) => ({
+      ...prev,
+      ...partial,
+      secrets: partial.secrets ?? prev.secrets,
+    }));
+  }, []);
+
+  const updateSecret = useCallback(
+    (key: string, value: string) => {
+      updateCredential({
+        secrets: {
+          ...pendingCredential.secrets,
+          [key]: value,
+        },
+      });
+    },
+    [pendingCredential.secrets, updateCredential],
+  );
+
+  const isSaveDisabled = useMemo(
+    () => !hasName || !hasProvider || isSaving,
+    [hasName, hasProvider, isSaving],
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Credential
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Add New Credential</DialogTitle>
+          <DialogDescription>
+            Create a new credential for connecting to external services.
+            Credentials are encrypted at rest.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-name"
+              className="text-right text-sm font-medium"
+            >
+              Name
+            </label>
+            <Input
+              id="credential-name"
+              value={pendingCredential.name}
+              onChange={(event) =>
+                updateCredential({ name: event.target.value })
+              }
+              className="col-span-3"
+              placeholder="My API Credential"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-provider"
+              className="text-right text-sm font-medium"
+            >
+              Provider
+            </label>
+            <Input
+              id="credential-provider"
+              value={pendingCredential.provider}
+              onChange={(event) =>
+                updateCredential({ provider: event.target.value })
+              }
+              className="col-span-3"
+              placeholder="openai, pinecone, mongodb..."
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-access"
+              className="text-right text-sm font-medium"
+            >
+              Access
+            </label>
+            <Select
+              value={pendingCredential.access}
+              onValueChange={(value: CredentialAccess) =>
+                updateCredential({ access: value })
+              }
+            >
+              <SelectTrigger id="credential-access" className="col-span-3">
+                <SelectValue placeholder="Select access level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="scoped">Scoped</SelectItem>
+                <SelectItem value="shared">Shared</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-secret"
+              className="text-right text-sm font-medium"
+            >
+              Secret
+            </label>
+            <div className="relative col-span-3">
+              <Input
+                id="credential-secret"
+                type={showSecret ? "text" : "password"}
+                value={pendingCredential.secrets?.secret ?? ""}
+                onChange={(event) => updateSecret("secret", event.target.value)}
+                className="pr-9"
+                placeholder="Enter credential secret"
+              />
+              <button
+                type="button"
+                onClick={() => setShowSecret((v) => !v)}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                aria-label={showSecret ? "Hide secret" : "Show secret"}
+              >
+                {showSecret ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+        {error ? (
+          <p className="text-sm text-destructive px-1">{error}</p>
+        ) : null}
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleAddCredential} disabled={isSaveDisabled}>
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              "Save Credential"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/dialogs/confirm-delete-workflow-dialog.tsx

@@ -0,0 +1,52 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/design-system/ui/alert-dialog";
+
+interface ConfirmDeleteWorkflowDialogProps {
+  open: boolean;
+  workflowName: string;
+  isPending?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => Promise<void> | void;
+}
+
+export function ConfirmDeleteWorkflowDialog({
+  open,
+  workflowName,
+  isPending = false,
+  onOpenChange,
+  onConfirm,
+}: ConfirmDeleteWorkflowDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Offboard colleague?</AlertDialogTitle>
+          <AlertDialogDescription>
+            {`"${workflowName}" will be permanently removed from your workspace. This action cannot be undone.`}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            onClick={(event) => {
+              event.preventDefault();
+              void onConfirm();
+            }}
+            disabled={isPending}
+          >
+            {isPending ? "Offboarding..." : "Offboard"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/features/workflow/components/dialogs/credential-access-badge.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Badge } from "@/design-system/ui/badge";
+import { Lock, Users } from "lucide-react";
+
+interface CredentialAccessBadgeProps {
+  access: string;
+}
+
+export function CredentialAccessBadge({ access }: CredentialAccessBadgeProps) {
+  switch (access) {
+    case "scoped":
+      return (
+        <Badge
+          variant="outline"
+          className="bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800"
+        >
+          <Lock className="h-3 w-3 mr-1" />
+          Scoped
+        </Badge>
+      );
+    case "shared":
+      return (
+        <Badge
+          variant="outline"
+          className="bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800"
+        >
+          <Users className="h-3 w-3 mr-1" />
+          Shared
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}

package/src/features/workflow/components/dialogs/credential-status-badge.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Badge } from "@/design-system/ui/badge";
+import { AlertTriangle, CheckCircle2, Circle } from "lucide-react";
+import type { CredentialVaultHealthStatus } from "@features/workflow/types/credential-vault";
+
+interface CredentialStatusBadgeProps {
+  status?: CredentialVaultHealthStatus;
+}
+
+export function CredentialStatusBadge({ status }: CredentialStatusBadgeProps) {
+  const normalizedStatus = status ?? "unknown";
+
+  switch (normalizedStatus) {
+    case "healthy":
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
+        >
+          <CheckCircle2 className="h-3 w-3" />
+          Healthy
+        </Badge>
+      );
+    case "unhealthy":
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
+        >
+          <AlertTriangle className="h-3 w-3" />
+          Unhealthy
+        </Badge>
+      );
+    default:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 bg-muted text-muted-foreground border-border"
+        >
+          <Circle className="h-3 w-3" />
+          Unknown
+        </Badge>
+      );
+  }
+}