orcheo-studio 0.21.1

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Skeleton } from "@/design-system/ui/skeleton";
+import { WorkflowLayout } from "@features/workflow/pages/workflow/components/workflow-layout";
+import { useWorkflowController } from "@features/workflow/pages/workflow/hooks/controller/use-workflow-controller";
+import {
+  getWorkflowById,
+  listWorkflows,
+} from "@features/workflow/lib/workflow-storage";
+import { usePageContext } from "@/hooks/use-page-context";
+
+interface WorkflowPageProps {
+  workflowId?: string;
+}
+
+export default function WorkflowPage({ workflowId }: WorkflowPageProps) {
+  const [resolvedWorkflowId, setResolvedWorkflowId] = useState<
+    string | undefined
+  >(undefined);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const resolveWorkflow = async () => {
+      if (!workflowId) {
+        setResolvedWorkflowId(undefined);
+        setLoadError(null);
+        return;
+      }
+
+      setLoadError(null);
+
+      try {
+        const directWorkflow = await getWorkflowById(workflowId);
+        if (cancelled) {
+          return;
+        }
+        if (directWorkflow) {
+          setResolvedWorkflowId(directWorkflow.id);
+          return;
+        }
+
+        const workflows = await listWorkflows({ forceRefresh: true });
+        if (cancelled) {
+          return;
+        }
+
+        const matchedWorkflow = workflows.find(
+          (workflow) =>
+            workflow.id === workflowId || workflow.handle === workflowId,
+        );
+        if (matchedWorkflow) {
+          setResolvedWorkflowId(matchedWorkflow.id);
+          return;
+        }
+
+        setResolvedWorkflowId(undefined);
+        setLoadError("Workflow not found.");
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+        setResolvedWorkflowId(undefined);
+        setLoadError(
+          error instanceof Error ? error.message : "Unable to load workflow.",
+        );
+      }
+    };
+
+    void resolveWorkflow();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [workflowId]);
+
+  const { layoutProps } = useWorkflowController(
+    resolvedWorkflowId,
+    workflowId ?? null,
+  );
+
+  const { setPageContext } = usePageContext();
+  const activeWorkflowId = layoutProps.workflowProps.workflowId ?? null;
+  const workflowName =
+    layoutProps.topNavigationProps.currentWorkflow.name ?? null;
+  const activeTab = layoutProps.tabsProps.activeTab;
+
+  useEffect(() => {
+    setPageContext({
+      page: "workflow",
+      workflowId: activeWorkflowId,
+      workflowName,
+      activeTab,
+    });
+  }, [setPageContext, activeWorkflowId, workflowName, activeTab]);
+
+  if (workflowId && !resolvedWorkflowId) {
+    if (loadError) {
+      return (
+        <div className="flex min-h-[60vh] items-center justify-center p-6">
+          <Alert className="max-w-xl">
+            <AlertTitle>Workflow unavailable</AlertTitle>
+            <AlertDescription>{loadError}</AlertDescription>
+          </Alert>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-4 p-6">
+        <Skeleton className="h-10 w-64 rounded-full" />
+        <Skeleton className="h-[72vh] w-full rounded-3xl" />
+      </div>
+    );
+  }
+
+  return <WorkflowLayout {...layoutProps} />;
+}

package/src/features/workflow/types/credential-vault.ts

@@ -0,0 +1,52 @@
+export type CredentialVaultAccessLevel = "scoped" | "shared";
+
+export type CredentialVaultHealthStatus = "healthy" | "unhealthy" | "unknown";
+
+export interface Credential {
+  id: string;
+  name: string;
+  provider?: string;
+  workflowId?: string | null;
+  createdAt: string;
+  updatedAt: string;
+  owner?: string | null;
+  access: CredentialVaultAccessLevel;
+  secrets?: Record<string, string>;
+  status?: CredentialVaultHealthStatus;
+  secretPreview?: string | null;
+}
+
+export interface CredentialInput {
+  name: string;
+  provider: string;
+  access: CredentialVaultAccessLevel;
+  secrets?: Record<string, string>;
+  owner?: string;
+}
+
+export interface CredentialUpdateInput {
+  name?: string;
+  provider?: string;
+  access?: CredentialVaultAccessLevel;
+  secrets?: Record<string, string>;
+}
+
+export interface CredentialVaultEntryResponse {
+  id: string;
+  name: string;
+  provider: string;
+  kind: "secret" | "oauth";
+  workflow_id?: string | null;
+  created_at: string;
+  updated_at: string;
+  last_rotated_at: string | null;
+  owner: string | null;
+  access: CredentialVaultAccessLevel;
+  status: CredentialVaultHealthStatus;
+  secret_preview?: string | null;
+}
+
+export interface CredentialSecretResponse {
+  id: string;
+  secret: string;
+}

