@codemation/next-host 0.0.1

package/src/shell/WorkflowFolderTreeBuilder.ts

@@ -0,0 +1,62 @@
+import type { WorkflowSummary } from "../features/workflows/hooks/realtime/realtime";
+
+export type WorkflowFolderTreeNode = Readonly<{
+  segment: string;
+  children: ReadonlyArray<WorkflowFolderTreeNode>;
+  workflows: ReadonlyArray<WorkflowSummary>;
+}>;
+
+type MutableNode = {
+  segment: string;
+  childMap: Map<string, MutableNode>;
+  workflows: WorkflowSummary[];
+};
+
+export class WorkflowFolderTreeBuilder {
+  build(workflows: ReadonlyArray<WorkflowSummary>): WorkflowFolderTreeNode {
+    const root: MutableNode = { segment: "", childMap: new Map(), workflows: [] };
+    const sorted = [...workflows].sort((left, right) => {
+      const leftKey = (left.discoveryPathSegments ?? []).join("/");
+      const rightKey = (right.discoveryPathSegments ?? []).join("/");
+      const keyCompare = leftKey.localeCompare(rightKey);
+      if (keyCompare !== 0) {
+        return keyCompare;
+      }
+      return left.name.localeCompare(right.name);
+    });
+    for (const workflow of sorted) {
+      this.insertWorkflow(root, workflow);
+    }
+    return this.freezeNode(root);
+  }
+
+  private insertWorkflow(root: MutableNode, workflow: WorkflowSummary): void {
+    const segments = workflow.discoveryPathSegments ?? [];
+    if (segments.length === 0) {
+      root.workflows.push(workflow);
+      return;
+    }
+    const folderParts = segments.length > 1 ? segments.slice(0, -1) : [];
+    let node = root;
+    for (const part of folderParts) {
+      let next = node.childMap.get(part);
+      if (!next) {
+        next = { segment: part, childMap: new Map(), workflows: [] };
+        node.childMap.set(part, next);
+      }
+      node = next;
+    }
+    node.workflows.push(workflow);
+  }
+
+  private freezeNode(node: MutableNode): WorkflowFolderTreeNode {
+    const children = [...node.childMap.values()]
+      .sort((left, right) => left.segment.localeCompare(right.segment))
+      .map((child) => this.freezeNode(child));
+    return {
+      segment: node.segment,
+      children,
+      workflows: [...node.workflows],
+    };
+  }
+}

package/src/shell/WorkflowFolderUi.ts

