@manta-eu/react 0.5.1 → 0.7.0

package/src/components/table/index.tsx

@@ -4,7 +4,7 @@ import type { Cell, Column, ColumnDef, Row, SortingState, Table as TableInstance
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from "react";
-import { useMemo, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { match } from "ts-pattern";
 import { getCommonPinnedColumnStyles } from "./table-utils";
 import { Button } from "#components/button/index";
@@ -18,11 +18,26 @@ export { getCommonPinnedColumnStyles, getPinnedColumnInfo, type CombinedSortOpti
 export { useMaxTableRows } from "./use-max-table-rows";
 export { useTableState, type UseTableStateOptions } from "./use-table-state";
 
-export function Table({ className, ...props }: ComponentProps<"table">) {
+export type TableSize = "base" | "sm";
+
+const TableSizeContext = createContext<TableSize>("base");
+
+export type TableProps = ComponentProps<"table"> & {
+  size?: TableSize;
+};
+
+export function Table({ className, size = "base", ...props }: TableProps) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn("w-full caption-bottom typography-small", className)} {...props} />
-    </div>
+    <TableSizeContext.Provider value={size}>
+      <div data-slot="table-container" className="relative w-full overflow-x-auto">
+        <table
+          data-slot="table"
+          data-size={size}
+          className={cn("w-full caption-bottom typography-small", className)}
+          {...props}
+        />
+      </div>
+    </TableSizeContext.Provider>
   );
 }
 
@@ -45,11 +60,13 @@ export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
 }
 
 export function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  const size = useContext(TableSizeContext);
   return (
     <tr
       data-slot="table-row"
       className={cn(
         "bg-card hover:bg-muted data-[state=selected]:bg-muted border-b transition-colors text-default-foreground [&>td[data-is-pinned]]:bg-card [&>td[data-is-pinned]]:transition-colors [&>td[data-is-pinned]]:group-hover:bg-muted",
+        size === "sm" && "border-default-border",
         className,
       )}
       {...props}
@@ -58,11 +75,13 @@ export function TableRow({ className, ...props }: ComponentProps<"tr">) {
 }
 
 export function TableHead({ className, ...props }: ComponentProps<"th">) {
+  const size = useContext(TableSizeContext);
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle typography-small-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        size === "sm" ? "h-9 px-4 py-2.5 typography-tiny-medium whitespace-normal" : "typography-small-medium",
         className,
       )}
       {...props}