package/src/hooks/browser-context-provider.tsx

@@ -0,0 +1,19 @@
+/**
+ * BrowserContextProvider — wraps the app to relay workflow page context
+ * to the local `orcheo browser-aware` HTTP server.
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { useBrowserContext } from "@/hooks/use-browser-context";
+import { BrowserContext } from "@/hooks/use-page-context";
+
+export function BrowserContextProvider({ children }: { children: ReactNode }) {
+  const { setPageContext, setVaultOpen, pageContext } = useBrowserContext();
+  const value = useMemo(
+    () => ({ setPageContext, setVaultOpen, pageContext }),
+    [setPageContext, setVaultOpen, pageContext],
+  );
+  return (
+    <BrowserContext.Provider value={value}>{children}</BrowserContext.Provider>
+  );
+}

package/src/hooks/use-browser-context.ts

@@ -0,0 +1,188 @@
+/**
+ * BrowserContextProvider — relays workflow page context to the local
+ * `orcheo browser-aware` HTTP server so coding agents stay in sync.
+ *
+ * Usage:
+ *   const { setPageContext } = useBrowserContext();
+ *   setPageContext({ page: "workflow", workflowId: "abc", workflowName: "My Flow" });
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PageContext } from "@/hooks/use-page-context";
+
+const CONTEXT_URL = "http://localhost:3333/context";
+const HEARTBEAT_ACTIVE_MS = 5_000;
+const HEARTBEAT_IDLE_MS = 30_000;
+const MAX_RETRIES = 2;
+const INITIAL_BACKOFF_MS = 500;
+const BRIDGE_UNAVAILABLE_WARNING =
+  "Browser context bridge is unavailable. Start `orcheo browser-aware` and refresh the page to reconnect.";
+
+function getOrCreateSessionId(): string {
+  const key = "orcheo_browser_session_id";
+  let id = sessionStorage.getItem(key);
+  if (!id) {
+    id = crypto.randomUUID();
+    sessionStorage.setItem(key, id);
+  }
+  return id;
+}
+
+async function postContext(
+  sessionId: string,
+  ctx: PageContext,
+  focused: boolean,
+): Promise<boolean> {
+  const body = JSON.stringify({
+    session_id: sessionId,
+    page: ctx.page,
+    workflow_id: ctx.workflowId ?? null,
+    workflow_name: ctx.workflowName ?? null,
+    focused,
+    timestamp: new Date().toISOString(),
+  });
+
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      const res = await fetch(CONTEXT_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+      });
+      if (res.ok || res.status < 500) return true;
+    } catch {
+      // Network error — retry with backoff if attempts remain.
+    }
+    if (attempt < MAX_RETRIES) {
+      await new Promise((r) =>
+        setTimeout(r, INITIAL_BACKOFF_MS * 2 ** attempt),
+      );
+    }
+  }
+
+  return false;
+}
+
+export function useBrowserContext() {
+  const sessionIdRef = useRef<string>(getOrCreateSessionId());
+  const contextRef = useRef<PageContext>({ page: "other" });
+  const heartbeatRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const disabledRef = useRef(false);
+  const warningShownRef = useRef(false);
+
+  const stopHeartbeat = useCallback(() => {
+    if (heartbeatRef.current) {
+      clearTimeout(heartbeatRef.current);
+      heartbeatRef.current = null;
+    }
+  }, []);
+
+  const disableBridge = useCallback(() => {
+    if (disabledRef.current) return;
+
+    disabledRef.current = true;
+    stopHeartbeat();
+    if (!warningShownRef.current) {
+      console.warn(BRIDGE_UNAVAILABLE_WARNING);
+      warningShownRef.current = true;
+    }
+  }, [stopHeartbeat]);
+
+  const sendContext = useCallback(
+    async (ctx: PageContext, focused: boolean) => {
+      if (disabledRef.current) return;
+
+      const ok = await postContext(sessionIdRef.current, ctx, focused);
+      if (!ok) {
+        disableBridge();
+      }
+    },
+    [disableBridge],
+  );
+
+  const startHeartbeat = useCallback(() => {
+    if (heartbeatRef.current || disabledRef.current) return;
+
+    const tick = async () => {
+      await sendContext(contextRef.current, document.hasFocus());
+      if (disabledRef.current) {
+        heartbeatRef.current = null;
+        return;
+      }
+
+      // Reduce frequency when the tab is not focused.
+      const interval = document.hasFocus()
+        ? HEARTBEAT_ACTIVE_MS
+        : HEARTBEAT_IDLE_MS;
+      heartbeatRef.current = setTimeout(() => {
+        void tick();
+      }, interval);
+    };
+    heartbeatRef.current = setTimeout(() => {
+      void tick();
+    }, HEARTBEAT_ACTIVE_MS);
+  }, [sendContext]);
+
+  // Visibility / focus listeners — start/stop heartbeat.
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") {
+        // Fire immediately on becoming visible, then start heartbeat.
+        void sendContext(contextRef.current, document.hasFocus());
+        startHeartbeat();
+      } else {
+        stopHeartbeat();
+      }
+    };
+
+    const handleFocus = () => {
+      void sendContext(contextRef.current, true);
+    };
+
+    const handleBlur = () => {
+      void sendContext(contextRef.current, false);
+    };
+
+    document.addEventListener("visibilitychange", handleVisibility);
+    window.addEventListener("focus", handleFocus);
+    window.addEventListener("blur", handleBlur);
+
+    // Start heartbeat if tab is already visible.
+    if (document.visibilityState === "visible") {
+      startHeartbeat();
+    }
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibility);
+      window.removeEventListener("focus", handleFocus);
+      window.removeEventListener("blur", handleBlur);
+      stopHeartbeat();
+    };
+  }, [sendContext, startHeartbeat, stopHeartbeat]);
+
+  const [pageContext, setPageContextState] = useState<PageContext>({
+    page: "other",
+  });
+
+  const setPageContext = useCallback(
+    (ctx: PageContext) => {
+      contextRef.current = ctx;
+      setPageContextState(ctx);
+      // Fire immediately on context change.
+      void sendContext(ctx, document.hasFocus());
+    },
+    [sendContext],
+  );
+
+  const setVaultOpen = useCallback(
+    (open: boolean) => {
+      const updated = { ...contextRef.current, vaultOpen: open };
+      contextRef.current = updated;
+      setPageContextState(updated);
+      void sendContext(updated, document.hasFocus());
+    },
+    [sendContext],
+  );
+
+  return { setPageContext, setVaultOpen, pageContext };
+}

package/src/hooks/use-color-scheme.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+
+export type ColorScheme = "light" | "dark";
+
+const getPreferredScheme = (): ColorScheme => {
+  if (typeof document !== "undefined") {
+    return document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+  }
+
+  if (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    return "dark";
+  }
+
+  return "light";
+};
+
+/**
+ * Subscribes to theme changes performed by the global preference handler and
+ * exposes the currently applied color scheme.
+ */
+export const useColorScheme = (): ColorScheme => {
+  const [scheme, setScheme] = useState<ColorScheme>(() => getPreferredScheme());
+
+  useEffect(() => {
+    if (
+      typeof MutationObserver === "undefined" ||
+      typeof document === "undefined"
+    ) {
+      return;
+    }
+
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setScheme(getPreferredScheme());
+    });
+    observer.observe(target, { attributes: true, attributeFilter: ["class"] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (event: MediaQueryListEvent) => {
+      setScheme(event.matches ? "dark" : "light");
+    };
+
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handler);
+    } else if (typeof media.addListener === "function") {
+      media.addListener(handler);
+    }
+
+    return () => {
+      if (typeof media.removeEventListener === "function") {
+        media.removeEventListener("change", handler);
+      } else if (typeof media.removeListener === "function") {
+        media.removeListener(handler);
+      }
+    };
+  }, []);
+
+  return scheme;
+};