From 92d67413773b91f4088b3ac7d3c236d859de976b Mon Sep 17 00:00:00 2001
From: taitsengstock <taitsengstock@gmail.com>
Date: Fri, 19 Dec 2025 16:44:55 +1100
Subject: [PATCH 1/8] Improved UX for wallet integration

---
 .../overlays/add-connection-overlay.tsx       | 15 +++++++++++
 .../overlays/edit-connection-overlay.tsx      | 15 +++++++++++
 components/workflow/config/action-config.tsx  | 27 ++++++++++---------
 keeperhub/plugins/web3/index.ts               | 18 ++++---------
 plugins/registry.ts                           |  5 ++++
 5 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/components/overlays/add-connection-overlay.tsx b/components/overlays/add-connection-overlay.tsx
index 999cc2db0..2449d7f55 100644
--- a/components/overlays/add-connection-overlay.tsx
+++ b/components/overlays/add-connection-overlay.tsx
@@ -14,6 +14,9 @@ import {
   aiGatewayTeamsLoadingAtom,
 } from "@/lib/ai-gateway/state";
 import { api } from "@/lib/api-client";
+// start keeperhub
+import { getCustomIntegrationFormHandler } from "@/lib/extension-registry";
+// end keeperhub
 import type { IntegrationType } from "@/lib/types/integration";
 import {
   getIntegration,
@@ -361,6 +364,18 @@ export function ConfigureConnectionOverlay({
 
   // Render config fields
   const renderConfigFields = () => {
+    // start keeperhub - check for custom form handlers (e.g., web3 wallet)
+    const customHandler = getCustomIntegrationFormHandler(type);
+    if (customHandler) {
+      return customHandler({
+        integrationType: type,
+        isEditMode: false,
+        config,
+        updateConfig,
+      });
+    }
+    // end keeperhub
+
     if (type === "database") {
       return (
         <SecretField
diff --git a/components/overlays/edit-connection-overlay.tsx b/components/overlays/edit-connection-overlay.tsx
index 10e7b7f6f..3d43c4b72 100644
--- a/components/overlays/edit-connection-overlay.tsx
+++ b/components/overlays/edit-connection-overlay.tsx
@@ -9,7 +9,10 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { api, type Integration } from "@/lib/api-client";
+// start keeperhub
+import { getCustomIntegrationFormHandler } from "@/lib/extension-registry";
 import { getIntegration, getIntegrationLabels } from "@/plugins";
+// end keeperhub
 import { ConfirmOverlay } from "./confirm-overlay";
 import { Overlay } from "./overlay";
 import { useOverlay } from "./overlay-provider";
@@ -267,6 +270,18 @@ export function EditConnectionOverlay({
 
   // Render config fields
   const renderConfigFields = () => {
+    // start keeperhub - check for custom form handlers (e.g., web3 wallet display)
+    const customHandler = getCustomIntegrationFormHandler(integration.type);
+    if (customHandler) {
+      return customHandler({
+        integrationType: integration.type,
+        isEditMode: true,
+        config,
+        updateConfig,
+      });
+    }
+    // end keeperhub
+
     if (integration.type === "database") {
       return (
         <SecretField
diff --git a/components/workflow/config/action-config.tsx b/components/workflow/config/action-config.tsx
index 8a1d7f6dc..b85ec4148 100644
--- a/components/workflow/config/action-config.tsx
+++ b/components/workflow/config/action-config.tsx
@@ -26,7 +26,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-// start keeperhub
 import { integrationRequiresCredentials } from "@/keeperhub/lib/integration-helpers";
 // end keeperhub
 import { aiGatewayStatusAtom } from "@/lib/ai-gateway/state";
@@ -39,6 +38,7 @@ import {
   findActionById,
   getActionsByCategory,
   getAllIntegrations,
+  getIntegration,
 } from "@/plugins";
 import { ActionConfigRenderer } from "./action-config-renderer";
 import { SchemaBuilder, type SchemaField } from "./schema-builder";
@@ -524,17 +524,20 @@ export function ActionConfig({
                 </Tooltip>
               </TooltipProvider>
             </div>
-            {hasExistingConnections && (
-              <Button
-                className="size-6"
-                disabled={disabled}
-                onClick={handleAddSecondaryConnection}
-                size="icon"
-                variant="ghost"
-              >
-                <Plus className="size-4" />
-              </Button>
-            )}
+            {/* start keeperhub - hide + button for singleConnection integrations */}
+            {hasExistingConnections &&
+              !getIntegration(integrationType)?.singleConnection && (
+                <Button
+                  className="size-6"
+                  disabled={disabled}
+                  onClick={handleAddSecondaryConnection}
+                  size="icon"
+                  variant="ghost"
+                >
+                  <Plus className="size-4" />
+                </Button>
+              )}
+            {/* end keeperhub */}
           </div>
           <IntegrationSelector
             disabled={disabled}
diff --git a/keeperhub/plugins/web3/index.ts b/keeperhub/plugins/web3/index.ts
index 9115e57a0..17b8b43aa 100644
--- a/keeperhub/plugins/web3/index.ts
+++ b/keeperhub/plugins/web3/index.ts
@@ -9,19 +9,11 @@ const web3Plugin: IntegrationPlugin = {
 
   icon: Web3Icon,
 
-  // Minimal form field - Web3 uses PARA wallet (user must create manually)
-  // This field is informational only and not used
-  formFields: [
-    {
-      id: "info",
-      label: "Para Wallet",
-      type: "text",
-      placeholder: "Create a wallet to use Web3 actions",
-      configKey: "info",
-      helpText:
-        "You'll need to create a Para wallet to use Web3 actions in your workflows.",
-    },
-  ],
+  // Web3 uses Para wallet - one wallet per user
+  singleConnection: true,
+
+  // No form fields - wallet creation is handled by the custom form handler
+  formFields: [],
 
   // No test function needed - no credentials to test
   // testConfig is optional, so we omit it
diff --git a/plugins/registry.ts b/plugins/registry.ts
index defe6738c..2766dc480 100644
--- a/plugins/registry.ts
+++ b/plugins/registry.ts
@@ -175,6 +175,11 @@ export type IntegrationPlugin = {
   // Defaults to true for backward compatibility
   requiresCredentials?: boolean;
 
+  // Whether only one connection is allowed per user
+  // Set to true for integrations with unique constraints (e.g., web3 wallet)
+  // When true, the "+" button to add more connections will be hidden
+  singleConnection?: boolean;
+
   // Form fields for the integration dialog
   formFields: Array<{
     id: string;

From 2454a30eb465bcd548af7f0cddab7fa75f11ddc5 Mon Sep 17 00:00:00 2001
From: Chris Tate <chris@ctate.dev>
Date: Tue, 23 Dec 2025 01:24:40 -0600
Subject: [PATCH 2/8] auto-migrate (#170)

---
 package.json            |  2 +-
 scripts/migrate-prod.ts | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 scripts/migrate-prod.ts

diff --git a/package.json b/package.json
index 3e86c840c..6d4e4659c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "description": "A template for building your own AI-driven workflow automation platform",
   "scripts": {
     "dev": "pnpm discover-plugins && next dev",
-    "build": "pnpm discover-plugins && next build",
+    "build": "tsx scripts/migrate-prod.ts && pnpm discover-plugins && next build",
     "start": "next start",
     "type-check": "tsc --noEmit",
     "check": "npx ultracite@latest check",
diff --git a/scripts/migrate-prod.ts b/scripts/migrate-prod.ts
new file mode 100644
index 000000000..e15c1f23b
--- /dev/null
+++ b/scripts/migrate-prod.ts
@@ -0,0 +1,16 @@
+import { execSync } from "child_process";
+
+const VERCEL_ENV = process.env.VERCEL_ENV;
+
+if (VERCEL_ENV === "production") {
+  console.log("Running database migrations for production...");
+  try {
+    execSync("pnpm db:migrate", { stdio: "inherit" });
+    console.log("Migrations completed successfully");
+  } catch (error) {
+    console.error("Migration failed:", error);
+    process.exit(1);
+  }
+} else {
+  console.log(`Skipping migrations (VERCEL_ENV=${VERCEL_ENV ?? "not set"})`);
+}

From 63559be230fd04aa1e74973e918adb5db8cb930c Mon Sep 17 00:00:00 2001
From: taitsengstock <taitsengstock@gmail.com>
Date: Mon, 5 Jan 2026 13:48:23 +1100
Subject: [PATCH 3/8] feat: KEEP-1164 Persistent toolbar across pages

---
 app/hub/page.tsx                              |  30 +++++
 app/layout.tsx                                |   2 +
 components/overlays/configuration-overlay.tsx |  15 ++-
 components/workflow/node-config-panel.tsx     |  65 +++++++++-
 components/workflow/workflow-canvas.tsx       |   6 -
 components/workflow/workflow-toolbar.tsx      | 120 ++++++++++++++++--
 .../components/hub/workflow-template-grid.tsx | 103 +++++++++++++++
 keeperhub/components/persistent-header.tsx    |  71 +++++++++++
 8 files changed, 385 insertions(+), 27 deletions(-)
 create mode 100644 app/hub/page.tsx
 create mode 100644 keeperhub/components/hub/workflow-template-grid.tsx
 create mode 100644 keeperhub/components/persistent-header.tsx

diff --git a/app/hub/page.tsx b/app/hub/page.tsx
new file mode 100644
index 000000000..3db0fa598
--- /dev/null
+++ b/app/hub/page.tsx
@@ -0,0 +1,30 @@
+import { desc, eq } from "drizzle-orm";
+import { WorkflowTemplateGrid } from "@/keeperhub/components/hub/workflow-template-grid";
+import { db } from "@/lib/db";
+import { workflows } from "@/lib/db/schema";
+
+export default async function HubPage() {
+  const publicWorkflows = await db
+    .select()
+    .from(workflows)
+    .where(eq(workflows.visibility, "public"))
+    .orderBy(desc(workflows.updatedAt));
+
+  const mappedWorkflows = publicWorkflows.map((workflow) => ({
+    id: workflow.id,
+    name: workflow.name,
+    description: workflow.description ?? undefined,
+    nodes: workflow.nodes,
+    edges: workflow.edges,
+    visibility: workflow.visibility,
+    createdAt: workflow.createdAt.toISOString(),
+    updatedAt: workflow.updatedAt.toISOString(),
+  }));
+
+  return (
+    <div className="container mx-auto px-4 py-4 pt-28">
+      <h1 className="mb-8 font-bold text-3xl">Public Workflows</h1>
+      <WorkflowTemplateGrid workflows={mappedWorkflows} />
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index f78df8c77..7cde23946 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,6 +13,7 @@ import { OverlayProvider } from "@/components/overlays/overlay-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { PersistentCanvas } from "@/components/workflow/persistent-canvas";
+import { WorkflowToolbar } from "@/components/workflow/workflow-toolbar";
 import { KeeperHubExtensionLoader } from "@/keeperhub/components/extension-loader";
 import { mono, sans } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
@@ -39,6 +40,7 @@ type RootLayoutProps = {
 function LayoutContent({ children }: { children: ReactNode }) {
   return (
     <ReactFlowProvider>
+      <WorkflowToolbar persistent />
       <PersistentCanvas />
       <div className="pointer-events-none relative z-10">{children}</div>
     </ReactFlowProvider>
diff --git a/components/overlays/configuration-overlay.tsx b/components/overlays/configuration-overlay.tsx
index 0a7ea007e..0baaf5ee7 100644
--- a/components/overlays/configuration-overlay.tsx
+++ b/components/overlays/configuration-overlay.tsx
@@ -94,6 +94,7 @@ export function ConfigurationOverlay({ overlayId }: ConfigurationOverlayProps) {
     currentWorkflowNameAtom
   );
   const isOwner = useAtomValue(isWorkflowOwnerAtom);
+
   const updateNodeData = useSetAtom(updateNodeDataAtom);
   const deleteNode = useSetAtom(deleteNodeAtom);
   const deleteEdge = useSetAtom(deleteEdgeAtom);
@@ -111,6 +112,7 @@ export function ConfigurationOverlay({ overlayId }: ConfigurationOverlayProps) {
 
   // Auto-fix invalid integration references
   const globalIntegrations = useAtomValue(integrationsAtom);
+
   useEffect(() => {
     if (!(selectedNode && isOwner)) {
       return;
@@ -465,17 +467,26 @@ export function ConfigurationOverlay({ overlayId }: ConfigurationOverlayProps) {
                   </p>
                 </div>
               )}
-              {isOwner && (
+              {isOwner ? (
                 <div className="flex items-center gap-2 pt-2">
                   <Button onClick={handleClearWorkflow} variant="ghost">
                     <Eraser className="mr-2 size-4" />
                     Clear
                   </Button>
-                  <Button onClick={handleDeleteWorkflow} variant="ghost">
+                  <Button
+                    data-testid="delete-workflow-button"
+                    onClick={() => handleDeleteWorkflow()}
+                    type="button"
+                    variant="ghost"
+                  >
                     <Trash2 className="mr-2 size-4" />
                     Delete
                   </Button>
                 </div>
+              ) : (
+                <div className="text-red-500 text-xs">
+                  DEBUG: isOwner is false - Delete button not rendered
+                </div>
               )}
             </div>
           )}
diff --git a/components/workflow/node-config-panel.tsx b/components/workflow/node-config-panel.tsx
index 0383c5d23..3bfb2b557 100644
--- a/components/workflow/node-config-panel.tsx
+++ b/components/workflow/node-config-panel.tsx
@@ -10,6 +10,8 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { ConfirmOverlay } from "@/components/overlays/confirm-overlay";
+import { useOverlay } from "@/components/overlays/overlay-provider";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -30,6 +32,7 @@ import type { IntegrationType } from "@/lib/types/integration";
 import { generateWorkflowCode } from "@/lib/workflow-codegen";
 import {
   clearNodeStatusesAtom,
+  clearWorkflowAtom,
   currentWorkflowIdAtom,
   currentWorkflowNameAtom,
   deleteEdgeAtom,
@@ -48,9 +51,7 @@ import {
   showDeleteDialogAtom,
   updateNodeDataAtom,
 } from "@/lib/workflow-store";
-
 import { findActionById } from "@/plugins";
-
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ActionConfig } from "./config/action-config";
 import { ActionGrid } from "./config/action-grid";
@@ -161,9 +162,61 @@ export const PanelInner = () => {
   const deleteNode = useSetAtom(deleteNodeAtom);
   const deleteEdge = useSetAtom(deleteEdgeAtom);
   const deleteSelectedItems = useSetAtom(deleteSelectedItemsAtom);
-  const setShowClearDialog = useSetAtom(showClearDialogAtom);
-  const setShowDeleteDialog = useSetAtom(showDeleteDialogAtom);
+  const [showClearDialog, setShowClearDialog] = useAtom(showClearDialogAtom);
+  const [showDeleteDialog, setShowDeleteDialog] = useAtom(showDeleteDialogAtom);
   const clearNodeStatuses = useSetAtom(clearNodeStatusesAtom);
+  const clearWorkflow = useSetAtom(clearWorkflowAtom);
+  const { open: openOverlay } = useOverlay();
+
+  // Watch showDeleteDialog atom and open overlay when it becomes true
+  useEffect(() => {
+    if (showDeleteDialog) {
+      openOverlay(ConfirmOverlay, {
+        title: "Delete Workflow",
+        message: `Are you sure you want to delete "${currentWorkflowName}"? This will permanently delete the workflow. This cannot be undone.`,
+        confirmLabel: "Delete Workflow",
+        confirmVariant: "destructive" as const,
+        destructive: true,
+        onConfirm: async () => {
+          if (!currentWorkflowId) {
+            return;
+          }
+          try {
+            await api.workflow.delete(currentWorkflowId);
+            toast.success("Workflow deleted successfully");
+            window.location.href = "/";
+          } catch (error) {
+            toast.error("Failed to delete workflow. Please try again.");
+          }
+        },
+      });
+      setShowDeleteDialog(false);
+    }
+  }, [
+    showDeleteDialog,
+    currentWorkflowId,
+    currentWorkflowName,
+    openOverlay,
+    setShowDeleteDialog,
+  ]);
+
+  // Watch showClearDialog atom and open overlay when it becomes true
+  useEffect(() => {
+    if (showClearDialog) {
+      openOverlay(ConfirmOverlay, {
+        title: "Clear Workflow",
+        message:
+          "Are you sure you want to clear all nodes and connections? This action cannot be undone.",
+        confirmLabel: "Clear Workflow",
+        confirmVariant: "destructive" as const,
+        destructive: true,
+        onConfirm: () => {
+          clearWorkflow();
+        },
+      });
+      setShowClearDialog(false);
+    }
+  }, [showClearDialog, openOverlay, clearWorkflow, setShowClearDialog]);
   const setPendingIntegrationNodes = useSetAtom(pendingIntegrationNodesAtom);
   const [newlyCreatedNodeId, setNewlyCreatedNodeId] = useAtom(
     newlyCreatedNodeIdAtom
@@ -632,7 +685,9 @@ export const PanelInner = () => {
                   </Button>
                   <Button
                     className="text-muted-foreground"
-                    onClick={() => setShowDeleteDialog(true)}
+                    onClick={() => {
+                      setShowDeleteDialog(true);
+                    }}
                     size="sm"
                     variant="ghost"
                   >
diff --git a/components/workflow/workflow-canvas.tsx b/components/workflow/workflow-canvas.tsx
index d7bf11af1..154478e3f 100644
--- a/components/workflow/workflow-canvas.tsx
+++ b/components/workflow/workflow-canvas.tsx
@@ -17,7 +17,6 @@ import { Canvas } from "@/components/ai-elements/canvas";
 import { Connection } from "@/components/ai-elements/connection";
 import { Controls } from "@/components/ai-elements/controls";
 import { AIPrompt } from "@/components/ai-elements/prompt";
-import { WorkflowToolbar } from "@/components/workflow/workflow-toolbar";
 import "@xyflow/react/dist/style.css";
 
 import { PlayCircle, Zap } from "lucide-react";
@@ -458,11 +457,6 @@ export function WorkflowCanvas() {
           : "opacity 300ms",
       }}
     >
-      {/* Toolbar */}
-      <div className="pointer-events-auto">
-        <WorkflowToolbar workflowId={currentWorkflowId ?? undefined} />
-      </div>
-
       {/* React Flow Canvas */}
       <Canvas
         className="bg-background"
diff --git a/components/workflow/workflow-toolbar.tsx b/components/workflow/workflow-toolbar.tsx
index a708df69d..f2c55d988 100644
--- a/components/workflow/workflow-toolbar.tsx
+++ b/components/workflow/workflow-toolbar.tsx
@@ -19,7 +19,9 @@ import {
   Undo2,
 } from "lucide-react";
 import { nanoid } from "nanoid";
-import { useRouter } from "next/navigation";
+// start custom KeeperHub code
+import { usePathname, useRouter } from "next/navigation";
+// end custom KeeperHub code
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -88,6 +90,7 @@ import { UserMenu } from "../workflows/user-menu";
 
 type WorkflowToolbarProps = {
   workflowId?: string;
+  persistent?: boolean;
 };
 
 // Helper functions to reduce complexity
@@ -1387,14 +1390,28 @@ function WorkflowMenuComponent({
   state: ReturnType<typeof useWorkflowState>;
   actions: ReturnType<typeof useWorkflowActions>;
 }) {
+  // start custom KeeperHub code
+  const pathname = usePathname();
+  const isHubPage = pathname === "/hub";
+  // end custom KeeperHub code
+
   return (
     <div className="flex flex-col gap-1">
       <div className="flex h-9 max-w-[160px] items-center overflow-hidden rounded-md border bg-secondary text-secondary-foreground sm:max-w-none">
         <DropdownMenu onOpenChange={(open) => open && actions.loadWorkflows()}>
           <DropdownMenuTrigger className="flex h-full cursor-pointer items-center gap-2 px-3 font-medium text-sm transition-all hover:bg-black/5 dark:hover:bg-white/5">
-            <WorkflowIcon className="size-4 shrink-0" />
+            {/* start custom KeeperHub code */}
+            {isHubPage ? (
+              <Globe className="size-4 shrink-0" />
+            ) : (
+              <WorkflowIcon className="size-4 shrink-0" />
+            )}
+            {/* end custom KeeperHub code */}
             <p className="truncate font-medium text-sm">
-              {workflowId ? (
+              {/* start custom KeeperHub code */}
+              {isHubPage ? (
+                "Hub"
+              ) : workflowId ? (
                 state.workflowName
               ) : (
                 <>
@@ -1402,6 +1419,7 @@ function WorkflowMenuComponent({
                   <span className="hidden sm:inline">New Workflow</span>
                 </>
               )}
+              {/* end custom KeeperHub code */}
             </p>
             <ChevronDown className="size-3 shrink-0 opacity-50" />
           </DropdownMenuTrigger>
@@ -1411,8 +1429,11 @@ function WorkflowMenuComponent({
               className="flex items-center justify-between"
             >
               <a href="/">
-                New Workflow{" "}
-                {!workflowId && <Check className="size-4 shrink-0" />}
+                New Workflow {/* start custom KeeperHub code */}
+                {!(workflowId || isHubPage) && (
+                  <Check className="size-4 shrink-0" />
+                )}
+                {/* end custom KeeperHub code */}
               </a>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -1427,12 +1448,12 @@ function WorkflowMenuComponent({
             </DropdownMenuItem>
             <DropdownMenuItem
               className="flex items-center justify-between"
-              disabled
+              onClick={() => state.router.push("/hub")}
             >
               <span>Hub</span>
-              <span className="rounded-full bg-muted px-2 py-0.5 font-medium text-muted-foreground text-xs">
-                Coming Soon
-              </span>
+              {/* start custom KeeperHub code */}
+              {isHubPage && <Check className="size-4 shrink-0" />}
+              {/* end custom KeeperHub code */}
             </DropdownMenuItem>
             <DropdownMenuItem
               className="flex items-center justify-between"
@@ -1476,10 +1497,81 @@ function WorkflowMenuComponent({
   );
 }
 
-export const WorkflowToolbar = ({ workflowId }: WorkflowToolbarProps) => {
+export const WorkflowToolbar = ({
+  workflowId,
+  persistent = false,
+}: WorkflowToolbarProps) => {
   const state = useWorkflowState();
   const actions = useWorkflowActions(state);
 
+  // Use prop if provided, otherwise fall back to atom value
+  const effectiveWorkflowId =
+    workflowId ?? state.currentWorkflowId ?? undefined;
+
+  // If persistent mode, use fixed positioning
+  const containerClassName = persistent
+    ? "pointer-events-auto fixed top-0 right-0 left-0 z-50 flex items-center justify-between border-b bg-background px-4 py-3"
+    : "";
+
+  const leftSectionClassName = persistent
+    ? "flex items-center gap-2"
+    : "flex flex-col gap-2 rounded-none border-none bg-transparent p-0 lg:flex-row lg:items-center";
+
+  const rightSectionClassName = persistent
+    ? "flex items-center gap-2"
+    : "pointer-events-auto absolute top-4 right-4 z-10";
+
+  const rightContentClassName = persistent
+    ? "flex items-center gap-2"
+    : "flex flex-col-reverse items-end gap-2 lg:flex-row lg:items-center";
+
+  if (persistent) {
+    return (
+      <div className={containerClassName}>
+        {/* Left side: Logo + Menu */}
+        <div className={leftSectionClassName}>
+          {(() => {
+            const CustomLogo = getCustomLogo();
+            return CustomLogo ? (
+              <CustomLogo className="size-7 shrink-0" />
+            ) : null;
+          })()}
+          <WorkflowMenuComponent
+            actions={actions}
+            state={state}
+            workflowId={effectiveWorkflowId}
+          />
+          {effectiveWorkflowId && !state.isOwner && (
+            <span className="hidden text-muted-foreground text-xs uppercase lg:inline">
+              Read-only
+            </span>
+          )}
+        </div>
+
+        {/* Right side: Actions + User Menu */}
+        <div className={rightSectionClassName}>
+          <div className={rightContentClassName}>
+            <ToolbarActions
+              actions={actions}
+              state={state}
+              workflowId={effectiveWorkflowId}
+            />
+            <div className="flex items-center gap-2">
+              {effectiveWorkflowId && !state.isOwner && (
+                <DuplicateButton
+                  isDuplicating={state.isDuplicating}
+                  onDuplicate={actions.handleDuplicate}
+                />
+              )}
+              <UserMenu />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Original non-persistent layout for workflow canvas
   return (
     <>
       <Panel
@@ -1496,9 +1588,9 @@ export const WorkflowToolbar = ({ workflowId }: WorkflowToolbarProps) => {
           <WorkflowMenuComponent
             actions={actions}
             state={state}
-            workflowId={workflowId}
+            workflowId={effectiveWorkflowId}
           />
-          {workflowId && !state.isOwner && (
+          {effectiveWorkflowId && !state.isOwner && (
             <span className="hidden text-muted-foreground text-xs uppercase lg:inline">
               Read-only
             </span>
@@ -1511,10 +1603,10 @@ export const WorkflowToolbar = ({ workflowId }: WorkflowToolbarProps) => {
           <ToolbarActions
             actions={actions}
             state={state}
-            workflowId={workflowId}
+            workflowId={effectiveWorkflowId}
           />
           <div className="flex items-center gap-2">
-            {workflowId && !state.isOwner && (
+            {effectiveWorkflowId && !state.isOwner && (
               <DuplicateButton
                 isDuplicating={state.isDuplicating}
                 onDuplicate={actions.handleDuplicate}
diff --git a/keeperhub/components/hub/workflow-template-grid.tsx b/keeperhub/components/hub/workflow-template-grid.tsx
new file mode 100644
index 000000000..5c11bbebf
--- /dev/null
+++ b/keeperhub/components/hub/workflow-template-grid.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { api, type SavedWorkflow } from "@/lib/api-client";
+
+type WorkflowTemplateGridProps = {
+  workflows: SavedWorkflow[];
+};
+
+export function WorkflowTemplateGrid({ workflows }: WorkflowTemplateGridProps) {
+  const router = useRouter();
+  const [duplicatingIds, setDuplicatingIds] = useState<Set<string>>(new Set());
+
+  const handleDuplicate = async (workflowId: string) => {
+    if (duplicatingIds.has(workflowId)) {
+      return;
+    }
+
+    setDuplicatingIds((prev) => new Set(prev).add(workflowId));
+
+    try {
+      const duplicated = await api.workflow.duplicate(workflowId);
+      toast.success("Workflow duplicated successfully");
+      router.push(`/workflows/${duplicated.id}`);
+    } catch (error) {
+      console.error("Failed to duplicate workflow:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to duplicate workflow"
+      );
+    } finally {
+      setDuplicatingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(workflowId);
+        return next;
+      });
+    }
+  };
+
+  if (workflows.length === 0) {
+    return (
+      <div className="">
+        <p className="text-muted-foreground">
+          No public workflows available yet.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="grid gap-4"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+      }}
+    >
+      {workflows.map((workflow) => {
+        const isDuplicating = duplicatingIds.has(workflow.id);
+        const nodeCount = Array.isArray(workflow.nodes)
+          ? workflow.nodes.length
+          : 0;
+
+        return (
+          <Card className="flex flex-col" key={workflow.id}>
+            <CardHeader>
+              <CardTitle className="line-clamp-2">{workflow.name}</CardTitle>
+              {workflow.description && (
+                <CardDescription className="line-clamp-2">
+                  {workflow.description}
+                </CardDescription>
+              )}
+            </CardHeader>
+            <CardContent className="flex-1">
+              <div className="text-muted-foreground text-sm">
+                {nodeCount} {nodeCount === 1 ? "node" : "nodes"}
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button
+                className="w-full"
+                disabled={isDuplicating}
+                onClick={() => handleDuplicate(workflow.id)}
+                variant="default"
+              >
+                {isDuplicating ? "Duplicating..." : "Use Template"}
+              </Button>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/keeperhub/components/persistent-header.tsx b/keeperhub/components/persistent-header.tsx
new file mode 100644
index 000000000..99b969603
--- /dev/null
+++ b/keeperhub/components/persistent-header.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { Check, ChevronDown } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { WorkflowIcon } from "@/components/ui/workflow-icon";
+import { UserMenu } from "@/components/workflows/user-menu";
+import { getCustomLogo } from "@/lib/extension-registry";
+
+export function PersistentHeader() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Only show on non-workflow pages (workflow pages have their own toolbar)
+  const isWorkflowPage = pathname === "/" || pathname.startsWith("/workflows/");
+
+  if (isWorkflowPage) {
+    return null;
+  }
+
+  const CustomLogo = getCustomLogo();
+
+  return (
+    <div className="pointer-events-auto fixed top-0 right-0 left-0 z-50 flex items-center justify-between border-b bg-background px-4 py-3">
+      {/* Left side: Logo + Menu */}
+      <div className="flex items-center gap-2">
+        {CustomLogo && <CustomLogo className="size-7 shrink-0" />}
+        <div className="flex h-9 max-w-[160px] items-center overflow-hidden rounded-md border bg-secondary text-secondary-foreground sm:max-w-none">
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex h-full cursor-pointer items-center gap-2 px-3 font-medium text-sm transition-all hover:bg-black/5 dark:hover:bg-white/5">
+              <WorkflowIcon className="size-4 shrink-0" />
+              <p className="truncate font-medium text-sm">
+                <span className="sm:hidden">Menu</span>
+                <span className="hidden sm:inline">Menu</span>
+              </p>
+              <ChevronDown className="size-3 shrink-0 opacity-50" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-64">
+              <DropdownMenuItem
+                asChild
+                className="flex items-center justify-between"
+              >
+                <Link href="/">New Workflow</Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="flex items-center justify-between"
+                onClick={() => router.push("/hub")}
+              >
+                <span>Hub</span>
+                {pathname === "/hub" && <Check className="size-4 shrink-0" />}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Right side: User Menu */}
+      <div className="flex items-center gap-2">
+        <UserMenu />
+      </div>
+    </div>
+  );
+}

From c9a49c5de78aee35c4d7ba01fe0d6cdde94c4400 Mon Sep 17 00:00:00 2001
From: taitsengstock <taitsengstock@gmail.com>
Date: Mon, 5 Jan 2026 15:29:50 +1100
Subject: [PATCH 4/8] Allow users to use templates to create workflows

---
 app/hub/page.tsx                              |  8 ++++---
 app/layout.tsx                                | 15 +-----------
 components/layout-content.tsx                 | 16 +++++++++++++
 components/workflow/node-config-panel.tsx     |  2 +-
 components/workflow/workflow-canvas.tsx       |  1 -
 components/workflow/workflow-toolbar.tsx      | 24 +++++++++++--------
 config/beta-allowlist.json                    |  4 ++++
 .../components/hub/workflow-template-grid.tsx |  9 +++++++
 lib/steps/index.ts                            | 16 ++++++-------
 scripts/job-spawner.ts                        |  5 +++-
 10 files changed, 62 insertions(+), 38 deletions(-)
 create mode 100644 components/layout-content.tsx

diff --git a/app/hub/page.tsx b/app/hub/page.tsx
index 3db0fa598..db42aa174 100644
--- a/app/hub/page.tsx
+++ b/app/hub/page.tsx
@@ -22,9 +22,11 @@ export default async function HubPage() {
   }));
 
   return (
-    <div className="container mx-auto px-4 py-4 pt-28">
-      <h1 className="mb-8 font-bold text-3xl">Public Workflows</h1>
-      <WorkflowTemplateGrid workflows={mappedWorkflows} />
+    <div className="pointer-events-auto">
+      <div className="container mx-auto px-4 py-4 pt-28">
+        <h1 className="mb-8 font-bold text-3xl">Public Workflows</h1>
+        <WorkflowTemplateGrid workflows={mappedWorkflows} />
+      </div>
     </div>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 7cde23946..369809a39 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,18 +2,16 @@ import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { ReactFlowProvider } from "@xyflow/react";
 import { Provider } from "jotai";
 import { type ReactNode, Suspense } from "react";
 import { AuthProvider } from "@/components/auth/provider";
 import { GitHubStarsLoader } from "@/components/github-stars-loader";
 import { GitHubStarsProvider } from "@/components/github-stars-provider";
 import { GlobalModals } from "@/components/global-modals";
+import { LayoutContent } from "@/components/layout-content";
 import { OverlayProvider } from "@/components/overlays/overlay-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import { PersistentCanvas } from "@/components/workflow/persistent-canvas";
-import { WorkflowToolbar } from "@/components/workflow/workflow-toolbar";
 import { KeeperHubExtensionLoader } from "@/keeperhub/components/extension-loader";
 import { mono, sans } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
@@ -36,17 +34,6 @@ type RootLayoutProps = {
   children: ReactNode;
 };
 
-// Inner content wrapped by GitHubStarsProvider (used for both loading and loaded states)
-function LayoutContent({ children }: { children: ReactNode }) {
-  return (
-    <ReactFlowProvider>
-      <WorkflowToolbar persistent />
-      <PersistentCanvas />
-      <div className="pointer-events-none relative z-10">{children}</div>
-    </ReactFlowProvider>
-  );
-}
-
 const RootLayout = ({ children }: RootLayoutProps) => (
   <html lang="en" suppressHydrationWarning>
     <body className={cn(sans.variable, mono.variable, "antialiased")}>
diff --git a/components/layout-content.tsx b/components/layout-content.tsx
new file mode 100644
index 000000000..f5cb7a01d
--- /dev/null
+++ b/components/layout-content.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactFlowProvider } from "@xyflow/react";
+import type { ReactNode } from "react";
+import { PersistentCanvas } from "@/components/workflow/persistent-canvas";
+import { WorkflowToolbar } from "@/components/workflow/workflow-toolbar";
+
+export function LayoutContent({ children }: { children: ReactNode }) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowToolbar persistent />
+      <PersistentCanvas />
+      <div className="pointer-events-none relative z-10">{children}</div>
+    </ReactFlowProvider>
+  );
+}
diff --git a/components/workflow/node-config-panel.tsx b/components/workflow/node-config-panel.tsx
index 3bfb2b557..e373e3960 100644
--- a/components/workflow/node-config-panel.tsx
+++ b/components/workflow/node-config-panel.tsx
@@ -185,7 +185,7 @@ export const PanelInner = () => {
             await api.workflow.delete(currentWorkflowId);
             toast.success("Workflow deleted successfully");
             window.location.href = "/";
-          } catch (error) {
+          } catch (_error) {
             toast.error("Failed to delete workflow. Please try again.");
           }
         },
diff --git a/components/workflow/workflow-canvas.tsx b/components/workflow/workflow-canvas.tsx
index 154478e3f..6f1285c5a 100644
--- a/components/workflow/workflow-canvas.tsx
+++ b/components/workflow/workflow-canvas.tsx
@@ -76,7 +76,6 @@ const edgeTypes = {
   temporary: Edge.Temporary,
 };
 
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: React Flow canvas requires complex setup
 export function WorkflowCanvas() {
   const [nodes, setNodes] = useAtom(nodesAtom);
   const [edges, setEdges] = useAtom(edgesAtom);
diff --git a/components/workflow/workflow-toolbar.tsx b/components/workflow/workflow-toolbar.tsx
index f2c55d988..b838a9021 100644
--- a/components/workflow/workflow-toolbar.tsx
+++ b/components/workflow/workflow-toolbar.tsx
@@ -1409,16 +1409,20 @@ function WorkflowMenuComponent({
             {/* end custom KeeperHub code */}
             <p className="truncate font-medium text-sm">
               {/* start custom KeeperHub code */}
-              {isHubPage ? (
-                "Hub"
-              ) : workflowId ? (
-                state.workflowName
-              ) : (
-                <>
-                  <span className="sm:hidden">New</span>
-                  <span className="hidden sm:inline">New Workflow</span>
-                </>
-              )}
+              {(() => {
+                if (isHubPage) {
+                  return "Hub";
+                }
+                if (workflowId) {
+                  return state.workflowName;
+                }
+                return (
+                  <>
+                    <span className="sm:hidden">New</span>
+                    <span className="hidden sm:inline">New Workflow</span>
+                  </>
+                );
+              })()}
               {/* end custom KeeperHub code */}
             </p>
             <ChevronDown className="size-3 shrink-0 opacity-50" />
diff --git a/config/beta-allowlist.json b/config/beta-allowlist.json
index 269dc5744..20cb7aba4 100644
--- a/config/beta-allowlist.json
+++ b/config/beta-allowlist.json
@@ -9,6 +9,10 @@
     "arty@techops.services",
     "luca@techops.services",
     "tait@techops.services",
+    "tait+local@techops.services",
+    "tait+local2@techops.services",
+    "tait+staging@techops.services",
+    "tait+staging2@techops.services",
     "engineering+keeperhub@techops.services",
     "engineering+testing@techops.services",
     "demo@keeperhub.xyz",
diff --git a/keeperhub/components/hub/workflow-template-grid.tsx b/keeperhub/components/hub/workflow-template-grid.tsx
index 5c11bbebf..4abd514f1 100644
--- a/keeperhub/components/hub/workflow-template-grid.tsx
+++ b/keeperhub/components/hub/workflow-template-grid.tsx
@@ -13,6 +13,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { api, type SavedWorkflow } from "@/lib/api-client";
+import { authClient, useSession } from "@/lib/auth-client";
 
 type WorkflowTemplateGridProps = {
   workflows: SavedWorkflow[];
@@ -20,6 +21,7 @@ type WorkflowTemplateGridProps = {
 
 export function WorkflowTemplateGrid({ workflows }: WorkflowTemplateGridProps) {
   const router = useRouter();
+  const { data: session } = useSession();
   const [duplicatingIds, setDuplicatingIds] = useState<Set<string>>(new Set());
 
   const handleDuplicate = async (workflowId: string) => {
@@ -30,6 +32,13 @@ export function WorkflowTemplateGrid({ workflows }: WorkflowTemplateGridProps) {
     setDuplicatingIds((prev) => new Set(prev).add(workflowId));
 
     try {
+      // Auto-sign in as anonymous if user has no session
+      if (!session?.user) {
+        await authClient.signIn.anonymous();
+        // Wait for session to be established
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+
       const duplicated = await api.workflow.duplicate(workflowId);
       toast.success("Workflow duplicated successfully");
       router.push(`/workflows/${duplicated.id}`);
diff --git a/lib/steps/index.ts b/lib/steps/index.ts
index af9212496..34951994d 100644
--- a/lib/steps/index.ts
+++ b/lib/steps/index.ts
@@ -7,10 +7,10 @@
  * This file is kept for backwards compatibility with system steps only.
  */
 
-import type { sendEmailStep } from "../../plugins/resend/steps/send-email";
-import type { sendSlackMessageStep } from "../../plugins/slack/steps/send-slack-message";
 import type { checkBalanceStep } from "@/keeperhub/plugins/web3/steps/check-balance";
 import type { transferFundsStep } from "@/keeperhub/plugins/web3/steps/transfer-funds";
+import type { sendEmailStep } from "../../plugins/resend/steps/send-email";
+import type { sendSlackMessageStep } from "../../plugins/slack/steps/send-slack-message";
 import type { conditionStep } from "./condition";
 import type { databaseQueryStep } from "./database-query";
 import type { httpRequestStep } from "./http-request";
@@ -41,13 +41,13 @@ export const stepRegistry: Record<string, StepFunction> = {
       await import("../../plugins/slack/steps/send-slack-message")
     ).sendSlackMessageStep(input as Parameters<typeof sendSlackMessageStep>[0]),
   "Transfer Funds": async (input) =>
-    (await import("@/keeperhub/plugins/web3/steps/transfer-funds")).transferFundsStep(
-      input as Parameters<typeof transferFundsStep>[0]
-    ),
+    (
+      await import("@/keeperhub/plugins/web3/steps/transfer-funds")
+    ).transferFundsStep(input as Parameters<typeof transferFundsStep>[0]),
   "Check Balance": async (input) =>
-    (await import("@/keeperhub/plugins/web3/steps/check-balance")).checkBalanceStep(
-      input as Parameters<typeof checkBalanceStep>[0]
-    ),
+    (
+      await import("@/keeperhub/plugins/web3/steps/check-balance")
+    ).checkBalanceStep(input as Parameters<typeof checkBalanceStep>[0]),
 };
 
 // Helper to check if a step exists
diff --git a/scripts/job-spawner.ts b/scripts/job-spawner.ts
index 3ebbc1bd1..f70945bf6 100644
--- a/scripts/job-spawner.ts
+++ b/scripts/job-spawner.ts
@@ -145,7 +145,10 @@ async function createWorkflowJob(
                 { name: "WORKFLOW_INPUT", value: JSON.stringify(input) },
                 // Pass database URL and encryption key from job-spawner's environment
                 { name: "DATABASE_URL", value: CONFIG.databaseUrl },
-                { name: "INTEGRATION_ENCRYPTION_KEY", value: process.env.INTEGRATION_ENCRYPTION_KEY || "" },
+                {
+                  name: "INTEGRATION_ENCRYPTION_KEY",
+                  value: process.env.INTEGRATION_ENCRYPTION_KEY || "",
+                },
               ],
               resources: {
                 requests: {

From 81acaeb733a2509d13a5432bda6cc7bf1bab48a6 Mon Sep 17 00:00:00 2001
From: Simon KP <simon@techops.services>
Date: Mon, 5 Jan 2026 12:40:14 +0800
Subject: [PATCH 5/8] Fix drizzle-kit path alias resolution for db migrations

Use relative imports instead of @/ path aliases in schema files
so drizzle-kit can resolve modules when running outside Next.js bundler.
---
 keeperhub/db/schema-extensions.ts | 5 +++--
 lib/db/schema.ts                  | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/keeperhub/db/schema-extensions.ts b/keeperhub/db/schema-extensions.ts
index a83afd21f..ab7d34592 100644
--- a/keeperhub/db/schema-extensions.ts
+++ b/keeperhub/db/schema-extensions.ts
@@ -9,8 +9,9 @@
  */
 
 import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
-import { users } from "@/lib/db/schema";
-import { generateId } from "@/lib/utils/id";
+// Note: Using relative paths instead of @/ aliases for drizzle-kit compatibility
+import { users } from "../../lib/db/schema";
+import { generateId } from "../../lib/utils/id";
 
 /**
  * Para Wallets table
diff --git a/lib/db/schema.ts b/lib/db/schema.ts
index afc2b7886..bd34d5b4e 100644
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -166,11 +166,12 @@ export const workflowExecutionLogs = pgTable("workflow_execution_logs", {
 
 // KeeperHub: Para Wallets table (imported from KeeperHub schema extensions)
 // biome-ignore lint/performance/noBarrelFile: Intentional re-export for schema extensions
+// Note: Using relative path instead of @/ alias for drizzle-kit compatibility
 export {
   type NewParaWallet,
   type ParaWallet,
   paraWallets,
-} from "@/keeperhub/db/schema-extensions";
+} from "../../keeperhub/db/schema-extensions";
 
 // API Keys table for webhook authentication
 export const apiKeys = pgTable("api_keys", {

From 45c7d3bd2dd4a956705d816edd2376fab8b3631a Mon Sep 17 00:00:00 2001
From: taitsengstock <taitsengstock@gmail.com>
Date: Mon, 5 Jan 2026 15:58:38 +1100
Subject: [PATCH 6/8] Build fix

---
 app/api/workflows/public/route.ts | 35 ++++++++++++++++++++++
 app/hub/page.tsx                  | 50 ++++++++++++++++++-------------
 lib/api-client.ts                 |  4 +++
 3 files changed, 69 insertions(+), 20 deletions(-)
 create mode 100644 app/api/workflows/public/route.ts

diff --git a/app/api/workflows/public/route.ts b/app/api/workflows/public/route.ts
new file mode 100644
index 000000000..17f7f6b4b
--- /dev/null
+++ b/app/api/workflows/public/route.ts
@@ -0,0 +1,35 @@
+import { desc, eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { workflows } from "@/lib/db/schema";
+
+// start custom KeeperHub code
+export async function GET() {
+  try {
+    const publicWorkflows = await db
+      .select()
+      .from(workflows)
+      .where(eq(workflows.visibility, "public"))
+      .orderBy(desc(workflows.updatedAt));
+
+    const mappedWorkflows = publicWorkflows.map((workflow) => ({
+      ...workflow,
+      createdAt: workflow.createdAt.toISOString(),
+      updatedAt: workflow.updatedAt.toISOString(),
+    }));
+
+    return NextResponse.json(mappedWorkflows);
+  } catch (error) {
+    console.error("Failed to get public workflows:", error);
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error
+            ? error.message
+            : "Failed to get public workflows",
+      },
+      { status: 500 }
+    );
+  }
+}
+// end custom KeeperHub code
diff --git a/app/hub/page.tsx b/app/hub/page.tsx
index db42aa174..1f7bfc130 100644
--- a/app/hub/page.tsx
+++ b/app/hub/page.tsx
@@ -1,31 +1,41 @@
-import { desc, eq } from "drizzle-orm";
+"use client";
+
+import { useEffect, useState } from "react";
 import { WorkflowTemplateGrid } from "@/keeperhub/components/hub/workflow-template-grid";
-import { db } from "@/lib/db";
-import { workflows } from "@/lib/db/schema";
+import { api, type SavedWorkflow } from "@/lib/api-client";
+
+export default function HubPage() {
+  // start custom KeeperHub code
+  const [workflows, setWorkflows] = useState<SavedWorkflow[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
-export default async function HubPage() {
-  const publicWorkflows = await db
-    .select()
-    .from(workflows)
-    .where(eq(workflows.visibility, "public"))
-    .orderBy(desc(workflows.updatedAt));
+  useEffect(() => {
+    const fetchPublicWorkflows = async () => {
+      try {
+        const publicWorkflows = await api.workflow.getPublic();
+        setWorkflows(publicWorkflows);
+      } catch (error) {
+        console.error("Failed to fetch public workflows:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-  const mappedWorkflows = publicWorkflows.map((workflow) => ({
-    id: workflow.id,
-    name: workflow.name,
-    description: workflow.description ?? undefined,
-    nodes: workflow.nodes,
-    edges: workflow.edges,
-    visibility: workflow.visibility,
-    createdAt: workflow.createdAt.toISOString(),
-    updatedAt: workflow.updatedAt.toISOString(),
-  }));
+    fetchPublicWorkflows();
+  }, []);
+  // end custom KeeperHub code
 
   return (
     <div className="pointer-events-auto">
       <div className="container mx-auto px-4 py-4 pt-28">
         <h1 className="mb-8 font-bold text-3xl">Public Workflows</h1>
-        <WorkflowTemplateGrid workflows={mappedWorkflows} />
+        {/* start custom KeeperHub code */}
+        {isLoading ? (
+          <p className="text-muted-foreground">Loading workflows...</p>
+        ) : (
+          <WorkflowTemplateGrid workflows={workflows} />
+        )}
+        {/* end custom KeeperHub code */}
       </div>
     </div>
   );
diff --git a/lib/api-client.ts b/lib/api-client.ts
index 3b8b382d5..1418a0cb1 100644
--- a/lib/api-client.ts
+++ b/lib/api-client.ts
@@ -438,6 +438,10 @@ export const userApi = {
 export const workflowApi = {
   // Get all workflows
   getAll: () => apiCall<SavedWorkflow[]>("/api/workflows"),
+  // start custom KeeperHub code
+  // Get public workflows
+  getPublic: () => apiCall<SavedWorkflow[]>("/api/workflows/public"),
+  // end custom KeeperHub code
 
   // Get a specific workflow
   getById: (id: string) => apiCall<SavedWorkflow>(`/api/workflows/${id}`),

From 7b81ad494e155ebf8a6b229c3a95f30227303c15 Mon Sep 17 00:00:00 2001
From: Simon KP <simon@techops.services>
Date: Mon, 5 Jan 2026 13:13:36 +0800
Subject: [PATCH 7/8] Add keeperhub directory to migrator Docker stage

The schema-extensions.ts file lives in keeperhub/db/ and needs
to be copied into the migrator container for drizzle-kit to work.
---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index f2dead431..9b08d60be 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -39,6 +39,7 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY --from=builder /app/drizzle ./drizzle
 COPY --from=builder /app/drizzle.config.ts ./drizzle.config.ts
 COPY --from=builder /app/lib ./lib
+COPY --from=builder /app/keeperhub ./keeperhub
 COPY --from=builder /app/package.json ./package.json
 
 # This stage can be used to run migrations

From 49a02e3c84a19557afea6929424ebc02e0fcc206 Mon Sep 17 00:00:00 2001
From: Simon KP <simon@techops.services>
Date: Mon, 5 Jan 2026 16:45:06 +0800
Subject: [PATCH 8/8] Update common helm chart to v0.2.1

Includes fix for serviceAccountName not being set when create=false.
---
 .github/workflows/deploy.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index d7bc60f3e..bd41ab776 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -156,7 +156,7 @@ jobs:
           timeout: 5m0s
           name: ${{ env.SERVICE_NAME }}
           chart-repository: https://techops-services.github.io/helm-charts
-          version: 0.0.33
+          version: 0.2.1
           atomic: true
 
       - name: Deploying Job Spawner to Kubernetes with Helm
@@ -171,5 +171,5 @@ jobs:
           timeout: 5m0s
           name: keeperhub-job-spawner
           chart-repository: https://techops-services.github.io/helm-charts
-          version: 0.0.33
+          version: 0.2.1
           atomic: true