@codemation/next-host 0.0.1

package/src/features/users/components/UsersInviteDialog.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { CodemationDialog } from "@/components/CodemationDialog";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useForm,
+  zodResolver,
+} from "@/components/forms";
+import { usersInviteFormSchema, type UsersInviteFormValues } from "../schemas/usersInviteFormSchema";
+
+type UsersInviteDialogProps = Readonly<{
+  errorMessage: string | null;
+  successUrl: string | null;
+  isSubmitting: boolean;
+  copyFeedback: boolean;
+  onSubmit: (email: string) => void | Promise<void>;
+  onCopy: () => void;
+  onClose: () => void;
+}>;
+
+export function UsersInviteDialog({
+  errorMessage,
+  successUrl,
+  isSubmitting,
+  copyFeedback,
+  onSubmit,
+  onCopy,
+  onClose,
+}: UsersInviteDialogProps) {
+  const form = useForm<UsersInviteFormValues>({
+    resolver: zodResolver(usersInviteFormSchema),
+    defaultValues: { email: "" },
+  });
+
+  return (
+    <CodemationDialog
+      onClose={onClose}
+      testId="users-invite-dialog"
+      size="narrow"
+      contentClassName="max-h-[min(90vh,640px)]"
+    >
+      <CodemationDialog.Title>Invite user</CodemationDialog.Title>
+      {successUrl ? (
+        <>
+          <CodemationDialog.Content className="space-y-3">
+            <p className="m-0 text-muted-foreground" data-testid="users-invite-success-message">
+              Share this link; it expires in seven days.
+            </p>
+            <Input
+              type="text"
+              readOnly
+              value={successUrl}
+              data-testid="users-invite-link-field"
+              className="font-mono text-xs"
+            />
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" variant="secondary" data-testid="users-invite-copy-link" onClick={onCopy}>
+                {copyFeedback ? "Copied" : "Copy link"}
+              </Button>
+            </div>
+          </CodemationDialog.Content>
+          <CodemationDialog.Actions>
+            <Button type="button" variant="outline" data-testid="users-invite-cancel" onClick={onClose}>
+              Done
+            </Button>
+          </CodemationDialog.Actions>
+        </>
+      ) : (
+        <Form {...form}>
+          <form
+            data-testid="users-invite-form"
+            onSubmit={form.handleSubmit((values) => void onSubmit(values.email))}
+            className="flex min-h-0 flex-1 flex-col overflow-hidden"
+          >
+            <CodemationDialog.Content className="space-y-3">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        data-testid="users-invite-email-input"
+                        placeholder="colleague@company.com"
+                        autoComplete="off"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {errorMessage ? (
+                <div className="text-sm text-destructive" data-testid="users-invite-error" role="alert">
+                  {errorMessage}
+                </div>
+              ) : null}
+            </CodemationDialog.Content>
+            <CodemationDialog.Actions>
+              <Button type="button" variant="outline" data-testid="users-invite-cancel" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button type="submit" data-testid="users-invite-submit" disabled={isSubmitting}>
+                {isSubmitting ? "Sending…" : "Create invite"}
+              </Button>
+            </CodemationDialog.Actions>
+          </form>
+        </Form>
+      )}
+    </CodemationDialog>
+  );
+}

