mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-02 19:55:18 +02:00
Merge remote-tracking branch 'upstream/dev' into feat/whatsapp-gateway-integration
This commit is contained in:
Anish Sarkar
commit
e3de7c4667
465 changed files with 29171 additions and 6994 deletions
|
|
@ -0,0 +1,91 @@
|
|||
"use client";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
import { useAutomation } from "@/hooks/use-automation";
|
||||
import { useAutomationPermissions } from "../hooks/use-automation-permissions";
|
||||
import { AutomationDefinitionSection } from "./components/automation-definition-section";
|
||||
import { AutomationDetailHeader } from "./components/automation-detail-header";
|
||||
import { AutomationDetailLoading } from "./components/automation-detail-loading";
|
||||
import { AutomationNotFound } from "./components/automation-not-found";
|
||||
import { AutomationRunsSection } from "./components/automation-runs-section";
|
||||
import { AutomationTriggersSection } from "./components/automation-triggers-section";
|
||||
|
||||
interface AutomationDetailContentProps {
|
||||
searchSpaceId: number;
|
||||
automationId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client orchestrator for one automation's detail view. Branches:
|
||||
* - permissions loading → skeleton
|
||||
* - no read permission → access denied panel
|
||||
* - bad id (NaN) → not-found panel
|
||||
* - detail fetching → skeleton
|
||||
* - detail error / null → not-found panel (we don't distinguish 404
|
||||
* from 403 in the UI)
|
||||
* - detail loaded → header + definition + triggers
|
||||
*
|
||||
* Each child component is gated independently on the relevant permission
|
||||
* so the orchestrator stays thin.
|
||||
*/
|
||||
export function AutomationDetailContent({
|
||||
searchSpaceId,
|
||||
automationId,
|
||||
}: AutomationDetailContentProps) {
|
||||
const perms = useAutomationPermissions();
|
||||
const validId = Number.isInteger(automationId) && automationId > 0;
|
||||
const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
|
||||
|
||||
if (perms.loading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (!perms.canRead) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
You don't have permission to view automations in this search space.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!validId) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} />;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (error || !automation) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutomationDetailHeader
|
||||
automation={automation}
|
||||
searchSpaceId={searchSpaceId}
|
||||
canUpdate={perms.canUpdate}
|
||||
canDelete={perms.canDelete}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div className="space-y-6 min-w-0 lg:col-span-2">
|
||||
<AutomationDefinitionSection definition={automation.definition} />
|
||||
<AutomationRunsSection automationId={automation.id} />
|
||||
</div>
|
||||
<div className="space-y-6 min-w-0">
|
||||
<AutomationTriggersSection
|
||||
triggers={automation.triggers}
|
||||
automationId={automation.id}
|
||||
canUpdate={perms.canUpdate}
|
||||
canDelete={perms.canDelete}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
"use client";
|
||||
import { ListOrdered, Settings2, Tag, Target } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { AutomationDefinition } from "@/contracts/types/automation.types";
|
||||
import { ExecutionSummary } from "./execution-summary";
|
||||
import { InputsSchemaPreview } from "./inputs-schema-preview";
|
||||
import { PlanStepCard } from "./plan-step-card";
|
||||
|
||||
interface AutomationDefinitionSectionProps {
|
||||
definition: AutomationDefinition;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Definition card. Read view; editing happens on the sibling /edit
|
||||
* route (Edit button in the header). Layout is top-down:
|
||||
* goal → tags → execution defaults → inputs schema (if any) → plan
|
||||
*
|
||||
* The schema_version is rendered as a small badge next to the section
|
||||
* title so it's discoverable but doesn't fight for attention.
|
||||
*/
|
||||
export function AutomationDefinitionSection({ definition }: AutomationDefinitionSectionProps) {
|
||||
const hasTags = definition.metadata.tags.length > 0;
|
||||
const hasInputs = !!definition.inputs;
|
||||
|
||||
return (
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-base font-semibold">Definition</CardTitle>
|
||||
<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">
|
||||
v{definition.schema_version}
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{definition.goal && (
|
||||
<Field icon={Target} label="Goal">
|
||||
<p className="text-sm text-foreground">{definition.goal}</p>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{hasTags && (
|
||||
<Field icon={Tag} label="Tags">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{definition.metadata.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field icon={Settings2} label="Execution defaults">
|
||||
<ExecutionSummary execution={definition.execution} />
|
||||
</Field>
|
||||
|
||||
{hasInputs && (
|
||||
<Field icon={Settings2} label="Inputs schema">
|
||||
{definition.inputs && <InputsSchemaPreview inputs={definition.inputs} />}
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field
|
||||
icon={ListOrdered}
|
||||
label={`Plan · ${definition.plan.length} step${definition.plan.length === 1 ? "" : "s"}`}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{definition.plan.map((step, idx) => (
|
||||
<PlanStepCard key={step.step_id} step={step} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
icon: Icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof Target;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||
<Icon className="h-3.5 w-3.5" aria-hidden />
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { ArrowLeft, Pause, Pencil, Play, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useState } from "react";
|
||||
import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import type { Automation } from "@/contracts/types/automation.types";
|
||||
import { AutomationStatusBadge } from "../../components/automation-status-badge";
|
||||
import { DeleteAutomationDialog } from "../../components/delete-automation-dialog";
|
||||
|
||||
interface AutomationDetailHeaderProps {
|
||||
automation: Automation;
|
||||
searchSpaceId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Title bar for the detail page: back link, name, status badge,
|
||||
* description, and the two destructive-ish primary actions (pause /
|
||||
* resume + delete). Same mutation atoms as the list-row actions to
|
||||
* keep caches coherent.
|
||||
*
|
||||
* Archived automations hide the pause/resume toggle (we don't unarchive
|
||||
* here — that flow comes later if we need it).
|
||||
*/
|
||||
export function AutomationDetailHeader({
|
||||
automation,
|
||||
searchSpaceId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationDetailHeaderProps) {
|
||||
const router = useRouter();
|
||||
const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
|
||||
updateAutomationMutationAtom
|
||||
);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
|
||||
const canToggle = canUpdate && automation.status !== "archived";
|
||||
const nextStatus = automation.status === "active" ? "paused" : "active";
|
||||
const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
|
||||
const PauseIcon = automation.status === "active" ? Pause : Play;
|
||||
|
||||
const handleDeleted = useCallback(() => {
|
||||
router.push(`/dashboard/${searchSpaceId}/automations`);
|
||||
}, [router, searchSpaceId]);
|
||||
|
||||
async function handleTogglePause() {
|
||||
await updateAutomation({
|
||||
automationId: automation.id,
|
||||
patch: { status: nextStatus },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
|
||||
<Link
|
||||
href={`/dashboard/${searchSpaceId}/automations`}
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
|
||||
Back to automations
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<h1 className="text-xl md:text-2xl font-semibold text-foreground break-words">
|
||||
{automation.name}
|
||||
</h1>
|
||||
<AutomationStatusBadge status={automation.status} />
|
||||
</div>
|
||||
{automation.description && (
|
||||
<p className="text-sm text-muted-foreground max-w-3xl">{automation.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{canUpdate && (
|
||||
<Button asChild type="button" variant="outline" size="sm">
|
||||
<Link href={`/dashboard/${searchSpaceId}/automations/${automation.id}/edit`}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
{canToggle && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleTogglePause}
|
||||
disabled={updating}
|
||||
>
|
||||
{updating ? (
|
||||
<Spinner size="xs" className="mr-2" />
|
||||
) : (
|
||||
<PauseIcon className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{pauseLabel}
|
||||
</Button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canDelete && (
|
||||
<DeleteAutomationDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={setDeleteOpen}
|
||||
automationId={automation.id}
|
||||
automationName={automation.name}
|
||||
searchSpaceId={searchSpaceId}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
"use client";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
/**
|
||||
* Skeleton for the detail page. Mirrors the loaded view's main/sidebar
|
||||
* grid (Definition + Runs on the left, Triggers on the right) so layout
|
||||
* doesn't reflow when data arrives.
|
||||
*/
|
||||
export function AutomationDetailLoading() {
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-7 w-64" />
|
||||
<Skeleton className="h-5 w-16 rounded-md" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div className="space-y-6 min-w-0 lg:col-span-2">
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="space-y-6 min-w-0">
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-24" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
"use client";
|
||||
import { ArrowLeft, FileWarning } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface AutomationNotFoundProps {
|
||||
searchSpaceId: number;
|
||||
error?: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendered when the detail fetch fails (404 / 403 / network) or the id
|
||||
* is not a number. We don't distinguish "missing" from "forbidden" in the
|
||||
* UI on purpose — leaking that an id exists you can't read is worse than
|
||||
* a vague message.
|
||||
*/
|
||||
export function AutomationNotFound({ searchSpaceId, error }: AutomationNotFoundProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<FileWarning className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Automation not found</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
This automation doesn't exist or you don't have access to it.
|
||||
{error?.message ? ` (${error.message})` : null}
|
||||
</p>
|
||||
<Button asChild variant="outline" size="sm" className="mt-6">
|
||||
<Link href={`/dashboard/${searchSpaceId}/automations`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to automations
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
"use client";
|
||||
import { History } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useAutomationRuns } from "@/hooks/use-automation-runs";
|
||||
import { RunRow } from "./run-row";
|
||||
import { RunsLoading } from "./runs-loading";
|
||||
|
||||
interface AutomationRunsSectionProps {
|
||||
automationId: number;
|
||||
}
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
/**
|
||||
* Run history card. Shows the most recent ``LIMIT`` runs; pagination is
|
||||
* intentionally deferred — for the foreseeable v1 surface (one-trigger
|
||||
* automations firing daily), 20 covers ~3 weeks of history which is
|
||||
* enough to tell whether things are working. Real "load more" lands if
|
||||
* we see usage spike past that.
|
||||
*/
|
||||
export function AutomationRunsSection({ automationId }: AutomationRunsSectionProps) {
|
||||
const { data, isLoading, error } = useAutomationRuns(automationId, { limit: LIMIT });
|
||||
const runs = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
|
||||
<History className="h-4 w-4 text-muted-foreground" aria-hidden />
|
||||
Recent runs
|
||||
</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Most recent first. Click a row to inspect step results, output and artifacts.
|
||||
</p>
|
||||
</div>
|
||||
{!isLoading && !error && data && (
|
||||
<span className="text-xs text-muted-foreground">{data.total} total</span>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<RunsLoading />
|
||||
) : error ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Couldn't load runs{error.message ? `: ${error.message}` : "."}
|
||||
</p>
|
||||
) : runs.length === 0 ? (
|
||||
<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
|
||||
<History className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
|
||||
<p className="mt-2 text-sm font-medium text-foreground">No runs yet</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
This automation hasn't fired. Once a trigger fires (or you invoke it manually), runs
|
||||
will appear here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{runs.map((run) => (
|
||||
<RunRow key={run.id} run={run} automationId={automationId} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
"use client";
|
||||
import { CalendarClock } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { Trigger } from "@/contracts/types/automation.types";
|
||||
import { TriggerCard } from "./trigger-card";
|
||||
|
||||
interface AutomationTriggersSectionProps {
|
||||
triggers: Trigger[];
|
||||
automationId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Triggers card. Lists each attached trigger with its own enable
|
||||
* toggle and remove button. v1 attaches triggers at automation-creation
|
||||
* time only; there is no in-place "add trigger" affordance here.
|
||||
*/
|
||||
export function AutomationTriggersSection({
|
||||
triggers,
|
||||
automationId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationTriggersSectionProps) {
|
||||
return (
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="text-base font-semibold">Triggers</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
When this automation fires. v1 supports scheduled triggers only.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{triggers.length === 0 ? (
|
||||
<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
|
||||
<CalendarClock className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
|
||||
<p className="mt-2 text-sm font-medium text-foreground">No triggers attached</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
This automation can still be invoked, but nothing will fire it on its own.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{triggers.map((trigger) => (
|
||||
<TriggerCard
|
||||
key={trigger.id}
|
||||
trigger={trigger}
|
||||
automationId={automationId}
|
||||
canUpdate={canUpdate}
|
||||
canDelete={canDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { removeTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
|
||||
interface DeleteTriggerDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
automationId: number;
|
||||
triggerId: number;
|
||||
triggerLabel: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm + detach one trigger from its automation. The automation itself
|
||||
* is untouched; only this trigger row is removed. The mutation atom
|
||||
* invalidates the parent automation detail so the page rerenders.
|
||||
*/
|
||||
export function DeleteTriggerDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
automationId,
|
||||
triggerId,
|
||||
triggerLabel,
|
||||
}: DeleteTriggerDialogProps) {
|
||||
const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
async function handleConfirm() {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await removeTrigger({ automationId, triggerId });
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove this trigger?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<span className="font-medium text-foreground">{triggerLabel}</span> will be detached.
|
||||
The automation itself stays, but it won't fire on this trigger anymore.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirm}
|
||||
disabled={submitting}
|
||||
className="bg-destructive text-white hover:bg-destructive/90"
|
||||
>
|
||||
{submitting ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Spinner size="xs" />
|
||||
Removing…
|
||||
</span>
|
||||
) : (
|
||||
"Remove"
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
import type { Execution } from "@/contracts/types/automation.types";
|
||||
|
||||
interface ExecutionSummaryProps {
|
||||
execution: Execution;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact view of an automation's execution defaults (wall-clock cap,
|
||||
* retries, backoff, concurrency, on_failure presence). Per-step overrides
|
||||
* are shown inside each PlanStepCard, not here.
|
||||
*/
|
||||
export function ExecutionSummary({ execution }: ExecutionSummaryProps) {
|
||||
return (
|
||||
<dl className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-xs">
|
||||
<Item label="Timeout" value={`${execution.timeout_seconds}s`} />
|
||||
<Item label="Max retries" value={String(execution.max_retries)} />
|
||||
<Item label="Retry backoff" value={execution.retry_backoff} />
|
||||
<Item label="Concurrency" value={execution.concurrency} />
|
||||
{execution.on_failure.length > 0 && (
|
||||
<Item
|
||||
label="On failure"
|
||||
value={`${execution.on_failure.length} step${execution.on_failure.length === 1 ? "" : "s"}`}
|
||||
/>
|
||||
)}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
function Item({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<dt className="text-muted-foreground">{label}</dt>
|
||||
<dd className="text-foreground font-medium truncate">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
import type { Inputs } from "@/contracts/types/automation.types";
|
||||
|
||||
interface InputsSchemaPreviewProps {
|
||||
inputs: Inputs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read-only preview of an automation's accepted-inputs schema. Most
|
||||
* automations don't define inputs (defaults are baked into the trigger's
|
||||
* static_inputs), so the parent skips rendering this card when ``inputs``
|
||||
* is null.
|
||||
*/
|
||||
export function InputsSchemaPreview({ inputs }: InputsSchemaPreviewProps) {
|
||||
return (
|
||||
<div className="rounded-md bg-muted/40 px-3 py-2 max-h-72 overflow-auto">
|
||||
<JsonView src={inputs.schema} collapsed={2} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
"use client";
|
||||
import { ArrowRightCircle, GitCommitHorizontal } from "lucide-react";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
import type { PlanStep } from "@/contracts/types/automation.types";
|
||||
|
||||
interface PlanStepCardProps {
|
||||
step: PlanStep;
|
||||
index: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read-only view of one plan step. Renders the step_id + action prominently,
|
||||
* then a definition list of the per-step knobs, and finally the params as
|
||||
* formatted JSON. Editable mode is out of scope here — definition edits live
|
||||
* on the (future) raw-JSON path.
|
||||
*/
|
||||
export function PlanStepCard({ step, index }: PlanStepCardProps) {
|
||||
return (
|
||||
<div className="rounded-md border border-border/60 overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-foreground">{step.step_id}</span>
|
||||
<ArrowRightCircle className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
|
||||
<span className="text-xs font-mono text-muted-foreground">{step.action}</span>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 space-y-3">
|
||||
{(step.when ||
|
||||
step.output_as ||
|
||||
step.max_retries != null ||
|
||||
step.timeout_seconds != null) && (
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
|
||||
{step.when && (
|
||||
<DefRow label="When" value={<code className="font-mono">{step.when}</code>} />
|
||||
)}
|
||||
{step.output_as && (
|
||||
<DefRow
|
||||
label="Output as"
|
||||
value={<code className="font-mono">{step.output_as}</code>}
|
||||
/>
|
||||
)}
|
||||
{step.max_retries != null && (
|
||||
<DefRow label="Max retries" value={String(step.max_retries)} />
|
||||
)}
|
||||
{step.timeout_seconds != null && (
|
||||
<DefRow label="Timeout" value={`${step.timeout_seconds}s`} />
|
||||
)}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground mb-1.5">
|
||||
<GitCommitHorizontal className="h-3.5 w-3.5" aria-hidden />
|
||||
Params
|
||||
</div>
|
||||
<div className="rounded-md bg-muted/40 px-3 py-2 overflow-auto">
|
||||
<JsonView src={step.params} collapsed={1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DefRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-baseline gap-2 min-w-0">
|
||||
<dt className="text-muted-foreground shrink-0">{label}:</dt>
|
||||
<dd className="text-foreground min-w-0 truncate">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
"use client";
|
||||
import {
|
||||
AlertCircle,
|
||||
ChevronDown,
|
||||
FileOutput,
|
||||
GitCommitHorizontal,
|
||||
Package,
|
||||
Settings2,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import type { RunStepResult } from "@/contracts/types/automation.types";
|
||||
import { useAutomationRun } from "@/hooks/use-automation-runs";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { RunStepResultCard } from "./run-step-result-card";
|
||||
|
||||
interface RunDetailsPanelProps {
|
||||
automationId: number;
|
||||
runId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Expanded view of a single run. Fetches lazily — the parent only renders
|
||||
* this once the row is opened, so the list view stays cheap.
|
||||
*
|
||||
* We surface the run outcome readably: a run-level error first (when
|
||||
* present), then per-step cards that render the agent's markdown
|
||||
* ``final_message`` directly, and finally the structural artifacts/inputs.
|
||||
* The full ``definition_snapshot`` is omitted because it usually mirrors the
|
||||
* live definition — surfacing it would dominate the panel without informing
|
||||
* what the user is trying to learn ("did this work? what did it do?").
|
||||
*/
|
||||
export function RunDetailsPanel({ automationId, runId }: RunDetailsPanelProps) {
|
||||
const { data: run, isLoading, error } = useAutomationRun(automationId, runId);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 border-t border-border/60 bg-muted/20 p-4">
|
||||
<Skeleton className="h-3 w-32" />
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !run) {
|
||||
return (
|
||||
<div className="border-t border-border/60 bg-muted/20 p-4 text-xs text-muted-foreground">
|
||||
Couldn't load run details{error?.message ? `: ${error.message}` : "."}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const runError = run.error && Object.keys(run.error).length > 0 ? run.error : null;
|
||||
const hasOutput = run.output && Object.keys(run.output).length > 0;
|
||||
const hasInputs = Object.keys(run.inputs ?? {}).length > 0;
|
||||
const steps = run.step_results as RunStepResult[];
|
||||
const hasDiagnostics = run.artifacts.length > 0 || hasInputs;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 border-t border-border/60 bg-muted/20 p-4">
|
||||
{runError ? <RunErrorSection error={runError} /> : null}
|
||||
|
||||
{hasOutput ? (
|
||||
<Section icon={FileOutput} label="Output">
|
||||
<JsonBlock value={run.output} />
|
||||
</Section>
|
||||
) : null}
|
||||
|
||||
<Section icon={GitCommitHorizontal} label={`Step results · ${steps.length}`}>
|
||||
{steps.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">No steps recorded.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{steps.map((step, index) => (
|
||||
<RunStepResultCard key={step.step_id ?? index} step={step} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{hasDiagnostics ? <Separator className="bg-border/60" /> : null}
|
||||
|
||||
{run.artifacts.length > 0 ? (
|
||||
<Section icon={Package} label={`Artifacts · ${run.artifacts.length}`}>
|
||||
<JsonBlock value={run.artifacts} />
|
||||
</Section>
|
||||
) : null}
|
||||
|
||||
{hasInputs ? (
|
||||
<Section icon={Settings2} label="Resolved inputs">
|
||||
<JsonBlock value={run.inputs} />
|
||||
</Section>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Run-level error: a readable destructive alert when a message is present,
|
||||
* with the full structured error available behind a raw toggle.
|
||||
*/
|
||||
function RunErrorSection({ error }: { error: Record<string, unknown> }) {
|
||||
const [rawOpen, setRawOpen] = useState(false);
|
||||
const message = typeof error.message === "string" ? error.message : null;
|
||||
const type = typeof error.type === "string" ? error.type : "Run failed";
|
||||
|
||||
return (
|
||||
<Section icon={AlertCircle} label="Error" tone="destructive">
|
||||
{message ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle aria-hidden />
|
||||
<AlertTitle>{type}</AlertTitle>
|
||||
<AlertDescription className="wrap-break-word">{message}</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
<Collapsible open={rawOpen} onOpenChange={setRawOpen} className="mt-2">
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-fit px-2 text-xs text-muted-foreground"
|
||||
aria-expanded={rawOpen}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"transition-transform motion-reduce:transition-none",
|
||||
rawOpen && "rotate-180"
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
{rawOpen ? "Hide raw" : "View raw"}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ScrollArea className="mt-2 max-h-64 rounded-md bg-muted/40 px-3 py-2">
|
||||
<JsonView src={error} collapsed={1} />
|
||||
</ScrollArea>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({
|
||||
icon: Icon,
|
||||
label,
|
||||
tone = "default",
|
||||
children,
|
||||
}: {
|
||||
icon: typeof AlertCircle;
|
||||
label: string;
|
||||
tone?: "default" | "destructive";
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider",
|
||||
tone === "destructive" ? "text-destructive" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="size-3" aria-hidden />
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JsonBlock({ value }: { value: unknown }) {
|
||||
return (
|
||||
<ScrollArea className="max-h-64 rounded-md bg-muted/40 px-3 py-2">
|
||||
<JsonView src={value} collapsed={1} />
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
"use client";
|
||||
import { ChevronDown, ChevronRight, Hand } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import type { RunSummary } from "@/contracts/types/automation.types";
|
||||
import { formatDuration } from "@/lib/automations/run-duration";
|
||||
import { formatRelativeDate } from "@/lib/format-date";
|
||||
import { RunDetailsPanel } from "./run-details-panel";
|
||||
import { RunStatusBadge } from "./run-status-badge";
|
||||
|
||||
interface RunRowProps {
|
||||
run: RunSummary;
|
||||
automationId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* One run row. Click to expand → fetches the full run and shows the
|
||||
* details panel inline. State is local to each row so multiple panels
|
||||
* can be open at once (or none).
|
||||
*/
|
||||
export function RunRow({ run, automationId }: RunRowProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const duration = formatDuration(run.started_at, run.finished_at);
|
||||
const startedLabel = run.started_at
|
||||
? formatRelativeDate(run.started_at)
|
||||
: formatRelativeDate(run.created_at);
|
||||
|
||||
return (
|
||||
<div className="rounded-md border border-border/60 overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
className="flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{open ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
|
||||
)}
|
||||
<RunStatusBadge status={run.status} />
|
||||
<span className="text-xs text-muted-foreground truncate">{startedLabel}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0 text-xs text-muted-foreground">
|
||||
{duration && <span className="font-mono">{duration}</span>}
|
||||
<TriggerSource triggerId={run.trigger_id ?? null} />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{open && <RunDetailsPanel automationId={automationId} runId={run.id} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TriggerSource({ triggerId }: { triggerId: number | null }) {
|
||||
if (triggerId == null) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Hand className="h-3 w-3" aria-hidden />
|
||||
Manual
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span>via trigger #{triggerId}</span>;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
"use client";
|
||||
import { AlertCircle, CheckCircle2, Clock, Loader2, TimerOff, XCircle } from "lucide-react";
|
||||
import type { RunStatus } from "@/contracts/types/automation.types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const STATUS_STYLES: Record<
|
||||
RunStatus,
|
||||
{ label: string; icon: typeof CheckCircle2; classes: string; spin?: boolean }
|
||||
> = {
|
||||
pending: {
|
||||
label: "Pending",
|
||||
icon: Clock,
|
||||
classes: "bg-muted text-muted-foreground border-border/60",
|
||||
},
|
||||
running: {
|
||||
label: "Running",
|
||||
icon: Loader2,
|
||||
classes: "bg-blue-500/10 text-blue-600 border-blue-500/20",
|
||||
spin: true,
|
||||
},
|
||||
succeeded: {
|
||||
label: "Succeeded",
|
||||
icon: CheckCircle2,
|
||||
classes: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
|
||||
},
|
||||
failed: {
|
||||
label: "Failed",
|
||||
icon: XCircle,
|
||||
classes: "bg-destructive/10 text-destructive border-destructive/20",
|
||||
},
|
||||
cancelled: {
|
||||
label: "Cancelled",
|
||||
icon: AlertCircle,
|
||||
classes: "bg-muted text-muted-foreground border-border/60",
|
||||
},
|
||||
timed_out: {
|
||||
label: "Timed out",
|
||||
icon: TimerOff,
|
||||
classes: "bg-amber-500/10 text-amber-600 border-amber-500/20",
|
||||
},
|
||||
};
|
||||
|
||||
export function RunStatusBadge({ status, className }: { status: RunStatus; className?: string }) {
|
||||
const { label, icon: Icon, classes, spin } = STATUS_STYLES[status];
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
|
||||
classes,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Icon className={cn("h-3 w-3", spin && "animate-spin")} aria-hidden />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
"use client";
|
||||
import { CheckCircle2, ChevronDown, MinusCircle, XCircle } from "lucide-react";
|
||||
import { memo, useState } from "react";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
import { MarkdownViewer } from "@/components/markdown-viewer";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import type { RunStepResult } from "@/contracts/types/automation.types";
|
||||
import { formatDuration } from "@/lib/automations/run-duration";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type BadgeVariant = React.ComponentProps<typeof Badge>["variant"];
|
||||
|
||||
const STATUS_BADGE: Record<
|
||||
string,
|
||||
{ label: string; variant: BadgeVariant; icon: typeof CheckCircle2 }
|
||||
> = {
|
||||
succeeded: { label: "Succeeded", variant: "outline", icon: CheckCircle2 },
|
||||
failed: { label: "Failed", variant: "destructive", icon: XCircle },
|
||||
skipped: { label: "Skipped", variant: "secondary", icon: MinusCircle },
|
||||
};
|
||||
|
||||
function StepStatusBadge({ status }: { status: string }) {
|
||||
const meta = STATUS_BADGE[status] ?? {
|
||||
label: status,
|
||||
variant: "outline" as const,
|
||||
icon: MinusCircle,
|
||||
};
|
||||
const Icon = meta.icon;
|
||||
return (
|
||||
<Badge variant={meta.variant} className="shrink-0">
|
||||
<Icon aria-hidden />
|
||||
{meta.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* One step from a run's ``step_results``. Surfaces the agent's markdown
|
||||
* ``final_message`` first-class (rendered, not raw), shows step errors as a
|
||||
* readable alert, and keeps the full structured payload behind a "View raw"
|
||||
* collapsible escape hatch.
|
||||
*/
|
||||
export const RunStepResultCard = memo(function RunStepResultCard({
|
||||
step,
|
||||
}: {
|
||||
step: RunStepResult;
|
||||
}) {
|
||||
const [rawOpen, setRawOpen] = useState(false);
|
||||
|
||||
const duration = formatDuration(step.started_at, step.finished_at);
|
||||
const attempts = step.attempts ?? 0;
|
||||
const finalMessage =
|
||||
typeof step.result?.final_message === "string" ? step.result.final_message : null;
|
||||
const errorMessage = step.error?.message;
|
||||
const hasMeta = Boolean(duration) || attempts > 1;
|
||||
|
||||
return (
|
||||
<Card className="border-border/60 shadow-none">
|
||||
<CardHeader className="gap-2 space-y-0 p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="truncate font-mono text-xs font-medium">{step.action}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">{step.step_id}</span>
|
||||
</div>
|
||||
<StepStatusBadge status={step.status} />
|
||||
</div>
|
||||
{hasMeta ? (
|
||||
<div className="flex items-center gap-3 text-[11px] text-muted-foreground tabular-nums">
|
||||
{duration ? <span>{duration}</span> : null}
|
||||
{attempts > 1 ? <span>{attempts} attempts</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex flex-col gap-3 p-3 pt-0">
|
||||
{errorMessage ? (
|
||||
<Alert variant="destructive">
|
||||
<XCircle aria-hidden />
|
||||
<AlertTitle>{step.error?.type ?? "Error"}</AlertTitle>
|
||||
<AlertDescription className="wrap-break-word">{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
{finalMessage ? (
|
||||
<div className="min-w-0 wrap-break-word rounded-md border border-border/60 bg-background px-3 py-2">
|
||||
<MarkdownViewer content={finalMessage} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Collapsible open={rawOpen} onOpenChange={setRawOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-fit px-2 text-xs text-muted-foreground"
|
||||
aria-expanded={rawOpen}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"transition-transform motion-reduce:transition-none",
|
||||
rawOpen && "rotate-180"
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
{rawOpen ? "Hide raw" : "View raw"}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ScrollArea className="mt-2 max-h-64 rounded-md bg-muted/40 px-3 py-2">
|
||||
<JsonView src={step} collapsed={1} />
|
||||
</ScrollArea>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
"use client";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const ROW_KEYS = ["a", "b", "c"] as const;
|
||||
|
||||
export function RunsLoading() {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{ROW_KEYS.map((key) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center justify-between gap-4 rounded-md border border-border/60 px-4 py-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-5 w-20 rounded-md" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { AlertCircle, CalendarClock, Clock, Pencil, Save, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { type Trigger, triggerUpdateRequest } from "@/contracts/types/automation.types";
|
||||
import { describeCron } from "@/lib/automations/describe-cron";
|
||||
import { formatRelativeDate, formatRelativeFutureDate } from "@/lib/format-date";
|
||||
import { DeleteTriggerDialog } from "./delete-trigger-dialog";
|
||||
|
||||
interface TriggerCardProps {
|
||||
trigger: Trigger;
|
||||
automationId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
interface TriggerDraft {
|
||||
params: Record<string, unknown>;
|
||||
static_inputs: Record<string, unknown>;
|
||||
}
|
||||
|
||||
function draftFromTrigger(trigger: Trigger): TriggerDraft {
|
||||
return {
|
||||
params: trigger.params,
|
||||
static_inputs: trigger.static_inputs ?? {},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* One trigger row in the Triggers section of the detail page. Renders:
|
||||
* - type icon + human-readable schedule + timezone
|
||||
* - last_fired_at / next_fire_at hints
|
||||
* - static_inputs as formatted JSON (when present)
|
||||
* - enable toggle + remove button + inline edit (each gated independently)
|
||||
*
|
||||
* Inline edit covers ``params`` and ``static_inputs`` — the two fields the
|
||||
* backend ``PATCH /triggers/[id]`` endpoint accepts beyond ``enabled``.
|
||||
* ``enabled`` stays on the Switch so the two surfaces don't fight.
|
||||
*/
|
||||
export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: TriggerCardProps) {
|
||||
const { mutateAsync: updateTrigger, isPending: updating } =
|
||||
useAtomValue(updateTriggerMutationAtom);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [draft, setDraft] = useState<TriggerDraft>(() => draftFromTrigger(trigger));
|
||||
const [issues, setIssues] = useState<string[]>([]);
|
||||
|
||||
const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
|
||||
const tz = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
|
||||
const human = cron ? describeCron(cron) : trigger.type;
|
||||
const triggerLabel = cron ? `${human} · ${tz}` : trigger.type;
|
||||
const hasStaticInputs = Object.keys(trigger.static_inputs ?? {}).length > 0;
|
||||
|
||||
async function handleToggle(checked: boolean) {
|
||||
await updateTrigger({
|
||||
automationId,
|
||||
triggerId: trigger.id,
|
||||
patch: { enabled: checked },
|
||||
});
|
||||
}
|
||||
|
||||
function startEdit() {
|
||||
setDraft(draftFromTrigger(trigger));
|
||||
setIssues([]);
|
||||
setIsEditing(true);
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
setIsEditing(false);
|
||||
setIssues([]);
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
setIssues([]);
|
||||
const result = triggerUpdateRequest.safeParse(draft);
|
||||
if (!result.success) {
|
||||
setIssues(
|
||||
result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await updateTrigger({
|
||||
automationId,
|
||||
triggerId: trigger.id,
|
||||
patch: result.data,
|
||||
});
|
||||
setIsEditing(false);
|
||||
} catch (err) {
|
||||
setIssues([(err as Error).message ?? "Update failed"]);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md border border-border/60 overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-medium text-foreground">{human}</span>
|
||||
<span className="text-muted-foreground">· {tz}</span>
|
||||
</div>
|
||||
{cron && <code className="text-xs font-mono text-muted-foreground">{cron}</code>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{canUpdate && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{trigger.enabled ? "Enabled" : "Off"}
|
||||
</span>
|
||||
<Switch
|
||||
checked={trigger.enabled}
|
||||
onCheckedChange={handleToggle}
|
||||
disabled={updating || isEditing}
|
||||
aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{canUpdate && !isEditing && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground"
|
||||
onClick={startEdit}
|
||||
aria-label="Edit trigger"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
disabled={isEditing}
|
||||
aria-label="Remove trigger"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 space-y-3 text-xs">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<div className="rounded-md border border-input bg-background px-3 py-2 max-h-[24rem] overflow-auto">
|
||||
<JsonView
|
||||
src={draft}
|
||||
editable
|
||||
onChange={(next) => setDraft(next as TriggerDraft)}
|
||||
collapsed={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{issues.length > 0 && (
|
||||
<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2">
|
||||
<div className="flex items-center gap-1.5 font-medium text-destructive mb-1">
|
||||
<AlertCircle className="h-3 w-3" aria-hidden />
|
||||
{issues.length === 1 ? "1 issue" : `${issues.length} issues`}
|
||||
</div>
|
||||
<ul className="space-y-0.5 text-destructive list-disc list-inside">
|
||||
{issues.map((issue) => (
|
||||
<li key={issue}>{issue}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={cancelEdit}
|
||||
disabled={updating}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button" size="sm" onClick={saveEdit} disabled={updating}>
|
||||
{updating ? (
|
||||
<Spinner size="xs" className="mr-1.5" />
|
||||
) : (
|
||||
<Save className="mr-1.5 h-3.5 w-3.5" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{(trigger.last_fired_at || trigger.next_fire_at) && (
|
||||
<dl className="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1">
|
||||
{trigger.next_fire_at && (
|
||||
<TimeRow
|
||||
label="Next fire"
|
||||
iso={trigger.next_fire_at}
|
||||
tense="future"
|
||||
highlight={trigger.enabled}
|
||||
/>
|
||||
)}
|
||||
{trigger.last_fired_at && (
|
||||
<TimeRow label="Last fired" iso={trigger.last_fired_at} tense="past" />
|
||||
)}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
{hasStaticInputs && (
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-1">Static inputs</div>
|
||||
<div className="rounded-md bg-muted/40 px-3 py-2 overflow-auto">
|
||||
<JsonView src={trigger.static_inputs} collapsed={1} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canDelete && (
|
||||
<DeleteTriggerDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={setDeleteOpen}
|
||||
automationId={automationId}
|
||||
triggerId={trigger.id}
|
||||
triggerLabel={triggerLabel}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TimeRow({
|
||||
label,
|
||||
iso,
|
||||
tense,
|
||||
highlight = false,
|
||||
}: {
|
||||
label: string;
|
||||
iso: string;
|
||||
tense: "past" | "future";
|
||||
highlight?: boolean;
|
||||
}) {
|
||||
const formatted = tense === "future" ? formatRelativeFutureDate(iso) : formatRelativeDate(iso);
|
||||
return (
|
||||
<>
|
||||
<dt className="text-muted-foreground inline-flex items-center gap-1.5 whitespace-nowrap">
|
||||
<Clock className="h-3 w-3" aria-hidden />
|
||||
{label}
|
||||
</dt>
|
||||
<dd
|
||||
className={
|
||||
highlight
|
||||
? "text-foreground font-medium min-w-0 truncate"
|
||||
: "text-muted-foreground min-w-0 truncate"
|
||||
}
|
||||
title={new Date(iso).toLocaleString()}
|
||||
>
|
||||
{formatted}
|
||||
</dd>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
"use client";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
import { useAutomation } from "@/hooks/use-automation";
|
||||
import { AutomationBuilderForm } from "../../components/builder/automation-builder-form";
|
||||
import { useAutomationPermissions } from "../../hooks/use-automation-permissions";
|
||||
import { AutomationDetailLoading } from "../components/automation-detail-loading";
|
||||
import { AutomationNotFound } from "../components/automation-not-found";
|
||||
import { AutomationEditHeader } from "./components/automation-edit-header";
|
||||
|
||||
interface AutomationEditContentProps {
|
||||
searchSpaceId: number;
|
||||
automationId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client orchestrator for the edit route. Mirrors detail-content's branch
|
||||
* structure but gates on ``canUpdate`` instead of ``canRead``: a user who
|
||||
* can read but not update is bounced to the access-denied panel.
|
||||
*/
|
||||
export function AutomationEditContent({ searchSpaceId, automationId }: AutomationEditContentProps) {
|
||||
const perms = useAutomationPermissions();
|
||||
const validId = Number.isInteger(automationId) && automationId > 0;
|
||||
const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
|
||||
|
||||
if (perms.loading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (!perms.canUpdate) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
You don't have permission to edit automations in this search space.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!validId) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} />;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (error || !automation) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutomationEditHeader automation={automation} searchSpaceId={searchSpaceId} />
|
||||
<AutomationBuilderForm mode="edit" searchSpaceId={searchSpaceId} automation={automation} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
"use client";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Automation } from "@/contracts/types/automation.types";
|
||||
|
||||
interface AutomationEditHeaderProps {
|
||||
automation: Automation;
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
export function AutomationEditHeader({ automation, searchSpaceId }: AutomationEditHeaderProps) {
|
||||
const detailHref = `/dashboard/${searchSpaceId}/automations/${automation.id}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
|
||||
<Link href={detailHref} className="text-xs text-muted-foreground">
|
||||
<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
|
||||
Back to automation
|
||||
</Link>
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-semibold text-foreground wrap-break-word">
|
||||
Edit automation
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">{automation.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { AutomationEditContent } from "./automation-edit-content";
|
||||
|
||||
export default async function AutomationEditPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ search_space_id: string; automation_id: string }>;
|
||||
}) {
|
||||
const { search_space_id, automation_id } = await params;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<AutomationEditContent
|
||||
searchSpaceId={Number(search_space_id)}
|
||||
automationId={Number(automation_id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { AutomationDetailContent } from "./automation-detail-content";
|
||||
|
||||
export default async function AutomationDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ search_space_id: string; automation_id: string }>;
|
||||
}) {
|
||||
const { search_space_id, automation_id } = await params;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<AutomationDetailContent
|
||||
searchSpaceId={Number(search_space_id)}
|
||||
automationId={Number(automation_id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
"use client";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
import { useAutomations } from "@/hooks/use-automations";
|
||||
import { AutomationsEmptyState } from "./components/automations-empty-state";
|
||||
import { AutomationsHeader } from "./components/automations-header";
|
||||
import { AutomationsTable } from "./components/automations-table";
|
||||
import { useAutomationPermissions } from "./hooks/use-automation-permissions";
|
||||
|
||||
interface AutomationsContentProps {
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client orchestrator for the automations list page. Pulls the active
|
||||
* search space's first page (via ``useAutomations`` → ``automationsListAtom``)
|
||||
* and the user's permissions, then decides between empty / loading / table.
|
||||
*
|
||||
* Read access is mandatory; anything else is hidden behind RBAC. The
|
||||
* permissions hook is co-located in this slice so adding/removing
|
||||
* surfaces is a one-file change.
|
||||
*/
|
||||
export function AutomationsContent({ searchSpaceId }: AutomationsContentProps) {
|
||||
const { automations, total, loading, error } = useAutomations();
|
||||
const perms = useAutomationPermissions();
|
||||
|
||||
if (perms.loading) {
|
||||
// Permissions gate the entire page; defer everything until we know.
|
||||
return (
|
||||
<>
|
||||
<AutomationsHeader searchSpaceId={searchSpaceId} total={0} loading canCreate={false} />
|
||||
<AutomationsTable
|
||||
automations={[]}
|
||||
searchSpaceId={searchSpaceId}
|
||||
loading
|
||||
canUpdate={false}
|
||||
canDelete={false}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!perms.canRead) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
You don't have permission to view automations in this search space.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<AutomationsHeader
|
||||
searchSpaceId={searchSpaceId}
|
||||
total={0}
|
||||
loading={false}
|
||||
canCreate={perms.canCreate}
|
||||
/>
|
||||
<div className="rounded-lg border border-destructive/40 bg-destructive/5 px-6 py-8 text-center">
|
||||
<p className="text-sm text-destructive">Couldn't load automations. {error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!loading && automations.length === 0) {
|
||||
return (
|
||||
<>
|
||||
<AutomationsHeader
|
||||
searchSpaceId={searchSpaceId}
|
||||
total={0}
|
||||
loading={false}
|
||||
canCreate={perms.canCreate}
|
||||
showCreateCta={false}
|
||||
/>
|
||||
<AutomationsEmptyState searchSpaceId={searchSpaceId} canCreate={perms.canCreate} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutomationsHeader
|
||||
searchSpaceId={searchSpaceId}
|
||||
total={total}
|
||||
loading={loading}
|
||||
canCreate={perms.canCreate}
|
||||
/>
|
||||
<AutomationsTable
|
||||
automations={automations}
|
||||
searchSpaceId={searchSpaceId}
|
||||
loading={loading}
|
||||
canUpdate={perms.canUpdate}
|
||||
canDelete={perms.canDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { MoreHorizontal, Pause, Play, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import type { AutomationSummary } from "@/contracts/types/automation.types";
|
||||
import { DeleteAutomationDialog } from "./delete-automation-dialog";
|
||||
|
||||
interface AutomationRowActionsProps {
|
||||
automation: AutomationSummary;
|
||||
searchSpaceId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Three-dot menu on each row: pause/resume (if updatable) and delete
|
||||
* (if deletable). The menu itself is hidden when the user has neither
|
||||
* permission so we don't render an empty trigger.
|
||||
*/
|
||||
export function AutomationRowActions({
|
||||
automation,
|
||||
searchSpaceId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationRowActionsProps) {
|
||||
const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
|
||||
updateAutomationMutationAtom
|
||||
);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
|
||||
if (!canUpdate && !canDelete) return null;
|
||||
|
||||
const nextStatus = automation.status === "active" ? "paused" : "active";
|
||||
const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
|
||||
const PauseIcon = automation.status === "active" ? Pause : Play;
|
||||
const canToggle = canUpdate && automation.status !== "archived";
|
||||
|
||||
async function handleTogglePause() {
|
||||
await updateAutomation({
|
||||
automationId: automation.id,
|
||||
patch: { status: nextStatus },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
aria-label={`Actions for ${automation.name}`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-40">
|
||||
{canToggle && (
|
||||
<DropdownMenuItem onSelect={handleTogglePause} disabled={updating}>
|
||||
<PauseIcon className="mr-2 h-4 w-4" />
|
||||
{pauseLabel}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{canToggle && canDelete && <DropdownMenuSeparator />}
|
||||
{canDelete && (
|
||||
<DropdownMenuItem
|
||||
onSelect={() => setDeleteOpen(true)}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{canDelete && (
|
||||
<DeleteAutomationDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={setDeleteOpen}
|
||||
automationId={automation.id}
|
||||
automationName={automation.name}
|
||||
searchSpaceId={searchSpaceId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import { TableCell, TableRow } from "@/components/ui/table";
|
||||
import type { AutomationSummary } from "@/contracts/types/automation.types";
|
||||
import { formatRelativeDate } from "@/lib/format-date";
|
||||
import { AutomationRowActions } from "./automation-row-actions";
|
||||
import { AutomationStatusBadge } from "./automation-status-badge";
|
||||
|
||||
interface AutomationRowProps {
|
||||
automation: AutomationSummary;
|
||||
searchSpaceId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* One row in the automations table. The name links to the detail page;
|
||||
* actions are gated by ``canUpdate`` / ``canDelete``. Trigger summary
|
||||
* is intentionally left to the detail page — list responses don't
|
||||
* include triggers and we want to avoid N+1 detail fetches.
|
||||
*/
|
||||
export function AutomationRow({
|
||||
automation,
|
||||
searchSpaceId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationRowProps) {
|
||||
return (
|
||||
<TableRow className="border-b border-border/60 hover:bg-muted/40">
|
||||
<TableCell className="px-4 md:px-6 py-3 border-r border-border/60">
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<Link
|
||||
href={`/dashboard/${searchSpaceId}/automations/${automation.id}`}
|
||||
className="text-sm font-medium text-foreground hover:underline truncate"
|
||||
>
|
||||
{automation.name}
|
||||
</Link>
|
||||
{automation.description && (
|
||||
<span className="text-xs text-muted-foreground line-clamp-1">
|
||||
{automation.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3 border-r border-border/60 w-32">
|
||||
<AutomationStatusBadge status={automation.status} />
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell px-4 py-3 border-r border-border/60 w-40 text-xs text-muted-foreground">
|
||||
{formatRelativeDate(automation.updated_at)}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 md:px-6 py-3 w-16 text-right">
|
||||
<AutomationRowActions
|
||||
automation={automation}
|
||||
searchSpaceId={searchSpaceId}
|
||||
canUpdate={canUpdate}
|
||||
canDelete={canDelete}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
"use client";
|
||||
import { Archive, CircleDot, Pause } from "lucide-react";
|
||||
import type { AutomationStatus } from "@/contracts/types/automation.types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AutomationStatusBadgeProps {
|
||||
status: AutomationStatus;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Color + icon per status. Active = green, paused = amber, archived = muted.
|
||||
const STATUS_STYLES: Record<
|
||||
AutomationStatus,
|
||||
{ label: string; icon: typeof CircleDot; classes: string }
|
||||
> = {
|
||||
active: {
|
||||
label: "Active",
|
||||
icon: CircleDot,
|
||||
classes:
|
||||
"bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900/50",
|
||||
},
|
||||
paused: {
|
||||
label: "Paused",
|
||||
icon: Pause,
|
||||
classes:
|
||||
"bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900/50",
|
||||
},
|
||||
archived: {
|
||||
label: "Archived",
|
||||
icon: Archive,
|
||||
classes: "bg-muted text-muted-foreground border border-border/60",
|
||||
},
|
||||
};
|
||||
|
||||
export function AutomationStatusBadge({ status, className }: AutomationStatusBadgeProps) {
|
||||
const { label, icon: Icon, classes } = STATUS_STYLES[status];
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium",
|
||||
classes,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" aria-hidden />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
"use client";
|
||||
import { CalendarClock, Pause } from "lucide-react";
|
||||
import type { Trigger } from "@/contracts/types/automation.types";
|
||||
import { describeCron } from "@/lib/automations/describe-cron";
|
||||
|
||||
interface AutomationTriggersSummaryProps {
|
||||
triggers: Trigger[];
|
||||
}
|
||||
|
||||
/**
|
||||
* One-line summary of an automation's triggers for the list view.
|
||||
*
|
||||
* v1 only registers ``schedule`` so this stays compact:
|
||||
* - 0 triggers → "No triggers"
|
||||
* - 1 schedule trigger → "Mon–Fri at 09:00 · UTC" + disabled badge if off
|
||||
* - >1 → "N triggers"
|
||||
*
|
||||
* The detail page renders the full per-trigger editor.
|
||||
*/
|
||||
export function AutomationTriggersSummary({ triggers }: AutomationTriggersSummaryProps) {
|
||||
if (triggers.length === 0) {
|
||||
return <span className="text-xs text-muted-foreground">No triggers</span>;
|
||||
}
|
||||
|
||||
if (triggers.length > 1) {
|
||||
return <span className="text-xs text-muted-foreground">{triggers.length} triggers</span>;
|
||||
}
|
||||
|
||||
const [trigger] = triggers;
|
||||
|
||||
if (trigger.type === "schedule") {
|
||||
const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
|
||||
const tz = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
|
||||
const human = cron ? describeCron(cron) : "Schedule";
|
||||
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs">
|
||||
<CalendarClock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
|
||||
<span className="text-foreground">{human}</span>
|
||||
<span className="text-muted-foreground">· {tz}</span>
|
||||
{!trigger.enabled && (
|
||||
<span className="inline-flex items-center gap-1 rounded-md border border-border/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
|
||||
<Pause className="h-2.5 w-2.5" aria-hidden />
|
||||
Off
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="text-xs text-muted-foreground capitalize">{trigger.type}</span>;
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
"use client";
|
||||
import { MessageSquarePlus, SquarePen, Workflow } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface AutomationsEmptyStateProps {
|
||||
searchSpaceId: number;
|
||||
canCreate: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Zero-state for the automations list. The primary CTA points to a new
|
||||
* chat — creation happens via the ``create_automation`` HITL tool, not a
|
||||
* "new automation" form. We surface the chat path explicitly so users
|
||||
* don't go hunting for an "add" button that doesn't exist.
|
||||
*/
|
||||
export function AutomationsEmptyState({ searchSpaceId, canCreate }: AutomationsEmptyStateProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||||
<Workflow className="h-6 w-6" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 text-base font-semibold text-foreground">No automations yet</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
Automations let SurfSense run agent tasks on a schedule. Describe what you want in chat and
|
||||
SurfSense drafts the automation for your approval.
|
||||
</p>
|
||||
{canCreate ? (
|
||||
<div className="mt-6 flex items-center justify-center gap-2 flex-wrap">
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
Create via chat
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
|
||||
<SquarePen className="mr-2 h-4 w-4" />
|
||||
Create manually
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-6 text-xs text-muted-foreground">
|
||||
You don't have permission to create automations in this search space.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
"use client";
|
||||
import { MessageSquarePlus, SquarePen } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface AutomationsHeaderProps {
|
||||
searchSpaceId: number;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
canCreate: boolean;
|
||||
/**
|
||||
* Render the header's Create CTA. Defaults to true; the empty state owns
|
||||
* the primary CTA on its own card, so the orchestrator turns this off
|
||||
* there to avoid a duplicate button.
|
||||
*/
|
||||
showCreateCta?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page header: title + count + "Create via chat" CTA. Creation is intent-driven
|
||||
* (the create_automation tool runs inside chat with a HITL approval card), so
|
||||
* the CTA links to a new chat rather than opening a form. Model eligibility is
|
||||
* handled per-automation in the builder + approval card, not gated here.
|
||||
*/
|
||||
export function AutomationsHeader({
|
||||
searchSpaceId,
|
||||
total,
|
||||
loading,
|
||||
canCreate,
|
||||
showCreateCta = true,
|
||||
}: AutomationsHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-baseline gap-3">
|
||||
<h1 className="text-xl md:text-2xl font-semibold text-foreground">Automations</h1>
|
||||
{!loading && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{total} {total === 1 ? "automation" : "automations"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{canCreate && showCreateCta && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
|
||||
<SquarePen className="mr-2 h-4 w-4" />
|
||||
Create manually
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm">
|
||||
<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
Create via chat
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
"use client";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { TableCell, TableRow } from "@/components/ui/table";
|
||||
|
||||
const ROW_KEYS = ["sk-1", "sk-2", "sk-3"];
|
||||
|
||||
/**
|
||||
* Skeleton rows for the automations table. Number of rows is fixed since
|
||||
* we don't know the count ahead of time and three placeholders is enough
|
||||
* to communicate "loading" without flashing too much chrome.
|
||||
*/
|
||||
export function AutomationsLoadingRows() {
|
||||
return (
|
||||
<>
|
||||
{ROW_KEYS.map((key) => (
|
||||
<TableRow key={key} className="border-b border-border/60 hover:bg-transparent">
|
||||
<TableCell className="px-4 md:px-6 py-3 border-r border-border/60">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-3 w-56" />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3 border-r border-border/60 w-32">
|
||||
<Skeleton className="h-5 w-16 rounded-md" />
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell px-4 py-3 border-r border-border/60 w-40">
|
||||
<Skeleton className="h-3 w-20" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 md:px-6 py-3 w-16">
|
||||
<Skeleton className="h-8 w-8 rounded-md ml-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
"use client";
|
||||
import { Activity, CalendarDays, Workflow } from "lucide-react";
|
||||
import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import type { AutomationSummary } from "@/contracts/types/automation.types";
|
||||
import { AutomationRow } from "./automation-row";
|
||||
import { AutomationsLoadingRows } from "./automations-loading";
|
||||
|
||||
interface AutomationsTableProps {
|
||||
automations: AutomationSummary[];
|
||||
searchSpaceId: number;
|
||||
loading: boolean;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table shell + header. Rows render below — loading state renders skeleton
|
||||
* rows in the same shell so the layout doesn't shift on data arrival.
|
||||
*/
|
||||
export function AutomationsTable({
|
||||
automations,
|
||||
searchSpaceId,
|
||||
loading,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationsTableProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
|
||||
<Table className="table-fixed w-full">
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-border/60">
|
||||
<TableHead className="px-4 md:px-6 border-r border-border/60">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
|
||||
<Workflow size={14} className="opacity-60 text-muted-foreground" />
|
||||
Name
|
||||
</span>
|
||||
</TableHead>
|
||||
<TableHead className="border-r border-border/60 w-32">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
|
||||
<Activity size={14} className="opacity-60 text-muted-foreground" />
|
||||
Status
|
||||
</span>
|
||||
</TableHead>
|
||||
<TableHead className="hidden md:table-cell border-r border-border/60 w-40">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
|
||||
<CalendarDays size={14} className="opacity-60 text-muted-foreground" />
|
||||
Updated
|
||||
</span>
|
||||
</TableHead>
|
||||
<TableHead className="px-4 md:px-6 w-16">
|
||||
<span className="sr-only">Actions</span>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<AutomationsLoadingRows />
|
||||
) : (
|
||||
automations.map((automation) => (
|
||||
<AutomationRow
|
||||
key={automation.id}
|
||||
automation={automation}
|
||||
searchSpaceId={searchSpaceId}
|
||||
canUpdate={canUpdate}
|
||||
canDelete={canDelete}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
"use client";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { BuilderExecution } from "@/lib/automations/builder-schema";
|
||||
import { Field } from "./form-field";
|
||||
|
||||
interface AdvancedSectionProps {
|
||||
execution: BuilderExecution;
|
||||
tags: string[];
|
||||
onExecutionChange: (patch: Partial<BuilderExecution>) => void;
|
||||
onTagsChange: (tags: string[]) => void;
|
||||
}
|
||||
|
||||
const BACKOFF_OPTIONS: ReadonlyArray<{ value: BuilderExecution["retryBackoff"]; label: string }> = [
|
||||
{ value: "exponential", label: "Exponential" },
|
||||
{ value: "linear", label: "Linear" },
|
||||
{ value: "none", label: "None" },
|
||||
];
|
||||
|
||||
const CONCURRENCY_OPTIONS: ReadonlyArray<{
|
||||
value: BuilderExecution["concurrency"];
|
||||
label: string;
|
||||
}> = [
|
||||
{ value: "drop_if_running", label: "Skip if already running" },
|
||||
{ value: "queue", label: "Queue the next run" },
|
||||
{ value: "always", label: "Always run" },
|
||||
];
|
||||
|
||||
function clampInt(raw: string, min: number, fallback: number): number {
|
||||
const value = Number.parseInt(raw, 10);
|
||||
if (Number.isNaN(value)) return fallback;
|
||||
return Math.max(min, value);
|
||||
}
|
||||
|
||||
export function AdvancedSection({
|
||||
execution,
|
||||
tags,
|
||||
onExecutionChange,
|
||||
onTagsChange,
|
||||
}: AdvancedSectionProps) {
|
||||
const [tagsText, setTagsText] = useState(tags.join(", "));
|
||||
|
||||
function commitTags(text: string) {
|
||||
const next = text
|
||||
.split(",")
|
||||
.map((tag) => tag.trim())
|
||||
.filter(Boolean);
|
||||
onTagsChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<Field label="Timeout (seconds)" hint="Wall-clock cap for the whole run.">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={execution.timeoutSeconds}
|
||||
onChange={(e) =>
|
||||
onExecutionChange({ timeoutSeconds: clampInt(e.target.value, 1, 600) })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Max retries" hint="Per-step retry budget.">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={execution.maxRetries}
|
||||
onChange={(e) => onExecutionChange({ maxRetries: clampInt(e.target.value, 0, 2) })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Retry backoff">
|
||||
<Select
|
||||
value={execution.retryBackoff}
|
||||
onValueChange={(value) =>
|
||||
onExecutionChange({ retryBackoff: value as BuilderExecution["retryBackoff"] })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BACKOFF_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="If already running">
|
||||
<Select
|
||||
value={execution.concurrency}
|
||||
onValueChange={(value) =>
|
||||
onExecutionChange({ concurrency: value as BuilderExecution["concurrency"] })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CONCURRENCY_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Tags" hint="Comma-separated. Optional.">
|
||||
<Input
|
||||
value={tagsText}
|
||||
placeholder="research, weekly"
|
||||
onChange={(e) => setTagsText(e.target.value)}
|
||||
onBlur={(e) => commitTags(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,551 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { Code2, LayoutList, Save } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { z } from "zod";
|
||||
import {
|
||||
addTriggerMutationAtom,
|
||||
createAutomationMutationAtom,
|
||||
removeTriggerMutationAtom,
|
||||
updateAutomationMutationAtom,
|
||||
updateTriggerMutationAtom,
|
||||
} from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import {
|
||||
type Automation,
|
||||
automationCreateRequest,
|
||||
automationUpdateRequest,
|
||||
} from "@/contracts/types/automation.types";
|
||||
import { useAutomationEligibleModels } from "@/hooks/use-automation-eligible-models";
|
||||
import {
|
||||
type BuilderForm,
|
||||
type BuilderModels,
|
||||
buildCreatePayload,
|
||||
builderFormSchema,
|
||||
buildScheduleTrigger,
|
||||
buildUpdatePayload,
|
||||
createEmptyForm,
|
||||
formFromAutomation,
|
||||
type HydratableTrigger,
|
||||
hasResolvedModels,
|
||||
hydrateForm,
|
||||
} from "@/lib/automations/builder-schema";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AdvancedSection } from "./advanced-section";
|
||||
import { AutomationModelFields } from "./automation-model-fields";
|
||||
import { BasicsSection } from "./basics-section";
|
||||
import { BuilderSummary } from "./builder-summary";
|
||||
import { JsonModePanel } from "./json-mode-panel";
|
||||
import { ScheduleSection } from "./schedule-section";
|
||||
import { TaskList } from "./task-list";
|
||||
import { UnattendedToggle } from "./unattended-toggle";
|
||||
|
||||
interface AutomationBuilderFormProps {
|
||||
mode: "create" | "edit";
|
||||
searchSpaceId: number;
|
||||
/** Required in edit mode; seeds the form and trigger reconciliation. */
|
||||
automation?: Automation;
|
||||
/**
|
||||
* Optional extra create-mode block reason (composed with the form's own
|
||||
* model-eligibility gate). Shown as the submit button's tooltip. Model
|
||||
* eligibility itself is now owned by the in-form pickers.
|
||||
*/
|
||||
submitDisabledReason?: string;
|
||||
}
|
||||
|
||||
type Mode = "form" | "json";
|
||||
|
||||
function mapFormErrors(error: z.ZodError): Record<string, string> {
|
||||
const out: Record<string, string> = {};
|
||||
for (const issue of error.issues) {
|
||||
const path = issue.path;
|
||||
let key: string;
|
||||
if (path[0] === "tasks" && typeof path[1] === "number") key = `tasks.${path[1]}.query`;
|
||||
else if (path[0] === "schedule") key = "schedule";
|
||||
else key = String(path[0] ?? "_root");
|
||||
if (!out[key]) out[key] = issue.message;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export function AutomationBuilderForm({
|
||||
mode,
|
||||
searchSpaceId,
|
||||
automation,
|
||||
submitDisabledReason,
|
||||
}: AutomationBuilderFormProps) {
|
||||
const router = useRouter();
|
||||
const { mutateAsync: createAutomation } = useAtomValue(createAutomationMutationAtom);
|
||||
const { mutateAsync: updateAutomation } = useAtomValue(updateAutomationMutationAtom);
|
||||
const { mutateAsync: addTrigger } = useAtomValue(addTriggerMutationAtom);
|
||||
const { mutateAsync: updateTrigger } = useAtomValue(updateTriggerMutationAtom);
|
||||
const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
|
||||
|
||||
// Initial state: create starts empty in form mode; edit hydrates, falling
|
||||
// back to JSON mode when the definition can't be represented in the form.
|
||||
const initial = useMemo(() => {
|
||||
if (mode === "edit" && automation) {
|
||||
const result = formFromAutomation(automation);
|
||||
if (result.formable) {
|
||||
return { mode: "form" as Mode, form: result.form, notice: undefined };
|
||||
}
|
||||
return {
|
||||
mode: "json" as Mode,
|
||||
form: createEmptyForm(),
|
||||
notice: `This automation ${result.reason}, which the form can't show. Edit it as JSON below.`,
|
||||
};
|
||||
}
|
||||
return { mode: "form" as Mode, form: createEmptyForm(), notice: undefined };
|
||||
}, [mode, automation]);
|
||||
|
||||
const [activeMode, setActiveMode] = useState<Mode>(initial.mode);
|
||||
const [form, setForm] = useState<BuilderForm>(initial.form);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [rootError, setRootError] = useState<string | null>(null);
|
||||
|
||||
const [jsonValue, setJsonValue] = useState<Record<string, unknown>>(() =>
|
||||
initial.mode === "json" ? jsonFromAutomation(automation) : {}
|
||||
);
|
||||
const [jsonIssues, setJsonIssues] = useState<string[]>([]);
|
||||
const [jsonNotice, setJsonNotice] = useState<string | undefined>(initial.notice);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const cancelHref =
|
||||
mode === "edit" && automation
|
||||
? `/dashboard/${searchSpaceId}/automations/${automation.id}`
|
||||
: `/dashboard/${searchSpaceId}/automations`;
|
||||
|
||||
// Eligible models + the search-space-seeded defaults. Models are chosen per
|
||||
// automation on create; in edit mode the backend preserves the captured
|
||||
// snapshot, so the picker is create-only.
|
||||
const eligibleModels = useAutomationEligibleModels();
|
||||
|
||||
// Resolve each slot during render: an explicit (non-zero) pick wins,
|
||||
// otherwise fall back to the eligible default. No effect copies async hook
|
||||
// data into state, so there's no flicker/loop and the user's pick is sticky.
|
||||
const resolvedModels = useMemo<BuilderModels>(
|
||||
() => ({
|
||||
agentLlmId: form.models.agentLlmId || eligibleModels.llm.defaultId || 0,
|
||||
imageConfigId: form.models.imageConfigId || eligibleModels.image.defaultId || 0,
|
||||
visionConfigId: form.models.visionConfigId || eligibleModels.vision.defaultId || 0,
|
||||
}),
|
||||
[
|
||||
form.models,
|
||||
eligibleModels.llm.defaultId,
|
||||
eligibleModels.image.defaultId,
|
||||
eligibleModels.vision.defaultId,
|
||||
]
|
||||
);
|
||||
|
||||
// The form with resolved models folded in — what every payload builder reads.
|
||||
const formForPayload = useMemo<BuilderForm>(
|
||||
() => ({ ...form, models: resolvedModels }),
|
||||
[form, resolvedModels]
|
||||
);
|
||||
|
||||
function patchForm(patch: Partial<BuilderForm>) {
|
||||
setForm((prev) => ({ ...prev, ...patch }));
|
||||
}
|
||||
|
||||
function jsonFromCurrentForm(): Record<string, unknown> {
|
||||
if (mode === "edit" && automation) {
|
||||
return { ...buildUpdatePayload(formForPayload), status: automation.status };
|
||||
}
|
||||
const { search_space_id: _ignored, ...rest } = buildCreatePayload(
|
||||
formForPayload,
|
||||
searchSpaceId
|
||||
);
|
||||
return rest;
|
||||
}
|
||||
|
||||
function switchToJson() {
|
||||
setJsonValue(jsonFromCurrentForm());
|
||||
setJsonIssues([]);
|
||||
setJsonNotice(undefined);
|
||||
setActiveMode("json");
|
||||
}
|
||||
|
||||
function switchToForm() {
|
||||
const result = tryJsonToForm();
|
||||
if (result.ok) {
|
||||
setForm(result.form);
|
||||
setErrors({});
|
||||
setRootError(null);
|
||||
setActiveMode("form");
|
||||
return;
|
||||
}
|
||||
setJsonIssues(result.issues);
|
||||
setJsonNotice(result.notice);
|
||||
}
|
||||
|
||||
function tryJsonToForm():
|
||||
| { ok: true; form: BuilderForm }
|
||||
| { ok: false; issues: string[]; notice?: string } {
|
||||
// Read the raw tree defensively rather than strict-validating: an
|
||||
// incomplete JSON edit should still round-trip into the form, where the
|
||||
// form's own validation enforces completeness on submit.
|
||||
const definition = jsonValue.definition;
|
||||
if (!definition || typeof definition !== "object") {
|
||||
return { ok: false, issues: [], notice: "Add a definition before switching to the form." };
|
||||
}
|
||||
|
||||
const name =
|
||||
typeof jsonValue.name === "string"
|
||||
? jsonValue.name
|
||||
: mode === "edit" && automation
|
||||
? automation.name
|
||||
: "";
|
||||
const description = typeof jsonValue.description === "string" ? jsonValue.description : null;
|
||||
const triggers =
|
||||
mode === "edit" && automation
|
||||
? (automation.triggers ?? [])
|
||||
: extractTriggers(jsonValue.triggers);
|
||||
|
||||
const h = hydrateForm(name, description, definition, triggers);
|
||||
return h.formable
|
||||
? { ok: true, form: h.form }
|
||||
: { ok: false, issues: [], notice: `Can't show in the form: it ${h.reason}.` };
|
||||
}
|
||||
|
||||
function validateForm(): Record<string, string> | null {
|
||||
const result = builderFormSchema.safeParse(form);
|
||||
const next = result.success ? {} : mapFormErrors(result.error);
|
||||
|
||||
// The schedule model fields aren't deeply validated by the schema.
|
||||
if (form.schedule?.mode === "preset") {
|
||||
const m = form.schedule.model;
|
||||
if (m.frequency === "weekly" && m.daysOfWeek.length === 0) {
|
||||
next.schedule = "Pick at least one day for the weekly schedule";
|
||||
}
|
||||
} else if (form.schedule?.mode === "cron" && !form.schedule.cron.trim()) {
|
||||
next.schedule = "Enter a schedule expression";
|
||||
}
|
||||
|
||||
return Object.keys(next).length > 0 ? next : null;
|
||||
}
|
||||
|
||||
async function reconcileTriggers(automationId: number) {
|
||||
const desired = buildScheduleTrigger(form);
|
||||
const existing = (automation?.triggers ?? [])[0];
|
||||
if (!existing && desired) {
|
||||
await addTrigger({ automationId, payload: desired });
|
||||
} else if (existing && !desired) {
|
||||
await removeTrigger({ automationId, triggerId: existing.id });
|
||||
} else if (existing && desired) {
|
||||
await updateTrigger({
|
||||
automationId,
|
||||
triggerId: existing.id,
|
||||
patch: { params: desired.params, enabled: desired.enabled },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
setRootError(null);
|
||||
const formErrors = validateForm();
|
||||
if (formErrors) {
|
||||
setErrors(formErrors);
|
||||
return;
|
||||
}
|
||||
setErrors({});
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (mode === "edit" && automation) {
|
||||
const payload = buildUpdatePayload(formForPayload);
|
||||
const parsed = automationUpdateRequest.safeParse(payload);
|
||||
if (!parsed.success) {
|
||||
setRootError(zodIssueList(parsed.error).join("; "));
|
||||
return;
|
||||
}
|
||||
await updateAutomation({ automationId: automation.id, patch: parsed.data });
|
||||
await reconcileTriggers(automation.id);
|
||||
router.push(`/dashboard/${searchSpaceId}/automations/${automation.id}`);
|
||||
} else {
|
||||
const payload = buildCreatePayload(formForPayload, searchSpaceId);
|
||||
const parsed = automationCreateRequest.safeParse(payload);
|
||||
if (!parsed.success) {
|
||||
setRootError(zodIssueList(parsed.error).join("; "));
|
||||
return;
|
||||
}
|
||||
const created = await createAutomation(parsed.data);
|
||||
router.push(`/dashboard/${searchSpaceId}/automations/${created.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setRootError((err as Error).message ?? "Submit failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitJson() {
|
||||
setJsonIssues([]);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (mode === "edit" && automation) {
|
||||
const parsed = automationUpdateRequest.safeParse(jsonValue);
|
||||
if (!parsed.success) {
|
||||
setJsonIssues(zodIssueList(parsed.error));
|
||||
return;
|
||||
}
|
||||
await updateAutomation({ automationId: automation.id, patch: parsed.data });
|
||||
router.push(`/dashboard/${searchSpaceId}/automations/${automation.id}`);
|
||||
} else {
|
||||
const parsed = automationCreateRequest.safeParse({
|
||||
...jsonValue,
|
||||
search_space_id: searchSpaceId,
|
||||
});
|
||||
if (!parsed.success) {
|
||||
setJsonIssues(zodIssueList(parsed.error));
|
||||
return;
|
||||
}
|
||||
const created = await createAutomation(parsed.data);
|
||||
router.push(`/dashboard/${searchSpaceId}/automations/${created.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setJsonIssues([(err as Error).message ?? "Submit failed"]);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const submitLabel = mode === "edit" ? "Save changes" : "Create automation";
|
||||
// Block creation until every model slot resolves to an eligible id. The
|
||||
// per-field Alert already explains *why* a slot is empty; this just guards
|
||||
// submit. `submitDisabledReason` (from the caller) still composes in.
|
||||
const modelsUnresolved =
|
||||
mode === "create" && !eligibleModels.isLoading && !hasResolvedModels(resolvedModels);
|
||||
const effectiveDisabledReason =
|
||||
submitDisabledReason ??
|
||||
(modelsUnresolved
|
||||
? "Set up a premium or your own (BYOK) agent, image, and vision model in role settings before creating an automation."
|
||||
: undefined);
|
||||
// Only gate creation; editing an existing automation isn't blocked here.
|
||||
const submitBlocked = mode === "create" && !!effectiveDisabledReason;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-end">
|
||||
<div className="inline-flex rounded-md border border-border/60 p-0.5">
|
||||
<ModeButton
|
||||
active={activeMode === "form"}
|
||||
icon={LayoutList}
|
||||
label="Form"
|
||||
onClick={() => (activeMode === "form" ? undefined : switchToForm())}
|
||||
/>
|
||||
<ModeButton
|
||||
active={activeMode === "json"}
|
||||
icon={Code2}
|
||||
label="Edit as JSON"
|
||||
onClick={() => (activeMode === "json" ? undefined : switchToJson())}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeMode === "json" ? (
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardContent className="pt-6">
|
||||
<JsonModePanel
|
||||
value={jsonValue}
|
||||
issues={jsonIssues}
|
||||
notice={jsonNotice}
|
||||
onChange={setJsonValue}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div className="space-y-4 lg:col-span-2">
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Basics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BasicsSection
|
||||
name={form.name}
|
||||
description={form.description}
|
||||
errors={errors}
|
||||
onChange={patchForm}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Tasks</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<TaskList
|
||||
tasks={form.tasks}
|
||||
errors={errors}
|
||||
searchSpaceId={searchSpaceId}
|
||||
onChange={(tasks) => patchForm({ tasks })}
|
||||
/>
|
||||
<UnattendedToggle
|
||||
checked={form.unattended}
|
||||
onChange={(unattended) => patchForm({ unattended })}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Schedule</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScheduleSection
|
||||
schedule={form.schedule}
|
||||
timezone={form.timezone}
|
||||
errors={errors}
|
||||
onScheduleChange={(schedule) => patchForm({ schedule })}
|
||||
onTimezoneChange={(timezone) => patchForm({ timezone })}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Models</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AutomationModelFields
|
||||
searchSpaceId={searchSpaceId}
|
||||
value={resolvedModels}
|
||||
onChange={(patch) => patchForm({ models: { ...form.models, ...patch } })}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/60 bg-accent">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AdvancedSection
|
||||
execution={form.execution}
|
||||
tags={form.tags}
|
||||
onExecutionChange={(patch) =>
|
||||
patchForm({ execution: { ...form.execution, ...patch } })
|
||||
}
|
||||
onTagsChange={(tags) => patchForm({ tags })}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="border-border/60 bg-accent lg:sticky lg:top-4">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BuilderSummary form={form} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rootError && <p className="text-right text-xs text-destructive">{rootError}</p>}
|
||||
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button asChild type="button" variant="ghost" size="sm">
|
||||
<Link href={cancelHref}>Cancel</Link>
|
||||
</Button>
|
||||
{submitBlocked ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
{/* aria-disabled keeps the button focusable so the tooltip is
|
||||
reachable by hover and keyboard; onClick is a no-op. */}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
aria-disabled
|
||||
className="cursor-not-allowed opacity-50"
|
||||
onClick={(event) => event.preventDefault()}
|
||||
>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
{submitLabel}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">{effectiveDisabledReason}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={submitting}
|
||||
onClick={() => (activeMode === "json" ? submitJson() : submitForm())}
|
||||
>
|
||||
{submitting ? (
|
||||
<Spinner size="xs" className="mr-2" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{submitLabel}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModeButton({
|
||||
active,
|
||||
icon: Icon,
|
||||
label,
|
||||
onClick,
|
||||
}: {
|
||||
active: boolean;
|
||||
icon: typeof Code2;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors",
|
||||
active
|
||||
? "bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function extractTriggers(raw: unknown): HydratableTrigger[] {
|
||||
if (!Array.isArray(raw)) return [];
|
||||
return raw.map((entry) => {
|
||||
const obj = entry && typeof entry === "object" ? (entry as Record<string, unknown>) : {};
|
||||
return {
|
||||
type: typeof obj.type === "string" ? obj.type : "",
|
||||
params:
|
||||
obj.params && typeof obj.params === "object" ? (obj.params as Record<string, unknown>) : {},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function zodIssueList(error: z.ZodError): string[] {
|
||||
return error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`);
|
||||
}
|
||||
|
||||
function jsonFromAutomation(automation: Automation | undefined): Record<string, unknown> {
|
||||
if (!automation) return {};
|
||||
return {
|
||||
name: automation.name,
|
||||
description: automation.description ?? null,
|
||||
status: automation.status,
|
||||
definition: automation.definition,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
"use client";
|
||||
|
||||
import { TriangleAlert } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { memo, useId } from "react";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
type EligibleModelKind,
|
||||
type EligibleModelOption,
|
||||
useAutomationEligibleModels,
|
||||
} from "@/hooks/use-automation-eligible-models";
|
||||
import { getProviderIcon } from "@/lib/provider-icons";
|
||||
import { Field } from "./form-field";
|
||||
|
||||
export interface AutomationModelSelection {
|
||||
agentLlmId: number;
|
||||
imageConfigId: number;
|
||||
visionConfigId: number;
|
||||
}
|
||||
|
||||
interface AutomationModelFieldsProps {
|
||||
/** Resolved (effective) ids — never `0` once defaults are seeded. */
|
||||
value: AutomationModelSelection;
|
||||
onChange: (patch: Partial<AutomationModelSelection>) => void;
|
||||
searchSpaceId: number;
|
||||
errors?: Partial<Record<keyof AutomationModelSelection, string>>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Three eligible-only model pickers (Agent LLM / Image / Vision) for the
|
||||
* automation builder + chat approval card. Options come from
|
||||
* {@link useAutomationEligibleModels} (premium globals + BYOK only); selection
|
||||
* is validated + snapshotted onto `definition.models` at create time.
|
||||
*/
|
||||
export function AutomationModelFields({
|
||||
value,
|
||||
onChange,
|
||||
searchSpaceId,
|
||||
errors,
|
||||
}: AutomationModelFieldsProps) {
|
||||
const { llm, image, vision, isLoading } = useAutomationEligibleModels();
|
||||
const rolesHref = `/dashboard/${searchSpaceId}/search-space-settings/roles`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<ModelSelectField
|
||||
label="Agent model"
|
||||
kind={llm}
|
||||
value={value.agentLlmId}
|
||||
isLoading={isLoading}
|
||||
rolesHref={rolesHref}
|
||||
error={errors?.agentLlmId}
|
||||
onChange={(id) => onChange({ agentLlmId: id })}
|
||||
/>
|
||||
<ModelSelectField
|
||||
label="Image model"
|
||||
kind={image}
|
||||
value={value.imageConfigId}
|
||||
isLoading={isLoading}
|
||||
rolesHref={rolesHref}
|
||||
error={errors?.imageConfigId}
|
||||
onChange={(id) => onChange({ imageConfigId: id })}
|
||||
/>
|
||||
<ModelSelectField
|
||||
label="Vision model"
|
||||
kind={vision}
|
||||
value={value.visionConfigId}
|
||||
isLoading={isLoading}
|
||||
rolesHref={rolesHref}
|
||||
error={errors?.visionConfigId}
|
||||
onChange={(id) => onChange({ visionConfigId: id })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ModelSelectFieldProps {
|
||||
label: string;
|
||||
kind: EligibleModelKind;
|
||||
value: number;
|
||||
isLoading: boolean;
|
||||
rolesHref: string;
|
||||
error?: string;
|
||||
onChange: (id: number) => void;
|
||||
}
|
||||
|
||||
const ModelSelectField = memo(function ModelSelectField({
|
||||
label,
|
||||
kind,
|
||||
value,
|
||||
isLoading,
|
||||
rolesHref,
|
||||
error,
|
||||
onChange,
|
||||
}: ModelSelectFieldProps) {
|
||||
const triggerId = useId();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Field label={label}>
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
if (kind.options.length === 0) {
|
||||
return (
|
||||
<Field label={label}>
|
||||
<Alert>
|
||||
<TriangleAlert aria-hidden />
|
||||
<AlertTitle>No eligible models</AlertTitle>
|
||||
<AlertDescription>
|
||||
Automations need a premium or your own (BYOK) model. Set one up in{" "}
|
||||
<Link href={rolesHref} className="font-medium underline underline-offset-2">
|
||||
role settings
|
||||
</Link>
|
||||
.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
const premium = kind.options.filter((o) => !o.isBYOK);
|
||||
const byok = kind.options.filter((o) => o.isBYOK);
|
||||
const selected = value ? kind.byId.get(value) : undefined;
|
||||
|
||||
return (
|
||||
<Field label={label} htmlFor={triggerId} error={error}>
|
||||
<Select value={value ? String(value) : undefined} onValueChange={(v) => onChange(Number(v))}>
|
||||
<SelectTrigger
|
||||
id={triggerId}
|
||||
aria-label={label}
|
||||
aria-invalid={error ? true : undefined}
|
||||
className="w-full"
|
||||
>
|
||||
{selected ? (
|
||||
<span className="flex items-center gap-2">
|
||||
{getProviderIcon(selected.provider)}
|
||||
<span className="truncate">{selected.name}</span>
|
||||
</span>
|
||||
) : (
|
||||
<SelectValue placeholder="Select a model" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{premium.length > 0 ? (
|
||||
<SelectGroup>
|
||||
<SelectLabel>Premium</SelectLabel>
|
||||
{premium.map((option) => (
|
||||
<ModelOption key={option.id} option={option} badge="Premium" />
|
||||
))}
|
||||
</SelectGroup>
|
||||
) : null}
|
||||
{premium.length > 0 && byok.length > 0 ? <SelectSeparator /> : null}
|
||||
{byok.length > 0 ? (
|
||||
<SelectGroup>
|
||||
<SelectLabel>Your models</SelectLabel>
|
||||
{byok.map((option) => (
|
||||
<ModelOption key={option.id} option={option} badge="BYOK" />
|
||||
))}
|
||||
</SelectGroup>
|
||||
) : null}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
);
|
||||
});
|
||||
|
||||
function ModelOption({
|
||||
option,
|
||||
badge,
|
||||
}: {
|
||||
option: EligibleModelOption;
|
||||
badge: "Premium" | "BYOK";
|
||||
}) {
|
||||
return (
|
||||
<SelectItem value={String(option.id)} description={option.modelName}>
|
||||
<span className="flex items-center gap-2">
|
||||
{getProviderIcon(option.provider)}
|
||||
<span className="truncate">{option.name}</span>
|
||||
<Badge variant={badge === "Premium" ? "secondary" : "outline"}>{badge}</Badge>
|
||||
</span>
|
||||
</SelectItem>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Field } from "./form-field";
|
||||
|
||||
interface BasicsSectionProps {
|
||||
name: string;
|
||||
description: string | null;
|
||||
errors: Record<string, string>;
|
||||
onChange: (patch: { name?: string; description?: string | null }) => void;
|
||||
}
|
||||
|
||||
export function BasicsSection({ name, description, errors, onChange }: BasicsSectionProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Field label="Name" htmlFor="automation-name" required error={errors.name}>
|
||||
<Input
|
||||
id="automation-name"
|
||||
value={name}
|
||||
maxLength={200}
|
||||
placeholder="Weekly competitor digest"
|
||||
onChange={(e) => onChange({ name: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Description"
|
||||
htmlFor="automation-description"
|
||||
hint="Optional. A short note about what this automation is for."
|
||||
error={errors.description}
|
||||
>
|
||||
<Textarea
|
||||
id="automation-description"
|
||||
value={description ?? ""}
|
||||
rows={2}
|
||||
placeholder="Summarize what changed and email me the highlights."
|
||||
onChange={(e) => onChange({ description: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
"use client";
|
||||
import { CalendarClock, CheckCircle2, ListOrdered, type LucideIcon, XCircle } from "lucide-react";
|
||||
import { type BuilderForm, scheduleToCron } from "@/lib/automations/builder-schema";
|
||||
import { describeCron } from "@/lib/automations/describe-cron";
|
||||
|
||||
interface BuilderSummaryProps {
|
||||
form: BuilderForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Live, read-only mirror of what will be created. Mirrors the layout of the
|
||||
* chat ``AutomationDraftPreview`` so the two creation paths feel consistent.
|
||||
*/
|
||||
export function BuilderSummary({ form }: BuilderSummaryProps) {
|
||||
const scheduleLabel = form.schedule
|
||||
? `${describeCron(scheduleToCron(form.schedule))} · ${form.timezone}`
|
||||
: "No schedule — won't run automatically";
|
||||
|
||||
return (
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-foreground">{form.name.trim() || "Untitled automation"}</p>
|
||||
{form.description?.trim() && (
|
||||
<p className="text-xs text-muted-foreground">{form.description.trim()}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Section icon={CalendarClock} label="Schedule">
|
||||
<p className="text-xs text-foreground">{scheduleLabel}</p>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
icon={ListOrdered}
|
||||
label={`Tasks · ${form.tasks.length} step${form.tasks.length === 1 ? "" : "s"}`}
|
||||
>
|
||||
<ol className="space-y-1.5 text-xs">
|
||||
{form.tasks.map((task, index) => (
|
||||
<li key={task.id} className="flex items-start gap-2">
|
||||
<span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground shrink-0 mt-0.5">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 space-y-1">
|
||||
<span className="block text-foreground line-clamp-2">
|
||||
{task.query.trim() || (
|
||||
<span className="text-muted-foreground">No instructions yet</span>
|
||||
)}
|
||||
</span>
|
||||
{task.mentions.length > 0 && (
|
||||
<span className="flex flex-wrap gap-1">
|
||||
{task.mentions.map((mention) => (
|
||||
<span
|
||||
key={`${mention.kind}:${mention.id}`}
|
||||
className="inline-flex max-w-[140px] items-center truncate rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary/70"
|
||||
>
|
||||
@{mention.title}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Section>
|
||||
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
{form.unattended ? (
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" aria-hidden />
|
||||
) : (
|
||||
<XCircle className="h-3.5 w-3.5" aria-hidden />
|
||||
)}
|
||||
{form.unattended ? "Runs without approval prompts" : "Will reject approval prompts"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({
|
||||
icon: Icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: LucideIcon;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
|
||||
<Icon className="h-3 w-3" aria-hidden />
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface FieldProps {
|
||||
label?: string;
|
||||
htmlFor?: string;
|
||||
hint?: string;
|
||||
error?: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Label + control + (hint | inline error) stack shared by every builder
|
||||
* section. Keeps spacing and error styling consistent so individual sections
|
||||
* stay focused on their inputs.
|
||||
*/
|
||||
export function Field({ label, htmlFor, hint, error, required, className, children }: FieldProps) {
|
||||
return (
|
||||
<div className={cn("space-y-1.5", className)}>
|
||||
{label && (
|
||||
<Label htmlFor={htmlFor} className="text-xs font-medium text-foreground">
|
||||
{label}
|
||||
{required && <span className="text-muted-foreground">*</span>}
|
||||
</Label>
|
||||
)}
|
||||
{children}
|
||||
{error ? (
|
||||
<p className="flex items-center gap-1 text-xs text-destructive">
|
||||
<AlertCircle className="h-3 w-3 shrink-0" aria-hidden />
|
||||
{error}
|
||||
</p>
|
||||
) : hint ? (
|
||||
<p className="text-xs text-muted-foreground">{hint}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
"use client";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import { JsonView } from "@/components/json-view";
|
||||
|
||||
interface JsonModePanelProps {
|
||||
value: Record<string, unknown>;
|
||||
issues: string[];
|
||||
notice?: string;
|
||||
onChange: (next: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Raw-JSON escape hatch. Edits the same payload the form produces; the
|
||||
* orchestrator validates it against the contract schema on submit. Shown when
|
||||
* the user opts into "Edit as JSON" or when an existing definition uses
|
||||
* features the form can't represent.
|
||||
*/
|
||||
export function JsonModePanel({ value, issues, notice, onChange }: JsonModePanelProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{notice && (
|
||||
<div className="rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
|
||||
{notice}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-md border border-input bg-background px-3 py-2 max-h-144 overflow-auto">
|
||||
<JsonView
|
||||
src={value}
|
||||
editable
|
||||
onChange={(next) => onChange(next as Record<string, unknown>)}
|
||||
collapsed={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{issues.length > 0 && (
|
||||
<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2">
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-destructive mb-1.5">
|
||||
<AlertCircle className="h-3.5 w-3.5" aria-hidden />
|
||||
{issues.length === 1 ? "1 issue" : `${issues.length} issues`}
|
||||
</div>
|
||||
<ul className="space-y-0.5 text-xs text-destructive list-disc list-inside">
|
||||
{issues.map((issue) => (
|
||||
<li key={issue}>{issue}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { MentionedDocumentInfo } from "@/atoms/chat/mentioned-documents.atom";
|
||||
import {
|
||||
InlineMentionEditor,
|
||||
type InlineMentionEditorRef,
|
||||
type MentionChipInput,
|
||||
type MentionedDocument,
|
||||
type SuggestionAnchorRect,
|
||||
type SuggestionTriggerInfo,
|
||||
} from "@/components/assistant-ui/inline-mention-editor";
|
||||
import { ComposerSuggestionPopoverContent } from "@/components/new-chat/composer-suggestion-popup";
|
||||
import {
|
||||
DocumentMentionPicker,
|
||||
type DocumentMentionPickerRef,
|
||||
} from "@/components/new-chat/document-mention-picker";
|
||||
import { Popover, PopoverAnchor } from "@/components/ui/popover";
|
||||
import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MentionTaskInputProps {
|
||||
searchSpaceId: number;
|
||||
value: string;
|
||||
mentions: MentionedDocumentInfo[];
|
||||
onChange: (text: string, mentions: MentionedDocumentInfo[]) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
type AnchorPoint = { left: number; top: number };
|
||||
|
||||
// Mirror of thread.tsx's getComposerSuggestionAnchorPoint -- kept local so the
|
||||
// chat composer stays untouched.
|
||||
function getAnchorPoint(rect: SuggestionAnchorRect | null): AnchorPoint | null {
|
||||
if (!rect) return null;
|
||||
return { left: rect.left, top: rect.bottom };
|
||||
}
|
||||
|
||||
/** Project the editor's chip shape into the canonical mention info union. */
|
||||
function toMentionInfo(doc: MentionedDocument): MentionedDocumentInfo {
|
||||
if (doc.kind === "connector") {
|
||||
return {
|
||||
id: doc.id,
|
||||
title: doc.title,
|
||||
kind: "connector",
|
||||
connector_type: doc.connector_type ?? "UNKNOWN",
|
||||
account_name: doc.account_name ?? doc.title,
|
||||
};
|
||||
}
|
||||
if (doc.kind === "folder") {
|
||||
return { id: doc.id, title: doc.title, kind: "folder" };
|
||||
}
|
||||
return {
|
||||
id: doc.id,
|
||||
title: doc.title,
|
||||
document_type: doc.document_type ?? "UNKNOWN",
|
||||
kind: "doc",
|
||||
};
|
||||
}
|
||||
|
||||
/** Project a mention info into the editor's chip-insertion shape. */
|
||||
function toChipInput(mention: MentionedDocumentInfo): MentionChipInput {
|
||||
if (mention.kind === "connector") {
|
||||
return {
|
||||
id: mention.id,
|
||||
title: mention.title,
|
||||
kind: "connector",
|
||||
connector_type: mention.connector_type,
|
||||
account_name: mention.account_name,
|
||||
};
|
||||
}
|
||||
if (mention.kind === "folder") {
|
||||
return { id: mention.id, title: mention.title, kind: "folder" };
|
||||
}
|
||||
return {
|
||||
id: mention.id,
|
||||
title: mention.title,
|
||||
kind: "doc",
|
||||
document_type: mention.document_type,
|
||||
};
|
||||
}
|
||||
|
||||
function removeFirstToken(text: string, token: string): string {
|
||||
const index = text.indexOf(token);
|
||||
if (index === -1) return text;
|
||||
return text.slice(0, index) + text.slice(index + token.length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Task input that reuses the chat ``@`` mention experience -- the same
|
||||
* ``InlineMentionEditor`` + ``DocumentMentionPicker`` as the composer. The
|
||||
* editor is the source of truth while mounted; ``onChange`` reports both the
|
||||
* plain text (chips rendered as ``@Title``) and the structured mention list
|
||||
* so the builder can persist IDs for the run.
|
||||
*/
|
||||
export function MentionTaskInput({
|
||||
searchSpaceId,
|
||||
value,
|
||||
mentions,
|
||||
onChange,
|
||||
placeholder,
|
||||
disabled,
|
||||
}: MentionTaskInputProps) {
|
||||
const editorRef = useRef<InlineMentionEditorRef>(null);
|
||||
const pickerRef = useRef<DocumentMentionPickerRef>(null);
|
||||
|
||||
const [showPopover, setShowPopover] = useState(false);
|
||||
const [mentionQuery, setMentionQuery] = useState("");
|
||||
const [anchorPoint, setAnchorPoint] = useState<AnchorPoint | null>(null);
|
||||
|
||||
// One-shot hydration of existing mentions into real chips. ``initialText``
|
||||
// seeds the literal ``@Title`` text; here we strip those tokens and
|
||||
// re-insert them as chips so the editor reports the structured docs (and
|
||||
// editing can't silently drop the mention IDs). Position isn't preserved
|
||||
// on re-hydration -- chips append after the remaining prose.
|
||||
const didHydrateRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (didHydrateRef.current) return;
|
||||
didHydrateRef.current = true;
|
||||
if (mentions.length === 0) return;
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return;
|
||||
|
||||
let baseText = value;
|
||||
for (const mention of mentions) {
|
||||
baseText = removeFirstToken(baseText, `@${mention.title}`);
|
||||
}
|
||||
baseText = baseText.replace(/[ \t]{2,}/g, " ").trim();
|
||||
editor.setText(baseText);
|
||||
for (const mention of mentions) {
|
||||
editor.insertMentionChip(toChipInput(mention), { removeTriggerText: false });
|
||||
}
|
||||
}, [mentions, value]);
|
||||
|
||||
const closePopover = useCallback(() => {
|
||||
setShowPopover(false);
|
||||
setMentionQuery("");
|
||||
setAnchorPoint(null);
|
||||
}, []);
|
||||
|
||||
const handleEditorChange = useCallback(
|
||||
(text: string, docs: MentionedDocument[]) => {
|
||||
onChange(text, docs.map(toMentionInfo));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleMentionTrigger = useCallback((trigger: SuggestionTriggerInfo) => {
|
||||
const point = getAnchorPoint(trigger.anchorRect);
|
||||
if (!point) {
|
||||
setShowPopover(false);
|
||||
setMentionQuery("");
|
||||
setAnchorPoint(null);
|
||||
return;
|
||||
}
|
||||
setAnchorPoint((current) => current ?? point);
|
||||
setShowPopover(true);
|
||||
setMentionQuery(trigger.query);
|
||||
}, []);
|
||||
|
||||
const handleMentionClose = useCallback(() => {
|
||||
setShowPopover((open) => {
|
||||
if (open) {
|
||||
setMentionQuery("");
|
||||
setAnchorPoint(null);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handlePopoverOpenChange = useCallback((open: boolean) => {
|
||||
setShowPopover(open);
|
||||
if (!open) {
|
||||
setMentionQuery("");
|
||||
setAnchorPoint(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (!showPopover) return;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
pickerRef.current?.moveDown();
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
pickerRef.current?.moveUp();
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
pickerRef.current?.selectHighlighted();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
if (pickerRef.current?.goBack()) return;
|
||||
closePopover();
|
||||
}
|
||||
},
|
||||
[showPopover, closePopover]
|
||||
);
|
||||
|
||||
const handleSelection = useCallback(
|
||||
(picked: MentionedDocumentInfo[]) => {
|
||||
const editor = editorRef.current;
|
||||
const existing = new Set(
|
||||
(editor?.getMentionedDocuments() ?? []).map((doc) => getMentionDocKey(doc))
|
||||
);
|
||||
for (const mention of picked) {
|
||||
const key = getMentionDocKey(mention);
|
||||
if (existing.has(key)) continue;
|
||||
editor?.insertMentionChip(toChipInput(mention));
|
||||
existing.add(key);
|
||||
}
|
||||
closePopover();
|
||||
},
|
||||
[closePopover]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border-popover-border focus-within:border-ring focus-within:ring-ring/50 dark:bg-input/30 min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]",
|
||||
disabled && "cursor-not-allowed opacity-50"
|
||||
)}
|
||||
>
|
||||
<Popover open={showPopover} onOpenChange={handlePopoverOpenChange}>
|
||||
{anchorPoint ? (
|
||||
<>
|
||||
<PopoverAnchor
|
||||
className="pointer-events-none fixed size-0"
|
||||
style={{ left: anchorPoint.left, top: anchorPoint.top }}
|
||||
/>
|
||||
<ComposerSuggestionPopoverContent side="bottom">
|
||||
<DocumentMentionPicker
|
||||
ref={pickerRef}
|
||||
searchSpaceId={searchSpaceId}
|
||||
onSelectionChange={handleSelection}
|
||||
onDone={closePopover}
|
||||
initialSelectedDocuments={mentions}
|
||||
externalSearch={mentionQuery}
|
||||
/>
|
||||
</ComposerSuggestionPopoverContent>
|
||||
</>
|
||||
) : null}
|
||||
</Popover>
|
||||
<InlineMentionEditor
|
||||
ref={editorRef}
|
||||
initialText={value}
|
||||
placeholder={placeholder ?? "Type @ to reference files, folders, or connectors"}
|
||||
disabled={disabled}
|
||||
onChange={handleEditorChange}
|
||||
onMentionTrigger={handleMentionTrigger}
|
||||
onMentionClose={handleMentionClose}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
"use client";
|
||||
import { CalendarClock, CalendarOff, Plus, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { type BuilderSchedule, scheduleToCron } from "@/lib/automations/builder-schema";
|
||||
import { describeCron } from "@/lib/automations/describe-cron";
|
||||
import {
|
||||
DEFAULT_SCHEDULE,
|
||||
FREQUENCY_OPTIONS,
|
||||
fromCron,
|
||||
type ScheduleFrequency,
|
||||
type ScheduleModel,
|
||||
toCron,
|
||||
WEEKDAY_OPTIONS,
|
||||
} from "@/lib/automations/schedule-builder";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Field } from "./form-field";
|
||||
import { TimezoneCombobox } from "./timezone-combobox";
|
||||
|
||||
interface ScheduleSectionProps {
|
||||
schedule: BuilderSchedule | null;
|
||||
timezone: string;
|
||||
errors: Record<string, string>;
|
||||
onScheduleChange: (schedule: BuilderSchedule | null) => void;
|
||||
onTimezoneChange: (timezone: string) => void;
|
||||
}
|
||||
|
||||
function pad(value: number): string {
|
||||
return value.toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
export function ScheduleSection({
|
||||
schedule,
|
||||
timezone,
|
||||
errors,
|
||||
onScheduleChange,
|
||||
onTimezoneChange,
|
||||
}: ScheduleSectionProps) {
|
||||
if (schedule === null) {
|
||||
return (
|
||||
<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-4 py-6 text-center">
|
||||
<CalendarOff className="mx-auto h-7 w-7 text-muted-foreground" aria-hidden />
|
||||
<p className="mt-2 text-sm text-foreground">No schedule</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
This automation won't run automatically until you add one.
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
onClick={() => onScheduleChange({ mode: "preset", model: { ...DEFAULT_SCHEDULE } })}
|
||||
>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
Add a schedule
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cron = scheduleToCron(schedule);
|
||||
const label = describeCron(cron);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-3 rounded-md border border-border/60 bg-background px-3 py-2">
|
||||
<div className="flex items-center gap-2 text-sm min-w-0">
|
||||
<CalendarClock className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="font-medium text-foreground truncate">{label}</span>
|
||||
<span className="text-muted-foreground shrink-0">· {timezone}</span>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
aria-label="Remove schedule"
|
||||
onClick={() => onScheduleChange(null)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{schedule.mode === "preset" ? (
|
||||
<PresetEditor
|
||||
model={schedule.model}
|
||||
onChange={(model) => onScheduleChange({ mode: "preset", model })}
|
||||
onSwitchToCron={() => onScheduleChange({ mode: "cron", cron: toCron(schedule.model) })}
|
||||
/>
|
||||
) : (
|
||||
<CronEditor
|
||||
cron={schedule.cron}
|
||||
error={errors.schedule}
|
||||
onChange={(value) => onScheduleChange({ mode: "cron", cron: value })}
|
||||
onSwitchToPreset={() =>
|
||||
onScheduleChange({
|
||||
mode: "preset",
|
||||
model: fromCron(schedule.cron) ?? { ...DEFAULT_SCHEDULE },
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Field label="Timezone">
|
||||
<TimezoneCombobox value={timezone} onChange={onTimezoneChange} />
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PresetEditorProps {
|
||||
model: ScheduleModel;
|
||||
onChange: (model: ScheduleModel) => void;
|
||||
onSwitchToCron: () => void;
|
||||
}
|
||||
|
||||
function PresetEditor({ model, onChange, onSwitchToCron }: PresetEditorProps) {
|
||||
const weeklyNoDays = model.frequency === "weekly" && model.daysOfWeek.length === 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<Field label="Frequency">
|
||||
<Select
|
||||
value={model.frequency}
|
||||
onValueChange={(value) => onChange({ ...model, frequency: value as ScheduleFrequency })}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FREQUENCY_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
{model.frequency === "hourly" ? (
|
||||
<Field label="At minute">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={model.minute}
|
||||
onChange={(e) => onChange({ ...model, minute: clampInt(e.target.value, 0, 59) })}
|
||||
/>
|
||||
</Field>
|
||||
) : (
|
||||
<Field label="At time">
|
||||
<Input
|
||||
type="time"
|
||||
value={`${pad(model.hour)}:${pad(model.minute)}`}
|
||||
onChange={(e) => {
|
||||
const [h, m] = e.target.value.split(":");
|
||||
onChange({
|
||||
...model,
|
||||
hour: clampInt(h, 0, 23),
|
||||
minute: clampInt(m, 0, 59),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{model.frequency === "weekly" && (
|
||||
<Field label="On days" error={weeklyNoDays ? "Pick at least one day" : undefined}>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{WEEKDAY_OPTIONS.map((day) => {
|
||||
const active = model.daysOfWeek.includes(day.value);
|
||||
return (
|
||||
<button
|
||||
key={day.value}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() =>
|
||||
onChange({ ...model, daysOfWeek: toggleDay(model.daysOfWeek, day.value) })
|
||||
}
|
||||
className={cn(
|
||||
"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
|
||||
active
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border/60 bg-background text-muted-foreground hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
{day.short}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{model.frequency === "monthly" && (
|
||||
<Field label="Day of month" hint={"1\u201331."}>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={31}
|
||||
value={model.dayOfMonth}
|
||||
onChange={(e) => onChange({ ...model, dayOfMonth: clampInt(e.target.value, 1, 31) })}
|
||||
className="w-24"
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSwitchToCron}
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Advanced: enter a schedule expression
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CronEditorProps {
|
||||
cron: string;
|
||||
error?: string;
|
||||
onChange: (cron: string) => void;
|
||||
onSwitchToPreset: () => void;
|
||||
}
|
||||
|
||||
function CronEditor({ cron, error, onChange, onSwitchToPreset }: CronEditorProps) {
|
||||
const trimmed = cron.trim();
|
||||
const label = trimmed ? describeCron(trimmed) : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Field
|
||||
label="Schedule expression"
|
||||
hint="Five-field cron, e.g. 0 9 * * 1-5 (minute hour day month weekday)."
|
||||
error={error}
|
||||
>
|
||||
<Input
|
||||
value={cron}
|
||||
placeholder="0 9 * * 1-5"
|
||||
className="font-mono"
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
{label && label !== trimmed && <p className="text-xs text-muted-foreground">Runs: {label}</p>}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSwitchToPreset}
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Use the simple picker
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function clampInt(raw: string, min: number, max: number): number {
|
||||
const value = Number.parseInt(raw, 10);
|
||||
if (Number.isNaN(value)) return min;
|
||||
return Math.min(max, Math.max(min, value));
|
||||
}
|
||||
|
||||
function toggleDay(days: number[], value: number): number[] {
|
||||
return days.includes(value)
|
||||
? days.filter((day) => day !== value)
|
||||
: [...days, value].sort((a, b) => a - b);
|
||||
}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
"use client";
|
||||
import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { BuilderTask } from "@/lib/automations/builder-schema";
|
||||
import { Field } from "./form-field";
|
||||
import { MentionTaskInput } from "./mention-task-input";
|
||||
|
||||
interface TaskItemProps {
|
||||
index: number;
|
||||
total: number;
|
||||
task: BuilderTask;
|
||||
searchSpaceId: number;
|
||||
error?: string;
|
||||
onChange: (patch: Partial<BuilderTask>) => void;
|
||||
onMoveUp: () => void;
|
||||
onMoveDown: () => void;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
function parseOptionalInt(raw: string): number | null {
|
||||
const trimmed = raw.trim();
|
||||
if (trimmed === "") return null;
|
||||
const value = Number.parseInt(trimmed, 10);
|
||||
return Number.isNaN(value) ? null : value;
|
||||
}
|
||||
|
||||
export function TaskItem({
|
||||
index,
|
||||
total,
|
||||
task,
|
||||
searchSpaceId,
|
||||
error,
|
||||
onChange,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
onRemove,
|
||||
}: TaskItemProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-background p-3 space-y-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="inline-flex items-center gap-2 text-xs font-medium text-muted-foreground">
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
Task {index + 1}
|
||||
</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground"
|
||||
disabled={index === 0}
|
||||
aria-label="Move task up"
|
||||
onClick={onMoveUp}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground"
|
||||
disabled={index === total - 1}
|
||||
aria-label="Move task down"
|
||||
onClick={onMoveDown}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
disabled={total === 1}
|
||||
aria-label="Remove task"
|
||||
onClick={onRemove}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
error={error}
|
||||
hint="Type @ to reference files, folders, or connectors for extra context."
|
||||
>
|
||||
<MentionTaskInput
|
||||
searchSpaceId={searchSpaceId}
|
||||
value={task.query}
|
||||
mentions={task.mentions}
|
||||
placeholder="What should the agent do? e.g. Summarize new docs in @Marketing since the last run."
|
||||
onChange={(query, mentions) => onChange({ query, mentions })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="advanced" className="border-b-0">
|
||||
<AccordionTrigger className="py-1.5 text-xs text-muted-foreground hover:no-underline">
|
||||
Advanced
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-1">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Max retries" hint="Leave blank to use the default.">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={10}
|
||||
value={task.maxRetries ?? ""}
|
||||
placeholder="default"
|
||||
onChange={(e) => onChange({ maxRetries: parseOptionalInt(e.target.value) })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Timeout (seconds)" hint="Leave blank to use the default.">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={task.timeoutSeconds ?? ""}
|
||||
placeholder="default"
|
||||
onChange={(e) => onChange({ timeoutSeconds: parseOptionalInt(e.target.value) })}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
"use client";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { type BuilderTask, emptyTask } from "@/lib/automations/builder-schema";
|
||||
import { TaskItem } from "./task-item";
|
||||
|
||||
interface TaskListProps {
|
||||
tasks: BuilderTask[];
|
||||
errors: Record<string, string>;
|
||||
searchSpaceId: number;
|
||||
onChange: (tasks: BuilderTask[]) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ordered list of agent tasks. Steps run sequentially in the order shown.
|
||||
* Reordering is done with up/down buttons to avoid a drag-and-drop dependency.
|
||||
*/
|
||||
export function TaskList({ tasks, errors, searchSpaceId, onChange }: TaskListProps) {
|
||||
function updateAt(index: number, patch: Partial<BuilderTask>) {
|
||||
onChange(tasks.map((task, i) => (i === index ? { ...task, ...patch } : task)));
|
||||
}
|
||||
|
||||
function removeAt(index: number) {
|
||||
onChange(tasks.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
function move(index: number, direction: -1 | 1) {
|
||||
const target = index + direction;
|
||||
if (target < 0 || target >= tasks.length) return;
|
||||
const next = [...tasks];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{tasks.map((task, index) => (
|
||||
<TaskItem
|
||||
key={task.id}
|
||||
index={index}
|
||||
total={tasks.length}
|
||||
task={task}
|
||||
searchSpaceId={searchSpaceId}
|
||||
error={errors[`tasks.${index}.query`]}
|
||||
onChange={(patch) => updateAt(index, patch)}
|
||||
onMoveUp={() => move(index, -1)}
|
||||
onMoveDown={() => move(index, 1)}
|
||||
onRemove={() => removeAt(index)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{errors.tasks && <p className="text-xs text-destructive">{errors.tasks}</p>}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onChange([...tasks, emptyTask()])}
|
||||
>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
Add task
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
"use client";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { getTimezones } from "@/lib/automations/builder-schema";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TimezoneComboboxProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Searchable IANA timezone picker. The full ``Intl.supportedValuesOf`` list is
|
||||
* long, so it lives behind a Command search instead of a flat Select.
|
||||
*/
|
||||
export function TimezoneCombobox({ value, onChange }: TimezoneComboboxProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const timezones = useMemo(() => getTimezones(), []);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-between font-normal"
|
||||
>
|
||||
<span className="truncate">{value || "Select timezone"}</span>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search timezone..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No timezone found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{timezones.map((tz) => (
|
||||
<CommandItem
|
||||
key={tz}
|
||||
value={tz}
|
||||
onSelect={() => {
|
||||
onChange(tz);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn("mr-2 h-4 w-4", value === tz ? "opacity-100" : "opacity-0")}
|
||||
/>
|
||||
{tz}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
import { Info } from "lucide-react";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
|
||||
interface UnattendedToggleProps {
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps to ``auto_approve_all`` on every agent task. Automations run with no one
|
||||
* watching, so this defaults ON; turning it off means any approval prompt the
|
||||
* agent raises is rejected and the step can stall.
|
||||
*/
|
||||
export function UnattendedToggle({ checked, onChange }: UnattendedToggleProps) {
|
||||
return (
|
||||
<div className="flex items-start justify-between gap-3 rounded-lg border border-border/60 bg-background px-3 py-3">
|
||||
<div className="space-y-0.5 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Run without asking for approvals
|
||||
</span>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button type="button" aria-label="More info" className="text-muted-foreground">
|
||||
<Info className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">
|
||||
Automations run unattended. With this off, any approval the agent asks for is
|
||||
rejected, which can stall a step.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Auto-approve actions the agent would normally pause to confirm.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
aria-label="Run without asking for approvals"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { deleteAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
|
||||
interface DeleteAutomationDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
automationId: number;
|
||||
automationName: string;
|
||||
searchSpaceId: number;
|
||||
/**
|
||||
* Fired after a successful delete, before the dialog closes. The detail
|
||||
* page uses this to navigate back to the list (the row simply vanishes
|
||||
* on the list page so no callback is needed there).
|
||||
*/
|
||||
onDeleted?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm + delete one automation. FK cascade on the backend wipes attached
|
||||
* triggers and runs, so we mention it explicitly. List re-fetch is handled
|
||||
* by the mutation atom's onSuccess.
|
||||
*/
|
||||
export function DeleteAutomationDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
automationId,
|
||||
automationName,
|
||||
searchSpaceId,
|
||||
onDeleted,
|
||||
}: DeleteAutomationDialogProps) {
|
||||
const { mutateAsync: deleteAutomation } = useAtomValue(deleteAutomationMutationAtom);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
async function handleConfirm() {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await deleteAutomation({ automationId, searchSpaceId });
|
||||
onDeleted?.();
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete this automation?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<span className="font-medium text-foreground">{automationName}</span> and all of its
|
||||
triggers and run history will be removed. This cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirm}
|
||||
disabled={submitting}
|
||||
className="bg-destructive text-white hover:bg-destructive/90"
|
||||
>
|
||||
{submitting ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Spinner size="xs" />
|
||||
Deleting…
|
||||
</span>
|
||||
) : (
|
||||
"Delete"
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useMemo } from "react";
|
||||
import { canPerform, myAccessAtom } from "@/atoms/members/members-query.atoms";
|
||||
|
||||
/**
|
||||
* Centralized RBAC gates for the automations slice. Co-located with the
|
||||
* route so adding/removing surfaces stays a one-file change. Backed by
|
||||
* the same ``myAccessAtom`` the rest of the app uses; owners short-circuit
|
||||
* to ``true`` for every action.
|
||||
*
|
||||
* Mirrors backend permissions in ``app.db.permissions`` (automations:*).
|
||||
*/
|
||||
export interface AutomationPermissions {
|
||||
loading: boolean;
|
||||
canCreate: boolean;
|
||||
canRead: boolean;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
canExecute: boolean;
|
||||
}
|
||||
|
||||
export function useAutomationPermissions(): AutomationPermissions {
|
||||
const { data: access, isLoading } = useAtomValue(myAccessAtom);
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
loading: isLoading,
|
||||
canCreate: canPerform(access, "automations:create"),
|
||||
canRead: canPerform(access, "automations:read"),
|
||||
canUpdate: canPerform(access, "automations:update"),
|
||||
canDelete: canPerform(access, "automations:delete"),
|
||||
canExecute: canPerform(access, "automations:execute"),
|
||||
}),
|
||||
[access, isLoading]
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
import { AutomationBuilderForm } from "../components/builder/automation-builder-form";
|
||||
import { useAutomationPermissions } from "../hooks/use-automation-permissions";
|
||||
import { AutomationNewHeader } from "./components/automation-new-header";
|
||||
|
||||
interface AutomationNewContentProps {
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orchestrator for the create route. Gates on ``automations:create`` so users
|
||||
* who can't create don't even see the form; same panel as the detail page's
|
||||
* access-denied state for consistency. The builder defaults to the friendly
|
||||
* form with a raw-JSON escape hatch.
|
||||
*
|
||||
* Model eligibility is no longer gated here — the builder's own model pickers
|
||||
* list eligible (premium/BYOK) models, surface a per-slot notice when none
|
||||
* exist, and block submit until each slot resolves.
|
||||
*/
|
||||
export function AutomationNewContent({ searchSpaceId }: AutomationNewContentProps) {
|
||||
const perms = useAutomationPermissions();
|
||||
|
||||
if (perms.loading) {
|
||||
return <div className="h-32 rounded-md border border-border/60 bg-muted/10 animate-pulse" />;
|
||||
}
|
||||
|
||||
if (!perms.canCreate) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
You don't have permission to create automations in this search space.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutomationNewHeader searchSpaceId={searchSpaceId} />
|
||||
<AutomationBuilderForm mode="create" searchSpaceId={searchSpaceId} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
"use client";
|
||||
import { ArrowLeft, MessageSquarePlus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface AutomationNewHeaderProps {
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
export function AutomationNewHeader({ searchSpaceId }: AutomationNewHeaderProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
|
||||
<Link
|
||||
href={`/dashboard/${searchSpaceId}/automations`}
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
|
||||
Back to automations
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-xl md:text-2xl font-semibold text-foreground">New automation</h1>
|
||||
<p className="text-sm text-muted-foreground max-w-2xl">
|
||||
Set up a task and a schedule. Prefer natural language? Use chat instead.
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
Switch to chat
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { AutomationNewContent } from "./automation-new-content";
|
||||
|
||||
export default async function NewAutomationPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ search_space_id: string }>;
|
||||
}) {
|
||||
const { search_space_id } = await params;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<AutomationNewContent searchSpaceId={Number(search_space_id)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { AutomationsContent } from "./automations-content";
|
||||
|
||||
export default async function AutomationsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ search_space_id: string }>;
|
||||
}) {
|
||||
const { search_space_id } = await params;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<AutomationsContent searchSpaceId={Number(search_space_id)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -69,11 +69,11 @@ import { documentsApiService } from "@/lib/apis/documents-api.service";
|
|||
import { getBearerToken } from "@/lib/auth-utils";
|
||||
import { type ChatFlow, classifyChatError } from "@/lib/chat/chat-error-classifier";
|
||||
import { tagPreAcceptSendFailure, toHttpResponseError } from "@/lib/chat/chat-request-errors";
|
||||
import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
|
||||
import {
|
||||
convertToThreadMessage,
|
||||
reconcileInterruptedAssistantMessages,
|
||||
} from "@/lib/chat/message-utils";
|
||||
import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
|
||||
import {
|
||||
isPodcastGenerating,
|
||||
looksLikePodcastRequest,
|
||||
|
|
@ -110,6 +110,7 @@ import {
|
|||
extractUserTurnForNewChatApi,
|
||||
type NewChatUserImagePayload,
|
||||
} from "@/lib/chat/user-turn-api-parts";
|
||||
import { BACKEND_URL } from "@/lib/env-config";
|
||||
import { NotFoundError } from "@/lib/error";
|
||||
import {
|
||||
trackChatBlocked,
|
||||
|
|
@ -119,7 +120,7 @@ import {
|
|||
trackChatResponseReceived,
|
||||
} from "@/lib/posthog/events";
|
||||
import Loading from "../loading";
|
||||
import { BACKEND_URL } from "@/lib/env-config";
|
||||
|
||||
const MobileEditorPanel = dynamic(
|
||||
() =>
|
||||
import("@/components/editor-panel/editor-panel").then((m) => ({
|
||||
|
|
@ -739,15 +740,6 @@ export default function NewChatPage() {
|
|||
queryFn: () => documentsApiService.searchDocumentTitles({ queryParams: prefetchParams }),
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["surfsense-docs-mention", "", false],
|
||||
queryFn: () =>
|
||||
documentsApiService.getSurfsenseDocs({
|
||||
queryParams: { page: 0, page_size: 20 },
|
||||
}),
|
||||
staleTime: 3 * 60 * 1000,
|
||||
});
|
||||
}, [searchSpaceId, queryClient]);
|
||||
|
||||
// Handle scroll to comment from URL query params (e.g., from inbox item click)
|
||||
|
|
@ -948,7 +940,6 @@ export default function NewChatPage() {
|
|||
trackChatMessageSent(searchSpaceId, currentThreadId, {
|
||||
hasAttachments: userImages.length > 0,
|
||||
hasMentionedDocuments:
|
||||
mentionedDocumentIds.surfsense_doc_ids.length > 0 ||
|
||||
mentionedDocumentIds.document_ids.length > 0 ||
|
||||
mentionedDocumentIds.folder_ids.length > 0 ||
|
||||
mentionedDocumentIds.connector_ids.length > 0,
|
||||
|
|
@ -1026,12 +1017,11 @@ export default function NewChatPage() {
|
|||
|
||||
// Get mentioned document IDs for context (separate fields for backend)
|
||||
const hasDocumentIds = mentionedDocumentIds.document_ids.length > 0;
|
||||
const hasSurfsenseDocIds = mentionedDocumentIds.surfsense_doc_ids.length > 0;
|
||||
const hasFolderIds = mentionedDocumentIds.folder_ids.length > 0;
|
||||
const hasConnectorIds = mentionedDocumentIds.connector_ids.length > 0;
|
||||
|
||||
// Clear mentioned documents after capturing them
|
||||
if (hasDocumentIds || hasSurfsenseDocIds || hasFolderIds || hasConnectorIds) {
|
||||
if (hasDocumentIds || hasFolderIds || hasConnectorIds) {
|
||||
setMentionedDocuments([]);
|
||||
}
|
||||
|
||||
|
|
@ -1053,9 +1043,6 @@ export default function NewChatPage() {
|
|||
mentioned_document_ids: hasDocumentIds
|
||||
? mentionedDocumentIds.document_ids
|
||||
: undefined,
|
||||
mentioned_surfsense_doc_ids: hasSurfsenseDocIds
|
||||
? mentionedDocumentIds.surfsense_doc_ids
|
||||
: undefined,
|
||||
mentioned_folder_ids: hasFolderIds ? mentionedDocumentIds.folder_ids : undefined,
|
||||
mentioned_connector_ids: hasConnectorIds
|
||||
? mentionedDocumentIds.connector_ids
|
||||
|
|
@ -1946,18 +1933,14 @@ export default function NewChatPage() {
|
|||
const selection = await getAgentFilesystemSelection(searchSpaceId, {
|
||||
localFilesystemEnabled,
|
||||
});
|
||||
// Partition the source mentions back into doc/surfsense_doc/folder
|
||||
// id buckets so the regenerate route can pass them to
|
||||
// ``stream_new_chat`` and the priority middleware sees the
|
||||
// same ``[USER-MENTIONED]`` priority entries the original
|
||||
// turn did. Without this partition the regenerate flow
|
||||
// silently dropped the agent's mention awareness — same
|
||||
// architectural bug we fixed on the new-chat path.
|
||||
const regenerateSurfsenseDocIds = sourceMentionedDocs
|
||||
.filter((d) => d.kind === "doc" && d.document_type === "SURFSENSE_DOCS")
|
||||
.map((d) => d.id);
|
||||
// Partition the source mentions back into doc/folder id buckets
|
||||
// so the regenerate route can pass them to ``stream_new_chat``
|
||||
// and the priority middleware sees the same ``[USER-MENTIONED]``
|
||||
// priority entries the original turn did. Without this partition
|
||||
// the regenerate flow silently dropped the agent's mention
|
||||
// awareness — same architectural bug we fixed on the new-chat path.
|
||||
const regenerateDocIds = sourceMentionedDocs
|
||||
.filter((d) => d.kind === "doc" && d.document_type !== "SURFSENSE_DOCS")
|
||||
.filter((d) => d.kind === "doc")
|
||||
.map((d) => d.id);
|
||||
const regenerateFolderIds = sourceMentionedDocs
|
||||
.filter((d) => d.kind === "folder")
|
||||
|
|
@ -1972,19 +1955,15 @@ export default function NewChatPage() {
|
|||
client_platform: selection.client_platform,
|
||||
local_filesystem_mounts: selection.local_filesystem_mounts,
|
||||
mentioned_document_ids: regenerateDocIds.length > 0 ? regenerateDocIds : undefined,
|
||||
mentioned_surfsense_doc_ids:
|
||||
regenerateSurfsenseDocIds.length > 0 ? regenerateSurfsenseDocIds : undefined,
|
||||
mentioned_folder_ids: regenerateFolderIds.length > 0 ? regenerateFolderIds : undefined,
|
||||
mentioned_connector_ids:
|
||||
regenerateConnectors.length > 0 ? regenerateConnectors.map((d) => d.id) : undefined,
|
||||
mentioned_connectors:
|
||||
regenerateConnectors.length > 0 ? regenerateConnectors : undefined,
|
||||
mentioned_connectors: regenerateConnectors.length > 0 ? regenerateConnectors : undefined,
|
||||
// Full mention metadata for the regenerate-specific
|
||||
// source list. Only meaningful for edit (the BE only
|
||||
// re-persists a user row when ``user_query`` is set);
|
||||
// reload reuses the original turn's mentioned_documents.
|
||||
mentioned_documents:
|
||||
sourceMentionedDocs.length > 0 ? sourceMentionedDocs : undefined,
|
||||
mentioned_documents: sourceMentionedDocs.length > 0 ? sourceMentionedDocs : undefined,
|
||||
};
|
||||
if (isEdit) {
|
||||
requestBody.user_images = editExtras?.userImages ?? [];
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import {
|
|||
deleteMemberMutationAtom,
|
||||
updateMemberMutationAtom,
|
||||
} from "@/atoms/members/members-mutation.atoms";
|
||||
import { membersAtom, myAccessAtom, canPerform } from "@/atoms/members/members-query.atoms";
|
||||
import { canPerform, membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue