orcheo-studio 0.23.1 → 0.24.0

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

@@ -1,6 +1,14 @@
 import { useRef, useState } from "react";
 import type { KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
-import { MoreHorizontal, Send, Star, UserMinus, UserPlus } from "lucide-react";
+import {
+  Loader2,
+  MoreHorizontal,
+  RefreshCcw,
+  Send,
+  Star,
+  UserMinus,
+  UserPlus,
+} from "lucide-react";
 import { toast } from "@/hooks/use-toast";
 import { Button } from "@/design-system/ui/button";
 import {
@@ -9,6 +17,14 @@ import {
   CardFooter,
   CardHeader,
 } from "@/design-system/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,15 +32,23 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/design-system/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { resolveAvatarUrl } from "@/assets/avatars";
 import { ConfirmDeleteWorkflowDialog } from "@features/workflow/components/dialogs/confirm-delete-workflow-dialog";
 import {
+  getCandidateBadgeByCandidateId,
   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 { getCandidateUpdateAvailability } from "./candidate-updates";
 import { WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME } from "./workflow-card-size";
 
 const getWorkflowTemplateAvatar = (workflow: Workflow): string | undefined => {
@@ -49,6 +73,10 @@ interface WorkflowCardProps {
     workflowId: string,
     workflowName: string,
   ) => Promise<void> | void;
+  onUpdateCandidateWorkflow: (
+    workflowId: string,
+    candidateId: string,
+  ) => Promise<void> | void;
 }
 
 export const WorkflowCard = ({
@@ -60,6 +88,7 @@ export const WorkflowCard = ({
   onUseTemplate,
   onExportWorkflow,
   onDeleteWorkflow,
+  onUpdateCandidateWorkflow,
 }: WorkflowCardProps) => {
   const workflowRouteRef = getWorkflowRouteRef(workflow);
   const isClickable = !isTemplate;
@@ -70,14 +99,25 @@ export const WorkflowCard = ({
   const templateId = !isTemplate
     ? workflow.versions?.at(-1)?.templateId
     : undefined;
+  const candidateSource = !isTemplate
+    ? workflow.versions?.at(-1)?.candidateSource
+    : undefined;
   const templateBadge = !isTemplate
-    ? (templateId
-        ? getCandidateBadgeDefinition(templateId)
-        : workflow.handle
-          ? getCandidateBadgeByHandle(workflow.handle)
-          : undefined)
+    ? ((candidateSource?.candidateId
+        ? getCandidateBadgeByCandidateId(candidateSource.candidateId)
+        : undefined) ??
+      (candidateSource?.candidateHandle
+        ? getCandidateBadgeByHandle(candidateSource.candidateHandle)
+        : undefined) ??
+      (templateId ? getCandidateBadgeDefinition(templateId) : undefined) ??
+      (workflow.handle
+        ? getCandidateBadgeByHandle(workflow.handle)
+        : undefined))
     : undefined;
   const displayBadge = candidateBadge ?? templateBadge;
+  const candidateUpdate = !isTemplate
+    ? getCandidateUpdateAvailability(workflow, templateBadge)
+    : undefined;
   const headerLabel = isTemplate ? "Candidate" : workspaceLabel;
   const rawHandle = workflow.handle ?? workflow.id;
   const workflowSlug = isTemplate
@@ -85,6 +125,9 @@ export const WorkflowCard = ({
     : rawHandle;
   const displayHandle =
     !isTemplate && teamSlug ? `${teamSlug}/${workflowSlug}` : workflowSlug;
+  const versionToDisplay = isTemplate
+    ? (candidateBadge?.version ?? null)
+    : (workflow.versions?.at(-1)?.candidateSource?.candidateVersion ?? null);
   const avatarUrl = resolveAvatarUrl(
     workflow.avatarEmoji ?? getWorkflowTemplateAvatar(workflow),
     workflow.id,
@@ -94,6 +137,8 @@ export const WorkflowCard = ({
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDeletePending, setIsDeletePending] = useState(false);
+  const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false);
+  const [isUpdatePending, setIsUpdatePending] = useState(false);
 
   const suppressCardOpen = () => {
     suppressCardOpenRef.current = true;
@@ -149,6 +194,20 @@ export const WorkflowCard = ({
     }
   };
 
+  const handleConfirmUpdate = async () => {
+    if (!candidateUpdate) {
+      return;
+    }
+
+    setIsUpdatePending(true);
+    try {
+      await onUpdateCandidateWorkflow(workflow.id, candidateUpdate.candidateId);
+      setIsUpdateDialogOpen(false);
+    } finally {
+      setIsUpdatePending(false);
+    }
+  };
+
   return (
     <>
       <Card
@@ -266,6 +325,45 @@ export const WorkflowCard = ({
               />
             </div>
 
+            {candidateUpdate ? (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="absolute right-10 top-0 h-8 w-8 border-emerald-500/40 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
+                      aria-label={`Update ${workflow.name} to candidate version ${candidateUpdate.latestVersion}`}
+                      data-card-action="true"
+                      onClick={(event) => {
+                        stopPropagation(event);
+                        setIsUpdateDialogOpen(true);
+                      }}
+                      onPointerDown={stopPropagation}
+                    >
+                      <RefreshCcw className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="max-w-[280px]">
+                    <div className="space-y-2 text-xs">
+                      <div className="font-semibold text-foreground">
+                        Candidate version {candidateUpdate.currentVersion} to{" "}
+                        {candidateUpdate.latestVersion}
+                      </div>
+                      {candidateUpdate.latestSummary ? (
+                        <p>{candidateUpdate.latestSummary}</p>
+                      ) : null}
+                      {candidateUpdate.firstMigration ? (
+                        <p className="text-amber-600 dark:text-amber-300">
+                          {candidateUpdate.firstMigration}
+                        </p>
+                      ) : null}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : null}
+
             {!isTemplate ? (
               <Button
                 variant="ghost"
@@ -295,6 +393,12 @@ export const WorkflowCard = ({
             @{displayHandle}
           </div>
 
+          {versionToDisplay ? (
+            <div className="mt-0.5 shrink-0 font-mono text-[9px] tracking-[0.04em] text-muted-foreground/60">
+              v{versionToDisplay}
+            </div>
+          ) : null}
+
           <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" />
 
@@ -343,6 +447,83 @@ export const WorkflowCard = ({
           onConfirm={handleConfirmDelete}
         />
       ) : null}
+
+      {candidateUpdate ? (
+        <Dialog
+          open={isUpdateDialogOpen}
+          onOpenChange={(open) => {
+            if (!isUpdatePending) {
+              setIsUpdateDialogOpen(open);
+            }
+          }}
+        >
+          <DialogContent className="max-w-xl">
+            <DialogHeader>
+              <DialogTitle>Update candidate version</DialogTitle>
+              <DialogDescription>
+                Review release notes before updating {workflow.name} from{" "}
+                {candidateUpdate.currentVersion} to{" "}
+                {candidateUpdate.latestVersion}.
+              </DialogDescription>
+            </DialogHeader>
+
+            {candidateUpdate.isMajor ? (
+              <div className="rounded-md border border-amber-500/50 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+                This is a major candidate update. Review migration notes before
+                applying it to this colleague.
+              </div>
+            ) : null}
+
+            <div className="max-h-[320px] space-y-3 overflow-y-auto pr-1">
+              {candidateUpdate.crossedUpdates.length > 0 ? (
+                candidateUpdate.crossedUpdates.map((note) => (
+                  <div
+                    key={note.version}
+                    className="rounded-md border border-border/70 p-3 text-sm"
+                  >
+                    <div className="font-semibold">
+                      Candidate version {note.version}
+                    </div>
+                    <p className="mt-1 text-muted-foreground">{note.summary}</p>
+                    {note.migration ? (
+                      <p className="mt-2 text-amber-700 dark:text-amber-300">
+                        {note.migration}
+                      </p>
+                    ) : null}
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  No release notes were provided for the versions being crossed.
+                </p>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsUpdateDialogOpen(false)}
+                disabled={isUpdatePending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                onClick={handleConfirmUpdate}
+                disabled={isUpdatePending}
+              >
+                {isUpdatePending ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCcw className="mr-2 h-4 w-4" />
+                )}
+                Update
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      ) : null}
     </>
   );
 };

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

@@ -39,6 +39,10 @@ interface WorkflowGalleryTabsProps {
     workflowId: string,
     workflowName: string,
   ) => Promise<void> | void;
+  onUpdateCandidateWorkflow: (
+    workflowId: string,
+    candidateId: string,
+  ) => Promise<void> | void;
   onDeleteTeam?: (teamId: string) => void;
 }
 
@@ -58,6 +62,7 @@ export const WorkflowGalleryTabs = ({
   onUseTemplate,
   onExportWorkflow,
   onDeleteWorkflow,
+  onUpdateCandidateWorkflow,
   onDeleteTeam,
 }: WorkflowGalleryTabsProps) => {
   const [isUploadOpen, setIsUploadOpen] = useState(false);
@@ -80,6 +85,7 @@ export const WorkflowGalleryTabs = ({
           onUseTemplate={onUseTemplate}
           onExportWorkflow={onExportWorkflow}
           onDeleteWorkflow={onDeleteWorkflow}
+          onUpdateCandidateWorkflow={onUpdateCandidateWorkflow}
         />
       ))}
     </div>
@@ -114,15 +120,17 @@ export const WorkflowGalleryTabs = ({
     return (
       <div className="flex flex-col gap-1 pb-6">
         {independents.length > 0 ? renderGrid(independents) : null}
-        {[...byGroup.entries()].map(([slug, items]) => (
-          <TeamSection
-            key={slug}
-            name={formatCandidateGroupName(slug)}
-            count={items.length}
-          >
-            {renderGrid(items)}
-          </TeamSection>
-        ))}
+        {[...byGroup.entries()]
+          .sort(([left], [right]) => left.localeCompare(right))
+          .map(([slug, items]) => (
+            <TeamSection
+              key={slug}
+              name={formatCandidateGroupName(slug)}
+              count={items.length}
+            >
+              {renderGrid(items)}
+            </TeamSection>
+          ))}
       </div>
     );
   };

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

@@ -62,6 +62,7 @@ export default function WorkflowGallery() {
     handleImportStarterPack,
     handleExportWorkflow,
     handleDeleteWorkflow,
+    handleUpdateCandidateWorkflow,
     handleOpenWorkflow,
     onboardTarget,
     confirmOnboardTeam,
@@ -102,6 +103,7 @@ export default function WorkflowGallery() {
             onUseTemplate={handleUseTemplate}
             onExportWorkflow={handleExportWorkflow}
             onDeleteWorkflow={handleDeleteWorkflow}
+            onUpdateCandidateWorkflow={handleUpdateCandidateWorkflow}
             onDeleteTeam={handleDeleteTeam}
           />
         </div>

package/src/lib/auth-fetch.ts

@@ -1,35 +1,101 @@
 import {
   getAccessToken,
+  getAuthTokens,
   getDevAuthSessionHeaderValue,
 } from "@features/auth/lib/auth-session";
+import { refreshSession } from "@features/auth/lib/auth-api";
 import { getWorkspaceSelectionHeaders } from "./workspace-session";
 
-export const authFetch = async (
-  input: RequestInfo | URL,
-  init: RequestInit = {},
-  options: { includeWorkspaceHeaders?: boolean } = {},
-): Promise<Response> => {
-  const headers = new Headers(init.headers ?? {});
+const buildAuthHeaders = (
+  headers: Headers,
+  shouldAttachAuth: boolean,
+): string | null => {
   const token = getAccessToken();
-  if (token && !headers.has("Authorization")) {
+  if (token && shouldAttachAuth) {
     headers.set("Authorization", `Bearer ${token}`);
   }
   const devSession = getDevAuthSessionHeaderValue();
   if (devSession && !headers.has("X-Orcheo-Dev-Session")) {
     headers.set("X-Orcheo-Dev-Session", devSession);
   }
-  if (options.includeWorkspaceHeaders ?? true) {
-    for (const [name, value] of Object.entries(
-      getWorkspaceSelectionHeaders(),
-    )) {
-      if (!headers.has(name)) {
-        headers.set(name, value);
-      }
+  return shouldAttachAuth ? token : null;
+};
+
+const attachWorkspaceHeaders = (headers: Headers): void => {
+  for (const [name, value] of Object.entries(getWorkspaceSelectionHeaders())) {
+    if (!headers.has(name)) {
+      headers.set(name, value);
     }
   }
-  return globalThis.fetch(input, {
+};
+
+const fetchWithHeaders = (
+  input: RequestInfo | URL,
+  init: RequestInit,
+  headers: Headers,
+): Promise<Response> =>
+  globalThis.fetch(input, {
     ...init,
     credentials: init.credentials ?? "include",
     headers,
   });
+
+const buildRequestHeaders = (
+  init: RequestInit,
+  shouldAttachAuth: boolean,
+  includeWorkspaceHeaders: boolean,
+  headers = new Headers(init.headers ?? {}),
+): { headers: Headers; accessToken: string | null } => {
+  const accessToken = buildAuthHeaders(headers, shouldAttachAuth);
+  if (includeWorkspaceHeaders) {
+    attachWorkspaceHeaders(headers);
+  }
+  return { headers, accessToken };
+};
+
+export const authFetch = async (
+  input: RequestInfo | URL,
+  init: RequestInit = {},
+  options: { includeWorkspaceHeaders?: boolean } = {},
+): Promise<Response> => {
+  const originalHeaders = new Headers(init.headers ?? {});
+  const shouldAttachAuth = !originalHeaders.has("Authorization");
+  // getAccessToken includes the shared 60-second expiry skew, so nearly expired
+  // tokens are treated as missing and refreshed before protected requests.
+  if (shouldAttachAuth && !getAccessToken() && getAuthTokens()?.refreshToken) {
+    await refreshSession();
+  }
+
+  const includeWorkspaceHeaders = options.includeWorkspaceHeaders ?? true;
+  const { headers, accessToken: requestAccessToken } = buildRequestHeaders(
+    init,
+    shouldAttachAuth,
+    includeWorkspaceHeaders,
+    originalHeaders,
+  );
+  const response = await fetchWithHeaders(input, init, headers);
+  if (response.status !== 401 || !shouldAttachAuth) {
+    return response;
+  }
+
+  const currentAccessToken = getAccessToken();
+  if (currentAccessToken && currentAccessToken !== requestAccessToken) {
+    const { headers: retryHeaders } = buildRequestHeaders(
+      init,
+      shouldAttachAuth,
+      includeWorkspaceHeaders,
+    );
+    return fetchWithHeaders(input, init, retryHeaders);
+  }
+
+  if (!getAuthTokens()?.refreshToken || !(await refreshSession())) {
+    return response;
+  }
+
+  const { headers: retryHeaders } = buildRequestHeaders(
+    init,
+    shouldAttachAuth,
+    includeWorkspaceHeaders,
+  );
+  return fetchWithHeaders(input, init, retryHeaders);
 };

package/vite.config.ts

@@ -86,14 +86,7 @@ export default defineConfig({
       'lodash/defaultsDeep',
       'lodash/flatten',
       // Other CJS packages
-      'react-split',
-      'dom-helpers',
       'dayjs',
-      'invariant',
-      'copy-to-clipboard',
-      'moment',
-      'moment-timezone',
-      'papaparse',
       // zustand and related
       'zustand',
       'zustand/traditional',

package/dist/assets/channel-FjxqoZWk.js

@@ -1 +0,0 @@
-import{ap as o,aq as n}from"./index-kH6EkBsZ.js";const t=(a,r)=>o.lang.round(n.parse(a)[r]);export{t as c};

package/dist/assets/classDiagram-2ON5EDUG-8JYNY9Ic.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DcErQhy9.js";import{_ as i}from"./index-kH6EkBsZ.js";import"./chunk-FMBD7UC4-XOcF0fgy.js";import"./chunk-55IACEB6-Cl075es2.js";import"./chunk-QN33PNHL-CjJH_Bvj.js";var p={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{p as diagram};

package/dist/assets/classDiagram-v2-WZHVMYZB-8JYNY9Ic.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DcErQhy9.js";import{_ as i}from"./index-kH6EkBsZ.js";import"./chunk-FMBD7UC4-XOcF0fgy.js";import"./chunk-55IACEB6-Cl075es2.js";import"./chunk-QN33PNHL-CjJH_Bvj.js";var p={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{p as diagram};

package/dist/assets/clone-NPVQC0Uc.js

@@ -1 +0,0 @@
-import{ay as r}from"./index-kH6EkBsZ.js";var a=4;function n(o){return r(o,a)}export{n as c};