package/src/features/users/components/UsersRegenerateDialog.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { CodemationDialog } from "@/components/CodemationDialog";
+import { Input } from "@/components/ui/input";
+
+type UsersRegenerateDialogProps = Readonly<{
+  email: string;
+  newUrl: string | null;
+  errorMessage: string | null;
+  isSubmitting: boolean;
+  copyFeedback: boolean;
+  onConfirm: () => void;
+  onCopy: () => void;
+  onClose: () => void;
+}>;
+
+export function UsersRegenerateDialog({
+  email,
+  newUrl,
+  errorMessage,
+  isSubmitting,
+  copyFeedback,
+  onConfirm,
+  onCopy,
+  onClose,
+}: UsersRegenerateDialogProps) {
+  return (
+    <CodemationDialog
+      onClose={onClose}
+      testId="users-regenerate-dialog"
+      size="narrow"
+      contentClassName="max-h-[min(90vh,640px)]"
+    >
+      <CodemationDialog.Title>Regenerate invite link</CodemationDialog.Title>
+      <CodemationDialog.Content className="space-y-3">
+        {newUrl ? (
+          <>
+            <p className="m-0 text-muted-foreground" data-testid="users-regenerate-success-message">
+              New link for {email}. Previous links stop working.
+            </p>
+            <Input
+              type="text"
+              readOnly
+              value={newUrl}
+              data-testid="users-regenerate-link-field"
+              className="font-mono text-xs"
+            />
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" variant="secondary" data-testid="users-regenerate-copy-link" onClick={onCopy}>
+                {copyFeedback ? "Copied" : "Copy link"}
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <p className="m-0 text-muted-foreground" data-testid="users-regenerate-confirm-text">
+              Generate a new seven-day link for <strong data-testid="users-regenerate-email">{email}</strong>? The
+              current invite link will no longer work.
+            </p>
+            {errorMessage ? (
+              <div className="text-sm text-destructive" data-testid="users-regenerate-error">
+                {errorMessage}
+              </div>
+            ) : null}
+          </>
+        )}
+      </CodemationDialog.Content>
+      <CodemationDialog.Actions>
+        <Button type="button" variant="outline" data-testid="users-regenerate-cancel" onClick={onClose}>
+          {newUrl ? "Close" : "Cancel"}
+        </Button>
+        {!newUrl ? (
+          <Button type="button" data-testid="users-regenerate-confirm" disabled={isSubmitting} onClick={onConfirm}>
+            {isSubmitting ? "Working…" : "Regenerate"}
+          </Button>
+        ) : null}
+      </CodemationDialog.Actions>
+    </CodemationDialog>
+  );
+}

package/src/features/users/components/UsersScreenUserStatusBadge.tsx

@@ -0,0 +1,19 @@
+import type { UserAccountStatus } from "@codemation/host-src/application/contracts/userDirectoryContracts.types";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function UsersScreenUserStatusBadge(props: Readonly<{ userId: string; status: UserAccountStatus }>) {
+  const { status, userId } = props;
+  const className =
+    status === "active"
+      ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200"
+      : status === "invited"
+        ? "border-blue-500/30 bg-blue-500/10 text-blue-900 dark:text-blue-200"
+        : "text-muted-foreground";
+  return (
+    <Badge variant="outline" className={cn(className)} data-testid={`user-status-badge-${userId}`}>
+      {status}
+    </Badge>
+  );
+}

package/src/features/users/schemas/usersInviteFormSchema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const usersInviteFormSchema = z.object({
+  email: z.string().email("Enter a valid email address"),
+});
+
+export type UsersInviteFormValues = z.infer<typeof usersInviteFormSchema>;

