orcheo-studio 0.21.3 → 0.23.0

package/src/features/workflow/pages/workflow/hooks/use-workflow-metadata-state.ts

@@ -21,6 +21,7 @@ export function useWorkflowMetadataState() {
     null,
   );
   const [isWorkflowPublic, setIsWorkflowPublic] = useState(false);
+  const [workflowRequireLogin, setWorkflowRequireLogin] = useState(false);
   const [workflowShareUrl, setWorkflowShareUrl] = useState<string | null>(null);
   const [chatkitStartScreenPrompts, setChatkitStartScreenPrompts] = useState<
     ChatKitStartScreenPrompt[] | null
@@ -46,6 +47,8 @@ export function useWorkflowMetadataState() {
     setWorkflowLoadError,
     isWorkflowPublic,
     setIsWorkflowPublic,
+    workflowRequireLogin,
+    setWorkflowRequireLogin,
     workflowShareUrl,
     setWorkflowShareUrl,
     chatkitStartScreenPrompts,

package/src/features/workflow/pages/workflow-gallery/create-team-dialog.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+
+interface CreateTeamDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (name: string, slug: string) => Promise<void>;
+}
+
+const toSlug = (name: string): string =>
+  name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+
+export const CreateTeamDialog = ({
+  open,
+  onOpenChange,
+  onCreate,
+}: CreateTeamDialogProps) => {
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [slugDirty, setSlugDirty] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setName("");
+      setSlug("");
+      setSlugDirty(false);
+      setError(null);
+      setIsSubmitting(false);
+    }
+  }, [open]);
+
+  const handleNameChange = (value: string) => {
+    setName(value);
+    if (!slugDirty) {
+      setSlug(toSlug(value));
+    }
+  };
+
+  const handleSlugChange = (value: string) => {
+    setSlugDirty(true);
+    setSlug(value.toLowerCase().replace(/[^a-z0-9_-]/g, ""));
+  };
+
+  const handleSubmit = async () => {
+    const trimmedName = name.trim();
+    const trimmedSlug = slug.trim();
+    if (!trimmedName || !trimmedSlug) {
+      setError("Both name and slug are required.");
+      return;
+    }
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await onCreate(trimmedName, trimmedSlug);
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to create team.",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New team</DialogTitle>
+          <DialogDescription>
+            Create a team to group colleagues under a shared label.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="team-name">Name</Label>
+            <Input
+              id="team-name"
+              placeholder="e.g. Sales"
+              value={name}
+              onChange={(e) => handleNameChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") void handleSubmit();
+              }}
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="team-slug">Slug</Label>
+            <Input
+              id="team-slug"
+              placeholder="e.g. sales"
+              value={slug}
+              onChange={(e) => handleSlugChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") void handleSubmit();
+              }}
+            />
+            <p className="text-xs text-muted-foreground">
+              Used in API references. Lowercase letters, numbers, hyphens, and
+              underscores only.
+            </p>
+          </div>
+          {error ? (
+            <p className="text-sm text-destructive">{error}</p>
+          ) : null}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => void handleSubmit()} disabled={isSubmitting}>
+            {isSubmitting ? "Creating…" : "Create team"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/workflow/pages/workflow-gallery/onboard-team-dialog.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import { type ApiTeam } from "@features/workflow/lib/workflow-storage-api";
+
+interface OnboardTeamDialogProps {
+  open: boolean;
+  candidateName: string;
+  teams: ApiTeam[];
+  onSelect: (teamId: string) => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Prompts which team to onboard a candidate into when the workspace has more
+ * than one team.
+ */
+export const OnboardTeamDialog = ({
+  open,
+  candidateName,
+  teams,
+  onSelect,
+  onOpenChange,
+}: OnboardTeamDialogProps) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Choose a team</DialogTitle>
+          <DialogDescription>
+            Select the team to onboard "{candidateName}" into.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          {teams.map((team) => (
+            <Button
+              key={team.id}
+              variant="outline"
+              className="justify-between"
+              onClick={() => onSelect(team.id)}
+            >
+              <span>{team.name}</span>
+              {team.is_default ? (
+                <span className="text-xs text-muted-foreground">Default</span>
+              ) : null}
+            </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { type ReactNode, useState } from "react";
+import { ChevronDown, ChevronRight, Trash2 } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+
+interface TeamSectionProps {
+  name: string;
+  count: number;
+  defaultOpen?: boolean;
+  onRemove?: () => void;
+  children: ReactNode;
+}
+
+/**
+ * A vertically-stacked, individually collapsible section grouping the AI
+ * colleagues that belong to a single team.
+ */
+export const TeamSection = ({
+  name,
+  count,
+  defaultOpen = true,
+  onRemove,
+  children,
+}: TeamSectionProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <section className="border-b border-border/60 pb-4 last:border-b-0">
+      <div className="group flex items-center py-3">
+        <button
+          type="button"
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((open) => !open)}
+          className="flex items-center gap-2 text-left"
+        >
+          {isOpen ? (
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          )}
+          <span className="text-sm font-semibold">{name}</span>
+          <span className="text-xs text-muted-foreground">{count}</span>
+        </button>
+        {onRemove ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="ml-1 h-7 w-7 opacity-0 group-hover:opacity-100"
+            onClick={onRemove}
+            aria-label={`Remove team ${name}`}
+          >
+            <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
+          </Button>
+        ) : null}
+      </div>
+      {isOpen ? children : null}
+    </section>
+  );
+};

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery-actions.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "@/hooks/use-toast";
 import {
@@ -10,14 +10,29 @@ import {
   deleteWorkflow,
   onboardCandidateAsWorkflow,
 } from "@features/workflow/lib/workflow-storage";
-import { fetchWorkflowVersions } from "@features/workflow/lib/workflow-storage-api";
+import {
+  type ApiTeam,
+  createTeam,
+  deleteTeam,
+  fetchWorkflowVersions,
+} from "@features/workflow/lib/workflow-storage-api";
 import { getWorkflowRouteRef } from "@features/workflow/lib/workflow-storage-helpers";
 import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
-import { getWorkspaceWorkflowPath } from "@/lib/workspace-routing";
+import {
+  getWorkspaceTeamWorkflowPath,
+  getWorkspaceWorkflowPath,
+} from "@/lib/workspace-routing";
 import { type WorkflowGalleryTab } from "./types";
 
 interface WorkflowGalleryActionsArgs {
   setSelectedTab: (value: WorkflowGalleryTab) => void;
+  teams: ApiTeam[];
+  refreshTeams: () => Promise<void>;
+}
+
+interface OnboardTarget {
+  candidateId: string;
+  candidateName: string;
 }
 
 const STARTER_TEMPLATE_IDS = ["template-python-agent"];
@@ -81,30 +96,27 @@ export const useWorkflowGalleryActions = (
   state: WorkflowGalleryActionsArgs,
 ) => {
   const navigate = useNavigate();
+  const [onboardTarget, setOnboardTarget] = useState<OnboardTarget | null>(
+    null,
+  );
+  const [isCreateTeamOpen, setIsCreateTeamOpen] = useState(false);
 
   const handleOpenWorkflow = useCallback(
-    (workflowId: string) => {
-      navigate(
-        getWorkspaceWorkflowPath(getSelectedWorkspaceSlug(), workflowId),
-      );
+    (workflowId: string, teamSlug?: string) => {
+      const slug = getSelectedWorkspaceSlug();
+      const path =
+        teamSlug
+          ? getWorkspaceTeamWorkflowPath(slug, teamSlug, workflowId)
+          : getWorkspaceWorkflowPath(slug, workflowId);
+      navigate(path);
     },
     [navigate],
   );
 
-  const handleUseTemplate = useCallback(
-    async (templateId: string) => {
+  const performOnboard = useCallback(
+    async (candidateId: string, teamId?: string) => {
       try {
-        const badge = getCandidateBadgeDefinition(templateId);
-        if (!badge?.candidateId) {
-          toast({
-            title: "Candidate unavailable",
-            description: "We couldn't find that candidate. Please try another.",
-            variant: "destructive",
-          });
-          return;
-        }
-
-        const workflow = await onboardCandidateAsWorkflow(badge.candidateId);
+        const workflow = await onboardCandidateAsWorkflow(candidateId, teamId);
 
         state.setSelectedTab("all");
 
@@ -113,7 +125,8 @@ export const useWorkflowGalleryActions = (
           description: `"${workflow.name}" has been onboarded to your workspace.`,
         });
 
-        handleOpenWorkflow(getWorkflowRouteRef(workflow));
+        const team = teamId ? state.teams.find((t) => t.id === teamId) : null;
+        handleOpenWorkflow(getWorkflowRouteRef(workflow), team?.slug);
       } catch (error) {
         toast({
           title: "Failed to onboard candidate",
@@ -126,6 +139,48 @@ export const useWorkflowGalleryActions = (
     [handleOpenWorkflow, state],
   );
 
+  const handleUseTemplate = useCallback(
+    async (templateId: string) => {
+      const badge = getCandidateBadgeDefinition(templateId);
+      if (!badge?.candidateId) {
+        toast({
+          title: "Candidate unavailable",
+          description: "We couldn't find that candidate. Please try another.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // With more than one team, ask which team to onboard into. Otherwise the
+      // server places the colleague in the workspace's default team.
+      if (state.teams.length > 1) {
+        setOnboardTarget({
+          candidateId: badge.candidateId,
+          candidateName: badge.name ?? badge.candidateId,
+        });
+        return;
+      }
+
+      await performOnboard(badge.candidateId);
+    },
+    [performOnboard, state.teams],
+  );
+
+  const confirmOnboardTeam = useCallback(
+    async (teamId: string) => {
+      const target = onboardTarget;
+      setOnboardTarget(null);
+      if (target) {
+        await performOnboard(target.candidateId, teamId);
+      }
+    },
+    [onboardTarget, performOnboard],
+  );
+
+  const cancelOnboardTeam = useCallback(() => {
+    setOnboardTarget(null);
+  }, []);
+
   const handleImportStarterPack = useCallback(async () => {
     try {
       const results = await Promise.allSettled(
@@ -193,6 +248,40 @@ export const useWorkflowGalleryActions = (
     }
   }, []);
 
+  const handleCreateTeam = useCallback(
+    async (name: string, slug: string) => {
+      await createTeam({ name, slug });
+      await state.refreshTeams();
+      toast({
+        title: "Team created",
+        description: `"${name}" is ready to group colleagues.`,
+      });
+    },
+    [state],
+  );
+
+  const handleDeleteTeam = useCallback(
+    async (teamId: string) => {
+      const team = state.teams.find((t) => t.id === teamId);
+      try {
+        await deleteTeam(teamId);
+        await state.refreshTeams();
+        toast({
+          title: "Team removed",
+          description: team ? `"${team.name}" has been removed.` : undefined,
+        });
+      } catch (error) {
+        toast({
+          title: "Cannot remove team",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [state],
+  );
+
   const handleDeleteWorkflow = useCallback(
     async (workflowId: string, workflowName: string) => {
       try {
@@ -213,11 +302,25 @@ export const useWorkflowGalleryActions = (
     [],
   );
 
+  const openCreateTeamDialog = useCallback(() => setIsCreateTeamOpen(true), []);
+  const closeCreateTeamDialog = useCallback(
+    () => setIsCreateTeamOpen(false),
+    [],
+  );
+
   return {
     handleOpenWorkflow,
     handleUseTemplate,
     handleImportStarterPack,
     handleExportWorkflow,
     handleDeleteWorkflow,
+    onboardTarget,
+    confirmOnboardTeam,
+    cancelOnboardTeam,
+    isCreateTeamOpen,
+    openCreateTeamDialog,
+    closeCreateTeamDialog,
+    handleCreateTeam,
+    handleDeleteTeam,
   };
 };

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery-state.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "@/hooks/use-toast";
 import {
   GALLERY_TEMPLATE_WORKFLOWS,
@@ -16,7 +16,9 @@ import {
 } from "@features/workflow/lib/workflow-storage";
 import {
   type ApiCandidate,
+  type ApiTeam,
   fetchCandidates,
+  fetchTeams,
 } from "@features/workflow/lib/workflow-storage-api";
 import {
   type WorkflowGalleryTab,
@@ -33,6 +35,8 @@ interface WorkflowGalleryStateSlice {
   tabCounts: WorkflowGalleryTabCounts;
   isTemplateView: boolean;
   templates: Workflow[];
+  teams: ApiTeam[];
+  refreshTeams: () => Promise<void>;
 }
 
 const toCandidateSpec = (candidate: ApiCandidate): CandidateBadgeSpec => ({
@@ -63,6 +67,7 @@ const matchesWorkflowSearch = (
 export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
   const [workflows, setWorkflows] = useState<StoredWorkflow[]>([]);
   const [candidateWorkflows, setCandidateWorkflows] = useState<Workflow[]>([]);
+  const [teams, setTeams] = useState<ApiTeam[]>([]);
   const [isLoadingWorkflows, setIsLoadingWorkflows] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedTab, setSelectedTab] = useState<WorkflowGalleryTab>("all");
@@ -96,6 +101,15 @@ export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
     };
   }, []);
 
+  const refreshTeams = useCallback(async () => {
+    try {
+      const teamList = await fetchTeams();
+      setTeams(teamList);
+    } catch {
+      // non-fatal — teams list will stay stale
+    }
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
 
@@ -104,9 +118,13 @@ export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
         setIsLoadingWorkflows(true);
       }
       try {
-        const items = await listWorkflows({ forceRefresh });
+        const [items, teamList] = await Promise.all([
+          listWorkflows({ forceRefresh }),
+          fetchTeams().catch(() => [] as ApiTeam[]),
+        ]);
         if (isMounted) {
           setWorkflows(items);
+          setTeams(teamList);
         }
       } catch (error) {
         if (!isMounted) {
@@ -202,5 +220,7 @@ export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
     tabCounts,
     isTemplateView,
     templates,
+    teams,
+    refreshTeams,
   };
 };

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery.ts

@@ -5,6 +5,8 @@ export const useWorkflowGallery = () => {
   const state = useWorkflowGalleryState();
   const actions = useWorkflowGalleryActions({
     setSelectedTab: state.setSelectedTab,
+    teams: state.teams,
+    refreshTeams: state.refreshTeams,
   });
 
   return {

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

@@ -19,7 +19,10 @@ import {
 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 {
+  getCandidateBadgeByHandle,
+  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";
@@ -37,6 +40,7 @@ const getWorkflowTemplateAvatar = (workflow: Workflow): string | undefined => {
 interface WorkflowCardProps {
   workflow: Workflow;
   isTemplate: boolean;
+  teamSlug?: string;
   workspaceLabel: string;
   onOpenWorkflow: (workflowId: string) => void;
   onUseTemplate: (workflowId: string) => void;
@@ -50,6 +54,7 @@ interface WorkflowCardProps {
 export const WorkflowCard = ({
   workflow,
   isTemplate,
+  teamSlug,
   workspaceLabel,
   onOpenWorkflow,
   onUseTemplate,
@@ -62,8 +67,24 @@ export const WorkflowCard = ({
   const candidateBadge = isTemplate
     ? getCandidateBadgeDefinition(workflow.id)
     : undefined;
+  const templateId = !isTemplate
+    ? workflow.versions?.at(-1)?.templateId
+    : undefined;
+  const templateBadge = !isTemplate
+    ? (templateId
+        ? getCandidateBadgeDefinition(templateId)
+        : workflow.handle
+          ? getCandidateBadgeByHandle(workflow.handle)
+          : undefined)
+    : undefined;
+  const displayBadge = candidateBadge ?? templateBadge;
   const headerLabel = isTemplate ? "Candidate" : workspaceLabel;
-  const workflowSlug = workflow.handle ?? workflow.id;
+  const rawHandle = workflow.handle ?? workflow.id;
+  const workflowSlug = isTemplate
+    ? rawHandle.replace(/^template-/, "").replace(/_/g, "-")
+    : rawHandle;
+  const displayHandle =
+    !isTemplate && teamSlug ? `${teamSlug}/${workflowSlug}` : workflowSlug;
   const avatarUrl = resolveAvatarUrl(
     workflow.avatarEmoji ?? getWorkflowTemplateAvatar(workflow),
     workflow.id,
@@ -271,15 +292,15 @@ export const WorkflowCard = ({
           </div>
 
           <div className="mt-1 shrink-0 font-mono text-[10px] tracking-[0.04em] text-muted-foreground">
-            @{workflowSlug}
+            @{displayHandle}
           </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 ? (
+            {displayBadge?.subtitle ? (
               <div className="mt-1 shrink-0 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                {candidateBadge.subtitle}
+                {displayBadge.subtitle}
               </div>
             ) : null}