@@ -0,0 +1,42 @@
+import type { WorkflowSummary } from "../features/workflows/hooks/realtime/realtime";
+
+import type { WorkflowFolderTreeNode } from "./WorkflowFolderTreeBuilder";
+
+export class WorkflowFolderUi {
+  /** Expand folders that lie on the path to the workflow open in the shell. */
+  static computeDefaultFolderOpen(
+    folderPath: readonly string[],
+    pathname: string,
+    workflows: ReadonlyArray<WorkflowSummary>,
+  ): boolean {
+    if (folderPath.length === 0) {
+      return true;
+    }
+    const match = pathname.match(/^\/workflows\/([^/]+)/);
+    if (!match) {
+      return true;
+    }
+    const active = workflows.find((w) => w.id === decodeURIComponent(match[1]!));
+    if (!active) {
+      return true;
+    }
+    const segs = active.discoveryPathSegments;
+    if (segs.length < folderPath.length) {
+      return false;
+    }
+    for (let i = 0; i < folderPath.length; i += 1) {
+      if (segs[i] !== folderPath[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  static countWorkflowsInSubtree(node: WorkflowFolderTreeNode): number {
+    let total = node.workflows.length;
+    for (const child of node.children) {
+      total += WorkflowFolderUi.countWorkflowsInSubtree(child);
+    }
+    return total;
+  }
+}

package/src/shell/WorkflowSidebarNavFolder.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+
+import { ChevronRight, Folder } from "lucide-react";
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../features/workflows/hooks/realtime/realtime";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+import type { WorkflowFolderTreeNode } from "./WorkflowFolderTreeBuilder";
+import { WorkflowFolderUi } from "./WorkflowFolderUi";
+
+import { IconWorkflow } from "./appLayoutSidebarIcons";
+
+function folderTestId(path: ReadonlyArray<string>): string {
+  return `nav-workflow-folder-${path.join("__")}`;
+}
+
+export function WorkflowSidebarNavFolder(
+  args: Readonly<{
+    node: WorkflowFolderTreeNode;
+    pathPrefix: ReadonlyArray<string>;
+    pathname: string;
+    workflows: ReadonlyArray<WorkflowSummary>;
+    workflowLinkClass: (isActive: boolean) => string;
+    depth: number;
+    collapsed?: boolean;
+  }>,
+): ReactNode {
+  const { node, pathPrefix, pathname, workflows, workflowLinkClass, depth } = args;
+  const collapsed = args.collapsed === true;
+  const folderPath = [...pathPrefix, node.segment];
+  const defaultOpen = WorkflowFolderUi.computeDefaultFolderOpen(folderPath, pathname, workflows);
+  const totalInTree = WorkflowFolderUi.countWorkflowsInSubtree(node);
+
+  return (
+    <Collapsible
+      defaultOpen={defaultOpen}
+      className={cn("rounded-lg", !collapsed && depth > 0 && "ml-0.5 border-l border-sidebar-border/60 pl-2")}
+    >
+      <CollapsibleTrigger
+        type="button"
+        data-testid={folderTestId(folderPath)}
+        aria-label={collapsed ? folderPath.join(" / ") : undefined}
+        className={cn(
+          "group/trigger flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none transition-colors",
+          collapsed && "justify-center px-1 py-2",
+          "text-sidebar-foreground/90 hover:bg-sidebar-accent/70",
+          "focus-visible:ring-2 focus-visible:ring-sidebar-ring/40",
+          "[&[data-state=open]>svg:first-child]:rotate-90",
+        )}
+      >
+        <ChevronRight
+          className="size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 ease-out"
+          aria-hidden
+        />
+        <Folder className="size-3.5 shrink-0 text-primary/70" aria-hidden />
+        {!collapsed && (
+          <>
+            <span className="min-w-0 flex-1 truncate font-medium">{node.segment}</span>
+            <span className="shrink-0 rounded-md bg-sidebar-accent/80 px-1.5 py-0.5 text-[0.65rem] font-semibold tabular-nums text-muted-foreground">
+              {totalInTree}
+            </span>
+          </>
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className={cn("space-y-0.5 pb-1 pt-0.5", collapsed ? "pl-0" : "pl-1")}>
+          {node.workflows.map((w) => {
+            const href = `/workflows/${encodeURIComponent(w.id)}`;
+            const isActive = pathname === href;
+            return (
+              <Link
+                key={w.id}
+                href={href}
+                className={workflowLinkClass(isActive)}
+                data-testid={`nav-workflow-${w.id}`}
+                aria-label={
+                  collapsed
+                    ? w.discoveryPathSegments.length > 0
+                      ? w.discoveryPathSegments.join(" / ")
+                      : w.name
+                    : undefined
+                }
+              >
+                <span className="flex shrink-0 opacity-70" aria-hidden>
+                  <IconWorkflow />
+                </span>
+                {!collapsed && <span className="truncate text-sm">{w.name}</span>}
+              </Link>
+            );
+          })}
+          {node.children.map((child) => (
+            <WorkflowSidebarNavFolder
+              key={child.segment}
+              node={child}
+              pathPrefix={folderPath}
+              pathname={pathname}
+              workflows={workflows}
+              workflowLinkClass={workflowLinkClass}
+              depth={depth + 1}
+              collapsed={collapsed}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/shell/WorkflowSidebarNavTree.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../features/workflows/hooks/realtime/realtime";
+
+import { WorkflowFolderTreeBuilder } from "./WorkflowFolderTreeBuilder";
+
+import { WorkflowSidebarNavFolder } from "./WorkflowSidebarNavFolder";
+
+import { IconWorkflow } from "./appLayoutSidebarIcons";
+
+const treeBuilder = new WorkflowFolderTreeBuilder();
+
+export function WorkflowSidebarNavTree(
+  args: Readonly<{
+    workflows: ReadonlyArray<WorkflowSummary>;
+    pathname: string;
+    workflowLinkClass: (isActive: boolean) => string;
+    /** Icon-only / compact layout (collapsed shell sidebar). */
+    collapsed?: boolean;
+  }>,
+): ReactNode {
+  const tree = treeBuilder.build(args.workflows);
+  const collapsed = args.collapsed === true;
+  return (
+    <div className="space-y-0.5" data-testid="workflow-sidebar-nav-tree">
+      {tree.workflows.map((w) => {
+        const href = `/workflows/${encodeURIComponent(w.id)}`;
+        const isActive = args.pathname === href;
+        return (
+          <Link
+            key={w.id}
+            href={href}
+            className={args.workflowLinkClass(isActive)}
+            data-testid={`nav-workflow-${w.id}`}
+            aria-label={
+              collapsed
+                ? w.discoveryPathSegments.length > 0
+                  ? w.discoveryPathSegments.join(" / ")
+                  : w.name
+                : undefined
+            }
+          >
+            <span className="flex shrink-0 opacity-70" aria-hidden>
+              <IconWorkflow />
+            </span>
+            {!collapsed && <span className="truncate text-sm">{w.name}</span>}
+          </Link>
+        );
+      })}
+      {tree.children.map((child) => (
+        <WorkflowSidebarNavFolder
+          key={child.segment}
+          node={child}
+          pathPrefix={[]}
+          pathname={args.pathname}
+          workflows={args.workflows}
+          workflowLinkClass={args.workflowLinkClass}
+          depth={0}
+          collapsed={collapsed}
+        />
+      ))}
+    </div>
+  );
+}

package/src/shell/appLayoutPageTitle.ts

@@ -0,0 +1,16 @@
+export function getPageTitle(
+  pathname: string,
+  workflows: ReadonlyArray<{ id: string; name: string }>,
+  shellDefaultTitle: string,
+): string {
+  if (pathname === "/dashboard") return "Dashboard";
+  if (pathname === "/credentials") return "Credentials";
+  if (pathname === "/users") return "Users";
+  if (pathname === "/workflows") return "Workflows";
+  const workflowMatch = pathname.match(/^\/workflows\/([^/]+)/);
+  if (workflowMatch) {
+    const w = workflows.find((x) => x.id === decodeURIComponent(workflowMatch[1]));
+    return w?.name ?? "Workflow";
+  }
+  return shellDefaultTitle;
+}

package/src/shell/appLayoutSidebarIcons.tsx

@@ -0,0 +1,108 @@
+export const IconDashboard = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <rect width="7" height="9" x="3" y="3" rx="1" />
+    <rect width="7" height="5" x="14" y="3" rx="1" />
+    <rect width="7" height="9" x="14" y="12" rx="1" />
+    <rect width="7" height="5" x="3" y="16" rx="1" />
+  </svg>
+);
+
+export const IconCredentials = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <circle cx="8" cy="15" r="4" />
+    <path d="M10.85 12.15L19 4" />
+    <path d="m18 5 2 2" />
+    <path d="m15 8 2 2" />
+  </svg>
+);
+
+export const IconChevronLeft = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+);
+
+export const IconChevronRight = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+export const IconWorkflow = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <rect width="8" height="8" x="3" y="3" rx="1" />
+    <path d="M7 11v4a2 2 0 0 0 2 2h4" />
+    <path d="M15 7h4a2 2 0 0 1 2 2v4" />
+    <path d="M3 11h4" />
+    <path d="M11 3h4" />
+  </svg>
+);
+
+export const IconUsers = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="4" />
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+  </svg>
+);

package/src/whitelabel/CodemationWhitelabelSnapshot.ts

@@ -0,0 +1,4 @@
+export type CodemationWhitelabelSnapshot = Readonly<{
+  productName: string;
+  logoUrl: string | null;
+}>;

package/src/whitelabel/CodemationWhitelabelSnapshotFactory.ts

@@ -0,0 +1,18 @@
+import type { CodemationConfig } from "@codemation/host";
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+
+import type { CodemationWhitelabelSnapshot } from "./CodemationWhitelabelSnapshot";
+
+/**
+ * Builds shell branding from the consumer `codemation.config` object (same source as {@link CodemationApplication.useConfig}).
+ */
+export class CodemationWhitelabelSnapshotFactory {
+  static fromConsumerConfig(config: CodemationConfig): CodemationWhitelabelSnapshot {
+    const w = config.whitelabel;
+    const rawName = w?.productName?.trim();
+    const productName = rawName !== undefined && rawName.length > 0 ? rawName : "Codemation";
+    const logoPath = w?.logoPath?.trim();
+    const logoUrl = logoPath !== undefined && logoPath.length > 0 ? ApiPaths.whitelabelLogo() : null;
+    return { productName, logoUrl };
+  }
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "jsx": "preserve",
+    "noEmit": true,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@codemation/core": ["../../packages/core/src/index.ts"],
+      "@codemation/core/bootstrap": ["../../packages/core/src/bootstrap/index.ts"],
+      "@codemation/core/testing": ["../../packages/core/src/testing.ts"],
+      "@codemation/cli": ["../../packages/cli/src/index.ts"],
+      "@codemation/core-nodes": ["../../packages/core-nodes/src/index.ts"],
+      "@codemation/core-nodes-gmail": ["../../packages/core-nodes-gmail/src/index.ts"],
+      "@codemation/eventbus-redis": ["../../packages/eventbus-redis/src/index.ts"],
+      "@codemation/host": ["../../packages/host/src/index.ts"],
+      "@codemation/host/client": ["../../packages/host/src/client.ts"],
+      "@codemation/host/credentials": ["../../packages/host/src/credentials.ts"],
+      "@codemation/host/consumer": ["../../packages/host/src/consumer.ts"],
+      "@codemation/host/next/server": ["../../packages/host/src/nextServer.ts"],
+      "@codemation/host/server": ["../../packages/host/src/server.ts"],
+      "@codemation/host/dev-server-sidecar": ["../../packages/host/src/devServerSidecar.ts"],
+      "@codemation/host/persistence": ["../../packages/host/src/persistenceServer.ts"],
+      "@codemation/host-src/*": ["../../packages/host/src/*"],
+      "@codemation/next-host": ["./src/index.ts"],
+      "@codemation/next-host/src/*": ["./src/*"],
+      "@codemation/node-example": ["../../packages/node-example/src/index.ts"],
+      "@codemation/queue-bullmq": ["../../packages/queue-bullmq/src/index.ts"]
+    }
+  },
+  "include": ["next-env.d.ts", "app/**/*.ts", "app/**/*.tsx", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}