@@ -71,11 +90,13 @@ export function TableHead({ className, ...props }: ComponentProps<"th">) {
 }
 
 export function TableCell({ className, ...props }: ComponentProps<"td">) {
+  const size = useContext(TableSizeContext);
   return (
     <td
       data-slot="table-cell"
       className={cn(
         "px-4 not-first:px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        size === "sm" && "not-first:px-4 py-3 align-top text-[0.8125rem] leading-5 whitespace-normal break-words",
         className,
       )}
       {...props}
@@ -117,13 +138,14 @@ declare module "@tanstack/react-table" {
 
 export function CustomTableCell<TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) {
   const columnType = cell.column.columnDef.meta?.type;
+  const size = useContext(TableSizeContext);
 
   const pinningStyles = getCommonPinnedColumnStyles(cell.column);
 
   return (
     <TableCell
       className={cn(
-        "h-12",
+        size === "base" && "h-12",
         cell.column.columnDef.meta?.wide ? "max-w-none" : "max-w-56",
         cell.column.columnDef.meta?.className,
       )}
@@ -159,7 +181,7 @@ export function ColumnHeader<TData, TValue>({ column, children }: TColumnHeaderP
   const isSorted = column.getIsSorted();
 
   const className = cn(
-    "typography-caption-medium flex gap-0.5 text-muted-foreground items-center group/sort-header",
+    "flex gap-0.5 text-muted-foreground items-center group/sort-header",
     isNumberColumn && "justify-end",
     column.getCanSort() && "cursor-pointer",
   );
@@ -203,6 +225,7 @@ export type DataTableBaseProps<TData> = HTMLAttributes<HTMLDivElement> & {
   renderRow?: (row: Row<TData>) => ReactNode;
   rowClassName?: (row: Row<TData>) => string | undefined;
   isRowClickable?: (row: Row<TData>) => boolean;
+  size?: TableSize;
 };
 
 export type DataTableWithRowClick<TData> = DataTableBaseProps<TData> & {
@@ -258,6 +281,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     renderRow,
     rowClassName,
     isRowClickable,
+    size = "base",
     ...restProps
   } = props;
 
@@ -265,7 +289,9 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   const hasClickHandler = !!onRowClick || !!rowHref;
 
-  const tableBodyRowClassName = cn("group border-muted-border bg-card py-2 px-4", hasClickHandler && "cursor-pointer");
+  const rowBorderClassName = size === "base" && "border-muted-border";
+
+  const tableBodyRowClassName = cn("group bg-card py-2 px-4", rowBorderClassName, hasClickHandler && "cursor-pointer");
 
   const handleRowClick = (row: Row<TData>) => {
     if (onRowClick) {
@@ -329,10 +355,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   return (
     <div className={cn("grid gap-2.5", className)} {...restProps} ref={ref}>
-      <Table>
+      <Table size={size}>
         <TableHeader className={headerClassName}>
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="border-muted-border">
+            <TableRow key={headerGroup.id} className={cn(rowBorderClassName)}>
               {headerGroup.headers.map((header) => {
                 const headerContent = header.isPlaceholder
                   ? null
@@ -343,7 +369,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 return (
                   <TableHead
                     key={header.id}
-                    className={cn("h-13 px-4 not-first:px-3 py-2", header.column.columnDef.meta?.className)}
+                    className={cn(
+                      size === "base" && "h-13 px-4 not-first:px-3 py-2",
+                      header.column.columnDef.meta?.className,
+                    )}
                     data-is-pinned={header.column.getIsPinned() ? true : undefined}
                     style={pinningStyles}
                     ref={(thElement) => columnSizingHandler(thElement, table, header.column)}
@@ -390,6 +419,7 @@ export type SortableTableBaseProps<TRow> = {
   noResultsMessage?: string;
   className?: string;
   isLoading?: boolean;
+  size?: TableSize;
 };
 
 export type SortableTableProps<TRow> =

package/src/components/tool-invocation-card/ToolActions.tsx

@@ -1,30 +1,19 @@
-import { APPROVAL } from "@manta-eu/client/shared/index";
-import { type ToolInvocationCardProps } from "./ToolInvocationCard";
 import { Button } from "#components/button/index";
 
 type ToolActionsProps = {
-  toolCallId: string;
-  toolName: string;
-  onSubmit: ToolInvocationCardProps["onSubmit"];
+  onApprove: () => void;
+  onReject: () => void;
 };
 
 export function ToolActions(props: ToolActionsProps) {
-  const { toolCallId, toolName: _toolName, onSubmit } = props;
-
-  function handleReject() {
-    onSubmit({ toolCallId, result: APPROVAL.NO });
-  }
-
-  function handleApprove() {
-    onSubmit({ toolCallId, result: APPROVAL.YES });
-  }
+  const { onApprove, onReject } = props;
 
   return (
     <div className="flex gap-2 justify-end">
-      <Button variant="destructive" size="sm" onClick={handleReject}>
+      <Button variant="destructive" size="sm" onClick={onReject}>
         Reject
       </Button>
-      <Button size="sm" onClick={handleApprove}>
+      <Button size="sm" onClick={onApprove}>
         Approve
       </Button>
     </div>

package/src/components/tool-invocation-card/ToolHeader.tsx

@@ -1,18 +1,24 @@
 import { getToolUIPartLabel } from "@manta-eu/client/shared/tools";
 import type { ToolUIPart } from "ai";
-import { CheckCircle2, ChevronDown, Loader2 } from "lucide-react";
+import { AlertTriangle, CheckCircle2, ChevronDown, Loader2, XCircle } from "lucide-react";
+import { match } from "ts-pattern";
 
 type ToolHeaderProps = {
   toolUIPart: ToolUIPart;
-  needsConfirmation: boolean;
   isExpanded: boolean;
   onToggle: () => void;
 };
 
-export function ToolHeader(props: ToolHeaderProps) {
-  const { toolUIPart, isExpanded, onToggle, needsConfirmation } = props;
+function StateIcon(props: { state: ToolUIPart["state"] }) {
+  return match(props.state)
+    .with("output-available", () => <CheckCircle2 size={16} />)
+    .with("output-denied", () => <XCircle size={16} />)
+    .with("output-error", () => <AlertTriangle size={16} />)
+    .otherwise(() => <Loader2 size={16} className="animate-spin" />);
+}
 
-  const isComplete = !needsConfirmation && toolUIPart.state === "output-available";
+export function ToolHeader(props: ToolHeaderProps) {
+  const { toolUIPart, isExpanded, onToggle } = props;
 
   const humanToolName = getToolUIPartLabel(toolUIPart);
 
@@ -23,8 +29,9 @@ export function ToolHeader(props: ToolHeaderProps) {
   return (
     <button type="button" onClick={handleToggle} className="w-full flex items-center gap-2 cursor-pointer">
       <h4 className="typography-small-medium flex items-center gap-2 flex-1 text-left">
-        {isComplete ? <CheckCircle2 size={16} /> : <Loader2 size={16} className="animate-spin" />}
+        <StateIcon state={toolUIPart.state} />
         {humanToolName}
+        {toolUIPart.state === "output-denied" && <span className="text-muted-foreground">Rejected</span>}
       </h4>
       <ChevronDown
         size={16}

package/src/components/tool-invocation-card/ToolInvocationCard.tsx

@@ -2,7 +2,6 @@ import { getToolUIPartLabel } from "@manta-eu/client/shared/tools";
 import type { ToolUIPart } from "ai";
 import { useCallback, useState } from "react";
 import { match } from "ts-pattern";
-import { ToolActions } from "./ToolActions";
 import { ToolArgumentsDisplay } from "./ToolArgumentsDisplay";
 import { ToolHeader } from "./ToolHeader";
 import { ToolLoadingState } from "./ToolLoadingState";
@@ -12,30 +11,21 @@ import { cn } from "#lib/utils";
 
 export type ToolInvocationCardProps = {
   toolUIPart: ToolUIPart;
-  toolCallId: string;
-  needsConfirmation: boolean;
-  onSubmit: ({ toolCallId, result }: { toolCallId: string; result: string }) => void;
-  addToolResult: (toolCallId: string, result: string) => void;
 };
 
 export function ToolInvocationCard(props: ToolInvocationCardProps) {
-  const { toolUIPart, toolCallId, needsConfirmation, onSubmit } = props;
+  const { toolUIPart } = props;
   const [isExpanded, setIsExpanded] = useState(false);
   const loadingLabel = getToolUIPartLabel(toolUIPart);
   const [executionStartTime] = useState(Date.now());
 
   const handleToggle = useCallback(() => {
-    setIsExpanded(!isExpanded);
+    setIsExpanded((expanded) => !expanded);
   }, []);
 
   return (
     <Card className="my-3 w-full max-w-2xl card-base overflow-hidden">
-      <ToolHeader
-        toolUIPart={toolUIPart}
-        needsConfirmation={needsConfirmation}
-        isExpanded={isExpanded}
-        onToggle={handleToggle}
-      />
+      <ToolHeader toolUIPart={toolUIPart} isExpanded={isExpanded} onToggle={handleToggle} />
 
       <div
         className={cn([
@@ -46,22 +36,15 @@ export function ToolInvocationCard(props: ToolInvocationCardProps) {
         <div className="overflow-y-auto" style={{ maxHeight: isExpanded ? "580px" : "0px" }}>
           <ToolArgumentsDisplay toolUIPart={toolUIPart} />
 
-          {match({ needsConfirmation, state: toolUIPart.state })
-            .with({ needsConfirmation: true, state: "input-available" }, () => (
-              <ToolActions
-                toolCallId={toolCallId}
-                toolName={toolUIPart.type.replace("tool-", "")}
-                onSubmit={onSubmit}
-              />
-            ))
-            .with({ needsConfirmation: false, state: "output-available" }, () => (
+          {match(toolUIPart.state)
+            .with("output-available", () => (
               <ToolResultDisplay
                 result={toolUIPart.output}
                 executionStartTime={executionStartTime}
                 toolUIPart={toolUIPart}
               />
             ))
-            .with({ state: "input-streaming" }, () => <ToolLoadingState label={loadingLabel} />)
+            .with("input-streaming", () => <ToolLoadingState label={loadingLabel} />)
             .otherwise(() => null)}
         </div>
       </div>

package/src/hooks/useActionGraph.ts

@@ -0,0 +1,41 @@
+import {
+  runActionGraph,
+  type ActionGraphql,
+  type GraphOp,
+  type GraphRun,
+  type GraphRunOptions,
+} from "@manta-eu/client/shared/action-graph";
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { uniq } from "ramda";
+import { useSparqlOptions } from "#hooks/use-sparql-options";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+
+export type UseActionGraphOptions = Omit<GraphRunOptions, "graphql" | "readOptions">;
+
+export const actionGraphMutationKey = ["ExecuteActionGraph"] as const;
+
+const planGraphIris = ({ results }: GraphRun): string[] =>
+  uniq(results.flatMap((result) => ("planGraphIri" in result ? [result.planGraphIri] : [])));
+
+/** Sends a change of several entities as one plan and reads back what each op did; `results[i]` is `ops[i]`. */
+export function useActionGraph(
+  options: UseActionGraphOptions = {},
+): UseMutationResult<GraphRun, Error, readonly GraphOp[]> {
+  const { mantaClient } = useMantaClient();
+  const readOptions = useSparqlOptions();
+  const queryClient = useQueryClient();
+
+  const graphql: ActionGraphql = (document, variables, request) =>
+    mantaClient.request({ document, variables, signal: request?.signal });
+
+  return useMutation<GraphRun, Error, readonly GraphOp[]>({
+    mutationKey: actionGraphMutationKey,
+    mutationFn: (ops) => runActionGraph(ops, { ...options, graphql, readOptions }),
+    onSuccess: async (run) => {
+      await Promise.all(
+        planGraphIris(run).map((planGraphIri) => invalidateActionPlanQueries(queryClient, planGraphIri)),
+      );
+    },
+  });
+}

package/src/lib/tool-icons.ts

@@ -44,6 +44,7 @@ const toolIconMap: Record<ToolName, LucideIcon> = {
   setDailyChangeLimit: DollarSign,
   markAsLowRisk: CheckCircle2,
   readUploadedFile: Paperclip,
+  requestBudgetChange: DollarSign,
 };
 
 type StepIconName =

package/src/routes/integrations/components/connect-forms/MetaAdsConnectForm.tsx

@@ -3,8 +3,11 @@ import {
   GQLMetaSetupStateEnum,
   useConnectedAccountsQuery,
   useMetaSetupConnectMutation,
+  useMetaSetupIncludePagesMutation,
   useMetaSetupProgressQuery,
   type GQLMetaAdAccount,
+  type GQLMetaPage,
+  type GQLMetaSetupProgress,
 } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { isPresent } from "@manta-eu/lib/present";
@@ -15,6 +18,7 @@ import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { ConnectFormHeader } from "./ConnectFormHeader";
 import { ImportStartedNotice } from "./ImportStartedNotice";
+import { metaPageTreeItems, picksAPage } from "./meta-page-tree";
 import { OAuthConnectLink } from "./OAuthConnectLink";
 import { unavailableReasonLabel } from "./setup-account-unavailable-reason";
 import type { ConnectFormProps, ImportNotice } from "./types";
@@ -24,12 +28,22 @@ import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Loader } from "#components/loader/index";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { TreeMultiSelect } from "#components/tree-multi-select/index";
 import { cn } from "#lib/utils";
 import { useMantaClient } from "#providers/index";
 
 const pollIntervalMs = 3000;
 
-type Phase = "idle" | "awaitingOAuth" | "loadingAccounts" | "pickingAccount" | "submitting" | "done" | "failed";
+type Phase =
+  | "idle"
+  | "awaitingOAuth"
+  | "loadingAccounts"
+  | "pickingAccount"
+  | "loadingPages"
+  | "pickingPages"
+  | "submitting"
+  | "done"
+  | "failed";
 
 type DerivePhaseInput = {
   states: GQLMetaSetupStateEnum[] | undefined;
@@ -42,6 +56,8 @@ const statePriority: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.FatallyFailed,
   GQLMetaSetupStateEnum.TimedOut,
   GQLMetaSetupStateEnum.ConnectingAccounts,
+  GQLMetaSetupStateEnum.SelectingPages,
+  GQLMetaSetupStateEnum.FetchingPages,
   GQLMetaSetupStateEnum.SelectingAccounts,
   GQLMetaSetupStateEnum.FetchingAccounts,
   GQLMetaSetupStateEnum.Setup,
@@ -53,7 +69,14 @@ const terminalStates: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.TimedOut,
 ];
 
-const activePhases: readonly Phase[] = ["awaitingOAuth", "loadingAccounts", "pickingAccount", "submitting"];
+const activePhases: readonly Phase[] = [
+  "awaitingOAuth",
+  "loadingAccounts",
+  "pickingAccount",
+  "loadingPages",
+  "pickingPages",
+  "submitting",
+];
 
 export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: DerivePhaseInput): Phase {
   const defaultPhase: Phase = hasStartedOAuth ? "awaitingOAuth" : "idle";
@@ -64,6 +87,8 @@ export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: Der
     .with(GQLMetaSetupStateEnum.Finished, () => "done")
     .with(GQLMetaSetupStateEnum.FatallyFailed, GQLMetaSetupStateEnum.TimedOut, () => "failed")
     .with(GQLMetaSetupStateEnum.ConnectingAccounts, () => "submitting")
+    .with(GQLMetaSetupStateEnum.SelectingPages, () => "pickingPages")
+    .with(GQLMetaSetupStateEnum.FetchingPages, () => "loadingPages")
     .with(GQLMetaSetupStateEnum.SelectingAccounts, () => "pickingAccount")
     .with(GQLMetaSetupStateEnum.FetchingAccounts, GQLMetaSetupStateEnum.Setup, () => "loadingAccounts")
     .otherwise(() => defaultPhase);
@@ -114,11 +139,20 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
   const [selectedAccountId, setSelectedAccountId] = useState<string>("");
+  const [selectedPageIds, setSelectedPageIds] = useState<ReadonlySet<string>>(new Set());
   const hasDismissedRef = useRef(false);
 
   const progressQuery = useMetaSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
   const progress = progressQuery.data?.metaSetupProgress;
-  const phase = derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const connectMutation = useMetaSetupConnectMutation(mantaClient);
+  const includePagesMutation = useMetaSetupIncludePagesMutation(mantaClient);
+  // Progress reads the old step until a mutation's step has run, so a pending one shows where it is heading.
+  const phase = connectMutation.isPending
+    ? "loadingPages"
+    : includePagesMutation.isPending
+      ? "submitting"
+      : derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const pages = progress?.pages ?? [];
 
   useWindowFocusPoll(progressQuery.refetch, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
 
@@ -139,8 +173,6 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   );
   const reconnectableExternalIds = useReconnectableExternalIds(GQLIntegration.Meta);
 
-  const connectMutation = useMetaSetupConnectMutation(mantaClient);
-
   useEffect(() => {
     if (phase !== "done" || hasDismissedRef.current) return;
     hasDismissedRef.current = true;
@@ -149,10 +181,12 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
     if (!importNotice) onDismiss();
   }, [phase, onChanged, onDismiss, importNotice]);
 
+  function setProgress(metaSetupProgress: GQLMetaSetupProgress) {
+    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), { metaSetupProgress });
+  }
+
   function resetProgressCache() {
-    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), {
-      metaSetupProgress: { state: [], accounts: null, lastError: null },
-    });
+    setProgress({ state: [], accounts: null, pages: null, lastError: null });
   }
 
   function handleOpened() {
@@ -164,16 +198,34 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   async function handleSubmit() {
     if (!selectedAccountId) return;
     try {
-      await connectMutation.mutateAsync({ accountIds: [selectedAccountId] });
-      await progressQuery.refetch();
+      setProgress((await connectMutation.mutateAsync({ accountIds: [selectedAccountId] })).metaSetupConnect);
     } catch (err) {
       const info = parseError(err, "Failed to connect Meta");
       toast.error(info.message, { description: info.description });
     }
   }
 
+  async function handleIncludePages() {
+    try {
+      setProgress((await includePagesMutation.mutateAsync({ pageIds: [...selectedPageIds] })).metaSetupIncludePages);
+    } catch (err) {
+      const info = parseError(err, "Failed to connect Meta");
+      toast.error(info.message, { description: info.description });
+    }
+  }
+
+  function togglePage(id: string, checked: boolean) {
+    setSelectedPageIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
   function handleRetry() {
     setSelectedAccountId("");
+    setSelectedPageIds(new Set());
     hasDismissedRef.current = false;
     resetProgressCache();
     setHasStartedOAuth(false);
@@ -198,6 +250,10 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
               onSelect={setSelectedAccountId}
             />
           ))
+          .with("loadingPages", () => <LoadingPagesView />)
+          .with("pickingPages", () => (
+            <PickingPagesView pages={pages} selectedIds={selectedPageIds} onToggle={togglePage} />
+          ))
           .with("submitting", () => <SubmittingView />)
           .with("done", () => <DoneView providerName={provider.name} importNotice={importNotice} />)
           .with("failed", () => (
@@ -220,12 +276,16 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
           <OAuthConnectLink href="/oauth/meta/start" label="Continue with Meta" onOpened={handleOpened} />
         )}
         {phase === "pickingAccount" && (
+          <Button onClick={() => void handleSubmit()} disabled={!selectedAccountId}>
+            Continue
+          </Button>
+        )}
+        {phase === "pickingPages" && (
           <Button
-            onClick={() => void handleSubmit()}
-            disabled={!selectedAccountId}
-            isLoading={connectMutation.isPending}
+            onClick={() => void handleIncludePages()}
+            disabled={isPresent(pages) && !picksAPage(pages, selectedPageIds)}
           >
-            Connect account
+            {isPresent(pages) ? "Connect" : "Connect without a Page"}
           </Button>
         )}
         {phase === "done" && importNotice && <Button onClick={onDismiss}>Done</Button>}
@@ -348,12 +408,68 @@ function PickingAccountView(props: PickingAccountViewProps) {
   );
 }
 
+function LoadingPagesView() {
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Loading your Facebook Pages</h2>
+        <p className="typography-caption text-muted-foreground">
+          The Pages this ad account can advertise as, and their Instagram accounts.
+        </p>
+      </div>
+      <div
+        className="flex items-center gap-2 text-muted-foreground typography-caption"
+        role="status"
+        aria-live="polite"
+      >
+        <Loader className="size-4" aria-hidden /> Fetching Pages…
+      </div>
+    </div>
+  );
+}
+
+type PickingPagesViewProps = {
+  pages: GQLMetaPage[];
+  selectedIds: ReadonlySet<string>;
+  onToggle: (id: string, checked: boolean) => void;
+};
+
+function PickingPagesView(props: PickingPagesViewProps) {
+  const { pages, selectedIds, onToggle } = props;
+
+  if (!isPresent(pages)) {
+    return (
+      <Banner
+        type="warning"
+        label="This ad account can't advertise as any Facebook Page yet. Connect it anyway, and add a Page to it in Meta Business Suite before you run ads."
+      />
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Pick the Facebook Pages to use</h2>
+        <p className="typography-caption text-muted-foreground">
+          Manta runs ads only as the Pages and Instagram accounts you pick. Pick at least one Page.
+        </p>
+      </div>
+      <TreeMultiSelect
+        items={metaPageTreeItems(pages)}
+        selectedIds={selectedIds}
+        onToggle={onToggle}
+        searchPlaceholder="Search Pages..."
+      />
+    </div>
+  );
+}
+
 function SubmittingView() {
   return (
     <div className="grid gap-4">
       <div className="grid gap-1">
         <h2 className="typography-large-body-semibold text-default-foreground">Connecting your account</h2>
-        <p className="typography-caption text-muted-foreground">Hold tight — this usually takes a few seconds.</p>
+        <p className="typography-caption text-muted-foreground">This can take a minute. Keep this window open.</p>
       </div>
       <div
         className="flex items-center gap-2 text-muted-foreground typography-caption"