orcheo-studio 0.21.1

package/src/features/shared/components/top-navigation/active-workspace-indicator.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+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 { cn } from "@/lib/utils";
+import {
+  clearSelectedWorkspaceSlug,
+  getSelectedWorkspaceSlug,
+  setSelectedWorkspaceSlug,
+} from "@/lib/workspace-session";
+import {
+  getWorkspaceGalleryPath,
+  getWorkspacePathWithSlug,
+  getWorkspaceSlugFromPathname,
+} from "@/lib/workspace-routing";
+import { getAuthenticatedUserProfile } from "@features/auth/lib/auth-session";
+
+export default function ActiveWorkspaceIndicator() {
+  const authUser = useMemo(() => getAuthenticatedUserProfile(), []);
+  const navigate = useNavigate();
+  const [workspaces, setWorkspaces] = useState<WorkspaceMembershipSummary[]>(
+    [],
+  );
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [workspaceSlug, setWorkspaceSlugState] = useState("");
+  const [workspaceSlugIsManual, setWorkspaceSlugIsManual] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const { pathname } = useLocation();
+  const routeWorkspaceSlug = useMemo(
+    () => getWorkspaceSlugFromPathname(pathname),
+    [pathname],
+  );
+  const suggestedWorkspaceName = useMemo(() => {
+    if (!authUser?.name) {
+      return "";
+    }
+    return `${authUser.name}'s workspace`;
+  }, [authUser]);
+
+  useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+      try {
+        const membershipsPayload = await getMyWorkspaces();
+        if (!active) {
+          return;
+        }
+        setWorkspaces(membershipsPayload.memberships);
+
+        const currentSlug = routeWorkspaceSlug ?? getSelectedWorkspaceSlug();
+        if (membershipsPayload.memberships.length === 0) {
+          setWorkspaceName((current) => current || suggestedWorkspaceName);
+          setWorkspaceSlugState("");
+          setWorkspaceSlugIsManual(false);
+          if (currentSlug) {
+            clearSelectedWorkspaceSlug();
+          }
+          return;
+        }
+
+        const nextSelected =
+          membershipsPayload.memberships.find(
+            (workspace) => workspace.slug === currentSlug,
+          ) ??
+          membershipsPayload.memberships[0] ??
+          null;
+
+        if (nextSelected === null) {
+          if (currentSlug) {
+            clearSelectedWorkspaceSlug();
+          }
+          return;
+        }
+
+        if (nextSelected.slug !== currentSlug) {
+          setSelectedWorkspaceSlug(nextSelected.slug);
+          if (currentSlug) {
+            navigate(
+              routeWorkspaceSlug
+                ? getWorkspacePathWithSlug(pathname, nextSelected.slug)
+                : getWorkspaceGalleryPath(nextSelected.slug),
+              { replace: true },
+            );
+          }
+        }
+      } catch (error) {
+        if (active) {
+          setWorkspaces([]);
+          if (getSelectedWorkspaceSlug()) {
+            clearSelectedWorkspaceSlug();
+          }
+          if (error instanceof Error) {
+            console.error("Failed to load workspaces", error);
+          }
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      active = false;
+    };
+  }, [navigate, pathname, routeWorkspaceSlug, suggestedWorkspaceName]);
+
+  useEffect(() => {
+    if (workspaceSlugIsManual) {
+      return;
+    }
+    setWorkspaceSlugState(slugifyWorkspace(workspaceName));
+  }, [workspaceName, workspaceSlugIsManual]);
+
+  const selectedWorkspaceSlug =
+    routeWorkspaceSlug ?? getSelectedWorkspaceSlug();
+  const currentWorkspace = selectedWorkspaceSlug
+    ? (workspaces.find(
+        (workspace) => workspace.slug === selectedWorkspaceSlug,
+      ) ?? null)
+    : (workspaces[0] ?? null);
+
+  const handleSelectWorkspace = (slug: string) => {
+    setSelectedWorkspaceSlug(slug);
+    window.location.assign(getWorkspaceGalleryPath(slug));
+  };
+
+  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 });
+      toast({
+        title: "Workspace created",
+        description: `"${created.name}" is ready.`,
+      });
+      setCreateDialogOpen(false);
+      setWorkspaceName("");
+      setWorkspaceSlugState("");
+      setWorkspaceSlugIsManual(false);
+      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);
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className={cn(
+              "inline-flex h-9 w-fit items-center gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+              "focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            )}
+          >
+            <span className="truncate">Workspace</span>
+            <ChevronsUpDown className="h-4 w-4 opacity-50" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-72">
+          {workspaces.length > 0 ? (
+            workspaces.map((workspace) => (
+              <DropdownMenuItem
+                key={workspace.workspace_id}
+                onClick={() => {
+                  handleSelectWorkspace(workspace.slug);
+                }}
+                className="flex items-center justify-between"
+              >
+                <span className="font-medium">{workspace.name}</span>
+                {workspace.slug === currentWorkspace?.slug ? (
+                  <Check className="h-4 w-4" />
+                ) : null}
+              </DropdownMenuItem>
+            ))
+          ) : (
+            <DropdownMenuItem disabled>
+              No workspaces available
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            onClick={() => {
+              setCreateDialogOpen(true);
+            }}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Create workspace
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create workspace</DialogTitle>
+            <DialogDescription>
+              New workspaces inherit the current user as owner and are isolated
+              from the active workspace.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="workspace-name">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. Keep it short and easy to
+                share.
+              </p>
+            </div>
+            <Button onClick={handleCreateWorkspace} disabled={isCreating}>
+              {isCreating ? "Creating…" : "Create workspace"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/features/shared/components/top-navigation/studio-brand.tsx

@@ -0,0 +1,59 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { Badge } from "@/design-system/ui/badge";
+import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
+import {
+  getWorkspaceGalleryPath,
+  getWorkspaceSlugFromPathname,
+} from "@/lib/workspace-routing";
+
+export default function StudioBrand() {
+  const { pathname } = useLocation();
+  const workspaceSlug =
+    getWorkspaceSlugFromPathname(pathname) ?? getSelectedWorkspaceSlug();
+
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <Link
+        to={getWorkspaceGalleryPath(workspaceSlug)}
+        className="flex min-w-0 items-center gap-2 whitespace-nowrap"
+      >
+        <img src="/favicon.ico" alt="Orcheo Logo" className="h-6 w-6" />
+        <div className="flex min-w-0 flex-col leading-tight">
+          <span className="truncate font-semibold text-foreground">Orcheo</span>
+          <span className="text-[11px] text-muted-foreground">
+            by AI Colleagues
+          </span>
+        </div>
+      </Link>
+
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label="Beta badge"
+              className="inline-flex cursor-help items-center rounded-md border-0 bg-transparent p-0 text-inherit outline-none"
+            >
+              <Badge
+                variant="outline"
+                className="border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-amber-700 shadow-none dark:text-amber-300"
+              >
+                Beta
+              </Badge>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="max-w-xs">
+            This environment is experimental. Data created here may be reset,
+            deleted, or not migrated to the launched version.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}

package/src/features/shared/components/top-navigation/top-navigation-types.ts

@@ -0,0 +1,22 @@
+import type {
+  Credential,
+  CredentialInput,
+  CredentialUpdateInput,
+} from "@features/workflow/types/credential-vault";
+
+export interface TopNavigationProps {
+  currentWorkflow?: {
+    name: string;
+    onNameChange?: (name: string) => void;
+  };
+  className?: string;
+  credentials?: Credential[];
+  isCredentialsLoading?: boolean;
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+  onUpdateCredential?: (
+    id: string,
+    updates: CredentialUpdateInput,
+  ) => Promise<void> | void;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+  onRevealCredentialSecret?: (id: string) => Promise<string | null>;
+}

package/src/features/shared/components/top-navigation/version-status.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { Badge } from "@/design-system/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { getSystemInfo, type SystemInfoResponse } from "@/lib/api";
+import { getStudioVersion } from "@/lib/config";
+
+const UPDATE_CHECK_CACHE_KEY = "orcheo.studio.system_info.v1";
+const UPDATE_DISMISS_CACHE_KEY = "orcheo.studio.system_info.dismissed.v1";
+const UPDATE_CHECK_TTL_MS = 24 * 60 * 60 * 1000;
+
+interface SystemInfoCachePayload {
+  checkedAt: string;
+  payload: SystemInfoResponse;
+}
+
+interface ParsedSemver {
+  major: number;
+  minor: number;
+  patch: number;
+  prerelease: string | null;
+}
+
+const parseCache = (raw: string | null): SystemInfoCachePayload | null => {
+  if (!raw) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw) as Partial<SystemInfoCachePayload>;
+    if (!parsed.checkedAt || !parsed.payload) {
+      return null;
+    }
+    return {
+      checkedAt: parsed.checkedAt,
+      payload: parsed.payload,
+    };
+  } catch {
+    return null;
+  }
+};
+
+const shouldRefresh = (cache: SystemInfoCachePayload | null): boolean => {
+  if (!cache) {
+    return true;
+  }
+  const lastCheckedAt = Date.parse(cache.checkedAt);
+  if (Number.isNaN(lastCheckedAt)) {
+    return true;
+  }
+  return Date.now() - lastCheckedAt >= UPDATE_CHECK_TTL_MS;
+};
+
+const parseSemver = (value: string | null | undefined): ParsedSemver | null => {
+  if (!value) {
+    return null;
+  }
+  const match = value
+    .trim()
+    .match(/^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z-.]+))?(?:\+.+)?$/);
+  if (!match) {
+    return null;
+  }
+  return {
+    major: Number(match[1]),
+    minor: Number(match[2]),
+    patch: Number(match[3]),
+    prerelease: match[4] ?? null,
+  };
+};
+
+const compareSemver = (
+  current: string | null,
+  latest: string | null,
+): number => {
+  const currentParsed = parseSemver(current);
+  const latestParsed = parseSemver(latest);
+  if (!currentParsed || !latestParsed) {
+    return 0;
+  }
+  if (currentParsed.major !== latestParsed.major) {
+    return currentParsed.major - latestParsed.major;
+  }
+  if (currentParsed.minor !== latestParsed.minor) {
+    return currentParsed.minor - latestParsed.minor;
+  }
+  if (currentParsed.patch !== latestParsed.patch) {
+    return currentParsed.patch - latestParsed.patch;
+  }
+
+  if (currentParsed.prerelease === latestParsed.prerelease) {
+    return 0;
+  }
+  if (currentParsed.prerelease === null) {
+    return 1;
+  }
+  if (latestParsed.prerelease === null) {
+    return -1;
+  }
+
+  const currentParts = currentParsed.prerelease.split(".");
+  const latestParts = latestParsed.prerelease.split(".");
+  const maxLength = Math.max(currentParts.length, latestParts.length);
+  for (let index = 0; index < maxLength; index += 1) {
+    const currentPart = currentParts[index];
+    const latestPart = latestParts[index];
+    if (currentPart === undefined) {
+      return -1;
+    }
+    if (latestPart === undefined) {
+      return 1;
+    }
+    if (currentPart === latestPart) {
+      continue;
+    }
+
+    const currentNumber = Number(currentPart);
+    const latestNumber = Number(latestPart);
+    const currentIsNumeric = !Number.isNaN(currentNumber);
+    const latestIsNumeric = !Number.isNaN(latestNumber);
+    if (currentIsNumeric && latestIsNumeric) {
+      return currentNumber - latestNumber;
+    }
+    if (currentIsNumeric) {
+      return -1;
+    }
+    if (latestIsNumeric) {
+      return 1;
+    }
+    return currentPart.localeCompare(latestPart);
+  }
+  return 0;
+};
+
+const isDismissed = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const raw = window.localStorage.getItem(UPDATE_DISMISS_CACHE_KEY);
+  if (!raw) {
+    return false;
+  }
+  const dismissedAt = Date.parse(raw);
+  if (Number.isNaN(dismissedAt)) {
+    return false;
+  }
+  return Date.now() - dismissedAt < UPDATE_CHECK_TTL_MS;
+};
+
+export default function VersionStatus() {
+  const [systemInfo, setSystemInfo] = useState<SystemInfoResponse | null>(null);
+  const [dismissedReminder, setDismissedReminder] = useState<boolean>(() =>
+    isDismissed(),
+  );
+  const studioVersion = getStudioVersion();
+
+  useEffect(() => {
+    const cache = parseCache(
+      window.localStorage.getItem(UPDATE_CHECK_CACHE_KEY),
+    );
+    if (cache) {
+      setSystemInfo(cache.payload);
+    }
+
+    if (!shouldRefresh(cache)) {
+      return;
+    }
+
+    let active = true;
+    void getSystemInfo()
+      .then((payload) => {
+        if (!active) {
+          return;
+        }
+        setSystemInfo(payload);
+        const cachePayload: SystemInfoCachePayload = {
+          checkedAt: new Date().toISOString(),
+          payload,
+        };
+        window.localStorage.setItem(
+          UPDATE_CHECK_CACHE_KEY,
+          JSON.stringify(cachePayload),
+        );
+      })
+      .catch(() => {
+        // Keep UI silent when backend metadata is temporarily unavailable.
+      });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const studioUpdateAvailable = useMemo(() => {
+    if (!systemInfo) {
+      return false;
+    }
+    if (systemInfo.studio.update_available) {
+      return true;
+    }
+    return compareSemver(studioVersion, systemInfo.studio.latest_version) < 0;
+  }, [studioVersion, systemInfo]);
+
+  const showReminder =
+    ((systemInfo?.backend.update_available ?? false) ||
+      studioUpdateAvailable) &&
+    !dismissedReminder;
+
+  const versionSummary = useMemo(() => {
+    const backend = systemInfo?.backend.current_version ?? "unknown";
+    return `Orcheo ${studioVersion} · Backend ${backend}`;
+  }, [studioVersion, systemInfo]);
+
+  const updateLines = useMemo(() => {
+    if (!systemInfo) return [];
+    const lines: string[] = [];
+    if (systemInfo.backend.update_available) {
+      lines.push(
+        `Backend: ${systemInfo.backend.current_version} → ${systemInfo.backend.latest_version}`,
+      );
+    }
+    if (studioUpdateAvailable) {
+      const studioCurrent = systemInfo.studio.current_version ?? studioVersion;
+      lines.push(`Orcheo: ${studioCurrent} → ${systemInfo.studio.latest_version}`);
+    }
+    return lines;
+  }, [studioUpdateAvailable, studioVersion, systemInfo]);
+
+  const dismissUpdateReminder = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    window.localStorage.setItem(
+      UPDATE_DISMISS_CACHE_KEY,
+      new Date().toISOString(),
+    );
+    setDismissedReminder(true);
+  };
+
+  return (
+    <div
+      className="hidden md:flex items-center gap-2"
+      aria-label="Version status"
+    >
+      <span className="text-xs text-muted-foreground">{versionSummary}</span>
+      {showReminder && (
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="secondary" className="text-[10px] cursor-default">
+                Update available
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-xs">
+              <div className="space-y-1 text-xs">
+                {updateLines.map((line) => (
+                  <p key={line}>{line}</p>
+                ))}
+                <p className="pt-1 text-muted-foreground">
+                  Run: orcheo install upgrade
+                </p>
+                <button
+                  type="button"
+                  className="pt-1 text-left text-muted-foreground underline"
+                  onClick={dismissUpdateReminder}
+                >
+                  Remind me tomorrow
+                </button>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

package/src/features/shared/components/top-navigation.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import ActiveWorkspaceIndicator from "@/features/shared/components/top-navigation/active-workspace-indicator";
+import VersionStatus from "@/features/shared/components/top-navigation/version-status";
+import AccountMenu from "@/features/shared/components/top-navigation/account-menu";
+import StudioBrand from "@/features/shared/components/top-navigation/studio-brand";
+import type { TopNavigationProps } from "@/features/shared/components/top-navigation/top-navigation-types";
+
+export default function TopNavigation({
+  className,
+  credentials = [],
+  isCredentialsLoading = false,
+  onAddCredential,
+  onUpdateCredential,
+  onDeleteCredential,
+  onRevealCredentialSecret,
+}: TopNavigationProps) {
+  return (
+    <header
+      className={cn(
+        "flex h-14 shrink-0 items-center border-b border-border bg-background px-4 lg:px-6",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-3 lg:gap-6">
+        <StudioBrand />
+        <ActiveWorkspaceIndicator />
+      </div>
+
+      <div className="ml-auto flex items-center gap-2">
+        <VersionStatus />
+        <AccountMenu
+          credentials={credentials}
+          isCredentialsLoading={isCredentialsLoading}
+          onAddCredential={onAddCredential}
+          onUpdateCredential={onUpdateCredential}
+          onDeleteCredential={onDeleteCredential}
+          onRevealCredentialSecret={onRevealCredentialSecret}
+        />
+      </div>
+    </header>
+  );
+}