package/src/features/users/screens/UsersScreen.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import type {
+  UserAccountDto,
+  UserAccountStatus,
+} from "@codemation/host-src/application/contracts/userDirectoryContracts.types";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { CodemationDataTable } from "../../../components/CodemationDataTable";
+import { CodemationFormattedDateTime } from "../../../components/CodemationFormattedDateTime";
+import {
+  useInviteUserMutation,
+  useRegenerateUserInviteMutation,
+  useUpdateUserAccountStatusMutation,
+  useUserAccountsQuery,
+} from "../../workflows/hooks/realtime/realtime";
+import { UsersInviteDialog } from "../components/UsersInviteDialog";
+import { UsersRegenerateDialog } from "../components/UsersRegenerateDialog";
+import { UsersScreenUserStatusBadge } from "../components/UsersScreenUserStatusBadge";
+
+export function UsersScreen() {
+  const usersQuery = useUserAccountsQuery();
+  const inviteMutation = useInviteUserMutation();
+  const regenerateMutation = useRegenerateUserInviteMutation();
+  const statusMutation = useUpdateUserAccountStatusMutation();
+  const users = usersQuery.data ?? [];
+
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+  const [inviteSuccessUrl, setInviteSuccessUrl] = useState<string | null>(null);
+  const [copyFeedback, setCopyFeedback] = useState(false);
+
+  const [regenerateDialog, setRegenerateDialog] = useState<UserAccountDto | null>(null);
+  const [regeneratedUrl, setRegeneratedUrl] = useState<string | null>(null);
+
+  const closeInvite = useCallback(() => {
+    setInviteOpen(false);
+    setInviteError(null);
+    setInviteSuccessUrl(null);
+    setCopyFeedback(false);
+  }, []);
+
+  const openInvite = useCallback(() => {
+    setInviteOpen(true);
+    setInviteError(null);
+    setInviteSuccessUrl(null);
+    setCopyFeedback(false);
+  }, []);
+
+  useEffect(() => {
+    if (!copyFeedback) return;
+    const t = window.setTimeout(() => setCopyFeedback(false), 2000);
+    return () => window.clearTimeout(t);
+  }, [copyFeedback]);
+
+  const submitInvite = async (email: string): Promise<void> => {
+    setInviteError(null);
+    try {
+      const result = await inviteMutation.mutateAsync(email.trim());
+      setInviteSuccessUrl(result.inviteUrl);
+    } catch (e) {
+      setInviteError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const copyInviteUrl = async (url: string): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopyFeedback(true);
+    } catch {
+      setInviteError("Could not copy to clipboard.");
+    }
+  };
+
+  const runRegenerate = async (user: UserAccountDto): Promise<void> => {
+    setInviteError(null);
+    try {
+      const result = await regenerateMutation.mutateAsync(user.id);
+      setRegeneratedUrl(result.inviteUrl);
+    } catch (e) {
+      setInviteError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const onStatusChange = async (user: UserAccountDto, status: UserAccountStatus): Promise<void> => {
+    if (status === "invited" || user.status === status) return;
+    try {
+      await statusMutation.mutateAsync({ userId: user.id, status });
+    } catch {
+      /* query error surfaces via mutation state if needed */
+    }
+  };
+
+  const loading = usersQuery.isLoading;
+  const loadError = usersQuery.isError;
+
+  return (
+    <div data-testid="users-screen" className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <p className="m-0 max-w-2xl text-sm text-muted-foreground">
+          Invite teammates with a secure link. Invites expire after seven days; you can regenerate a link for any
+          invited account.
+        </p>
+        <Button type="button" onClick={openInvite} data-testid="users-invite-open">
+          Invite user
+        </Button>
+      </div>
+
+      {loadError && (
+        <div
+          className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+          role="alert"
+          data-testid="users-load-error"
+        >
+          Failed to load users.
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-sm text-muted-foreground" data-testid="users-loading">
+          Loading…
+        </div>
+      ) : users.length === 0 ? (
+        <div
+          className="rounded-lg border border-dashed border-border bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground"
+          data-testid="users-empty"
+        >
+          No users yet. Invite someone to get started.
+        </div>
+      ) : (
+        <CodemationDataTable
+          tableTestId="users-table"
+          columns={[
+            { key: "email", header: "Email" },
+            { key: "loginMethods", header: "Sign-in methods" },
+            { key: "status", header: "Status" },
+            { key: "inviteExpiry", header: "Invite expires" },
+            { key: "actions", header: "Actions" },
+          ]}
+        >
+          {users.map((user) => {
+            const loginMethods = user.loginMethods ?? [];
+            return (
+              <TableRow key={user.id} data-testid={`user-row-${user.id}`}>
+                <TableCell>
+                  <span data-testid={`user-email-${user.id}`}>{user.email}</span>
+                </TableCell>
+                <TableCell>
+                  <span data-testid={`user-login-methods-${user.id}`}>
+                    {loginMethods.length > 0 ? loginMethods.join(", ") : "—"}
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <UsersScreenUserStatusBadge userId={user.id} status={user.status} />
+                </TableCell>
+                <TableCell>
+                  <CodemationFormattedDateTime
+                    isoUtc={user.inviteExpiresAt}
+                    dataTestId={`user-invite-expires-${user.id}`}
+                  />
+                </TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap items-center gap-2">
+                    {user.status === "invited" && (
+                      <Button
+                        type="button"
+                        size="sm"
+                        data-testid={`user-regenerate-invite-${user.id}`}
+                        onClick={() => {
+                          setInviteError(null);
+                          setRegeneratedUrl(null);
+                          setRegenerateDialog(user);
+                        }}
+                        disabled={regenerateMutation.isPending}
+                      >
+                        Regenerate link
+                      </Button>
+                    )}
+                    {user.status !== "invited" && (
+                      <div className="inline-flex items-center gap-2">
+                        <span className="sr-only" data-testid={`user-status-label-${user.id}`}>
+                          Account status
+                        </span>
+                        <Select
+                          value={user.status}
+                          onValueChange={(value) => void onStatusChange(user, value as UserAccountStatus)}
+                          disabled={statusMutation.isPending}
+                        >
+                          <SelectTrigger className="h-8 w-[140px]" data-testid={`user-account-status-${user.id}`}>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="active">active</SelectItem>
+                            <SelectItem value="inactive">inactive</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </CodemationDataTable>
+      )}
+
+      {inviteOpen && (
+        <UsersInviteDialog
+          errorMessage={inviteError}
+          successUrl={inviteSuccessUrl}
+          isSubmitting={inviteMutation.isPending}
+          copyFeedback={copyFeedback}
+          onSubmit={(email) => void submitInvite(email)}
+          onCopy={() => inviteSuccessUrl && void copyInviteUrl(inviteSuccessUrl)}
+          onClose={closeInvite}
+        />
+      )}
+
+      {regenerateDialog && (
+        <UsersRegenerateDialog
+          email={regenerateDialog.email}
+          newUrl={regeneratedUrl}
+          errorMessage={inviteError}
+          isSubmitting={regenerateMutation.isPending}
+          copyFeedback={copyFeedback}
+          onConfirm={() => void runRegenerate(regenerateDialog)}
+          onCopy={() => regeneratedUrl && void copyInviteUrl(regeneratedUrl)}
+          onClose={() => {
+            setRegenerateDialog(null);
+            setRegeneratedUrl(null);
+            setInviteError(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/features/workflows/components/WorkflowListFolderSection.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { ChevronRight, Folder } from "lucide-react";
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { WorkflowFolderTreeNode } from "@/shell/WorkflowFolderTreeBuilder";
+import { WorkflowFolderUi } from "@/shell/WorkflowFolderUi";
+
+import { WorkflowListItemCard } from "./WorkflowListItemCard";
+
+function folderTestId(folderPath: ReadonlyArray<string>): string {
+  return `workflows-folder-${folderPath.join("__")}`;
+}
+
+export function WorkflowListFolderSection(
+  args: Readonly<{
+    node: WorkflowFolderTreeNode;
+    folderPath: ReadonlyArray<string>;
+    depth: number;
+    pathname: string;
+    workflows: ReadonlyArray<WorkflowSummary>;
+  }>,
+): ReactNode {
+  const { node, folderPath, depth, pathname, workflows } = args;
+  const nextPath = [...folderPath, node.segment];
+  const totalInTree = WorkflowFolderUi.countWorkflowsInSubtree(node);
+  const defaultOpen = WorkflowFolderUi.computeDefaultFolderOpen(nextPath, pathname, workflows);
+
+  return (
+    <li className={cn("list-none", depth > 0 && "mt-1.5")}>
+      <Collapsible
+        defaultOpen={defaultOpen}
+        className="overflow-hidden rounded-lg border border-border/55 bg-card/80 shadow-none ring-1 ring-black/[0.03] dark:bg-card/60 dark:ring-white/[0.04]"
+      >
+        <CollapsibleTrigger
+          type="button"
+          data-testid={folderTestId(nextPath)}
+          className={cn(
+            "flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm outline-none transition-colors",
+            "text-foreground hover:bg-muted/50",
+            "focus-visible:bg-muted/45 focus-visible:ring-2 focus-visible:ring-ring/35",
+            "[&[data-state=open]>svg:first-child]:rotate-90",
+          )}
+        >
+          <ChevronRight
+            className="size-3.5 shrink-0 text-muted-foreground/90 transition-transform duration-200 ease-out"
+            aria-hidden
+          />
+          <Folder className="size-3.5 shrink-0 text-primary/85" strokeWidth={2} aria-hidden />
+          <span className="min-w-0 flex-1 font-medium tracking-tight text-foreground">{node.segment}</span>
+          <Badge
+            variant="secondary"
+            className="h-5 min-w-5 justify-center border border-border/50 bg-muted/60 px-1.5 font-mono text-[0.65rem] tabular-nums text-muted-foreground"
+          >
+            {totalInTree}
+          </Badge>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="border-t border-border/45 bg-muted/[0.35] px-2 pb-2.5 pt-1.5 dark:bg-muted/15">
+            <ul className="m-0 grid list-none gap-0 p-0">
+              {node.workflows.map((workflow) => (
+                <li key={workflow.id} className="list-none">
+                  <WorkflowListItemCard workflow={workflow} appearance="folder" />
+                </li>
+              ))}
+            </ul>
+            {node.children.length > 0 ? (
+              <ul className="m-0 mt-2 list-none space-y-1.5 border-l border-border/55 pl-3">
+                {node.children.map((child) => (
+                  <WorkflowListFolderSection
+                    key={child.segment}
+                    node={child}
+                    folderPath={nextPath}
+                    depth={depth + 1}
+                    pathname={pathname}
+                    workflows={workflows}
+                  />
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </li>
+  );
+}

package/src/features/workflows/components/WorkflowListItemCard.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import { cn } from "@/lib/utils";
+
+export function WorkflowListItemCard(
+  args: Readonly<{
+    workflow: WorkflowSummary;
+    appearance: "root" | "folder";
+  }>,
+): ReactNode {
+  const { workflow, appearance } = args;
+  const href = `/workflows/${encodeURIComponent(workflow.id)}`;
+  const pathLine = workflow.discoveryPathSegments.length > 0 ? workflow.discoveryPathSegments.join(" / ") : null;
+  return (
+    <div
+      className={cn(
+        "group relative -mx-1 rounded-md border border-transparent px-2.5 py-2 transition-[background-color,border-color,box-shadow]",
+        "hover:border-border/55 hover:bg-muted/50 hover:shadow-sm",
+        "focus-within:border-border/60 focus-within:bg-muted/45 focus-within:shadow-sm",
+        appearance === "root" && "hover:bg-muted/55",
+        appearance === "folder" && "hover:bg-muted/40",
+      )}
+      data-testid={`workflow-list-item-${workflow.id}`}
+    >
+      <div className="flex items-start gap-2.5">
+        <div className="min-w-0 flex-1">
+          <Link
+            href={href}
+            className={cn(
+              "inline-flex max-w-full items-baseline gap-1.5 text-pretty text-sm font-medium leading-snug text-foreground no-underline",
+              "transition-colors group-hover:text-primary",
+              "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45",
+            )}
+            data-testid={`workflow-open-${workflow.id}`}
+          >
+            <span className="truncate">{workflow.name}</span>
+          </Link>
+          <div className="mt-1 flex min-w-0 flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-[0.7rem] leading-snug text-muted-foreground">
+            <span className="shrink-0 font-mono text-[0.65rem] text-muted-foreground/80">{workflow.id}</span>
+            {pathLine !== null ? (
+              <>
+                <span className="select-none text-muted-foreground/35" aria-hidden>
+                  ·
+                </span>
+                <span className="min-w-0 font-sans text-muted-foreground/75">{pathLine}</span>
+              </>
+            ) : null}
+          </div>
+        </div>
+        <ChevronRight
+          className={cn(
+            "mt-0.5 size-4 shrink-0 text-muted-foreground transition-[opacity,transform]",
+            "opacity-0 group-hover:translate-x-px group-hover:opacity-70",
+          )}
+          aria-hidden
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/workflows/components/WorkflowListRoot.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import type { WorkflowFolderTreeNode } from "@/shell/WorkflowFolderTreeBuilder";
+
+import { WorkflowListFolderSection } from "./WorkflowListFolderSection";
+import { WorkflowListItemCard } from "./WorkflowListItemCard";
+
+export function WorkflowListRoot(
+  args: Readonly<{
+    node: WorkflowFolderTreeNode;
+    pathname: string;
+    workflows: ReadonlyArray<WorkflowSummary>;
+  }>,
+): ReactNode {
+  const { node, pathname, workflows } = args;
+  return (
+    <>
+      {node.workflows.map((workflow) => (
+        <li key={workflow.id} className="list-none">
+          <WorkflowListItemCard workflow={workflow} appearance="root" />
+        </li>
+      ))}
+      {node.children.map((child) => (
+        <WorkflowListFolderSection
+          key={child.segment}
+          node={child}
+          folderPath={[]}
+          depth={0}
+          pathname={pathname}
+          workflows={workflows}
+        />
+      ))}
+    </>
+  );
+}