Initial implementation of TriggerShell
A Python CLI (typer) that bootstraps Node/pnpm and launches a Next.js 16 web app for running configured shell scripts: YAML config validated by a shared Zod schema, dynamic per-script forms mapped to shadcn controls, argv-safe execa execution with live WebSocket streaming, SQLite/Drizzle run history, and optional argon2 session + API token auth. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MultiSelectProps {
|
||||
choices: string[];
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
}
|
||||
|
||||
export function MultiSelect({ choices, value, onChange }: MultiSelectProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function toggle(choice: string) {
|
||||
onChange(
|
||||
value.includes(choice)
|
||||
? value.filter((v) => v !== choice)
|
||||
: [...value, choice],
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"h-auto min-h-8 w-full justify-between font-normal",
|
||||
)}
|
||||
>
|
||||
<span className="flex flex-1 flex-wrap gap-1 text-left">
|
||||
{value.length === 0 ? (
|
||||
<span className="text-muted-foreground">Select...</span>
|
||||
) : (
|
||||
value.map((v) => (
|
||||
<Badge key={v} variant="secondary" className="gap-1">
|
||||
{v}
|
||||
<X
|
||||
className="size-3 cursor-pointer"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
toggle(v);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
))
|
||||
)}
|
||||
</span>
|
||||
<ChevronsUpDown className="text-muted-foreground size-4 shrink-0" />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80 p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No matches.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{choices.map((choice) => (
|
||||
<CommandItem key={choice} onSelect={() => toggle(choice)}>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 size-4",
|
||||
value.includes(choice) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{choice}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Play, Loader2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Form } from "@/components/ui/form";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { buildVariableSchemaFromList } from "@/lib/validation/variable-schema";
|
||||
import type { ClientScript } from "@/lib/config/serialize";
|
||||
import { FieldRenderer } from "./field-renderer";
|
||||
|
||||
function emptyValueFor(variable: ClientScript["variables"][number]): unknown {
|
||||
if (variable.type === "boolean") return false;
|
||||
if (variable.type === "multiselect") return [];
|
||||
return "";
|
||||
}
|
||||
|
||||
function defaultValuesFor(script: ClientScript): Record<string, unknown> {
|
||||
const values: Record<string, unknown> = {};
|
||||
for (const variable of script.variables) {
|
||||
values[variable.name] = variable.default ?? emptyValueFor(variable);
|
||||
}
|
||||
return values;
|
||||
}
|
||||
|
||||
export function DynamicForm({ script }: { script: ClientScript }) {
|
||||
const router = useRouter();
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const schema = buildVariableSchemaFromList(script.variables);
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaultValuesFor(script),
|
||||
});
|
||||
|
||||
async function onSubmit(values: Record<string, unknown>) {
|
||||
setSubmitError(null);
|
||||
const response = await fetch(`/api/scripts/${script.id}/runs`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ variables: values }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
setSubmitError(data.error ?? "Failed to start run");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
toast.success(`${script.name} started`);
|
||||
router.push(`/runs/${data.runId}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-5"
|
||||
>
|
||||
{submitError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{submitError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{script.variables.length === 0 && (
|
||||
<p className="text-muted-foreground text-sm">
|
||||
This script takes no parameters.
|
||||
</p>
|
||||
)}
|
||||
{script.variables.map((variable) => (
|
||||
<FieldRenderer key={variable.name} variable={variable} />
|
||||
))}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={form.formState.isSubmitting}
|
||||
className="w-fit"
|
||||
>
|
||||
{form.formState.isSubmitting ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<Play />
|
||||
)}
|
||||
Run
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { MultiSelect } from "./controls/multi-select";
|
||||
import type { ClientVariable } from "@/lib/config/serialize";
|
||||
|
||||
export function FieldRenderer({ variable }: { variable: ClientVariable }) {
|
||||
const { control } = useFormContext();
|
||||
const label = variable.label ?? variable.name;
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={control}
|
||||
name={variable.name}
|
||||
render={({ field }) => {
|
||||
switch (variable.control) {
|
||||
case "textarea":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "password":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "number":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...(variable.type === "number"
|
||||
? {
|
||||
min: variable.min,
|
||||
max: variable.max,
|
||||
step: variable.step,
|
||||
}
|
||||
: {})}
|
||||
value={field.value ?? ""}
|
||||
onChange={(event) =>
|
||||
field.onChange(
|
||||
event.target.value === ""
|
||||
? undefined
|
||||
: Number(event.target.value),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "slider": {
|
||||
const min = variable.type === "number" ? (variable.min ?? 0) : 0;
|
||||
const max =
|
||||
variable.type === "number" ? (variable.max ?? 100) : 100;
|
||||
const step = variable.type === "number" ? variable.step : undefined;
|
||||
const current =
|
||||
typeof field.value === "number" ? field.value : (min + max) / 2;
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
<span className="text-muted-foreground font-normal">
|
||||
{current}
|
||||
</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Slider
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={current}
|
||||
onValueChange={(next) => field.onChange(next)}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<FormItem className="flex flex-row items-center gap-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={!!field.value}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(checked === true)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">{label}</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "switch":
|
||||
return (
|
||||
<FormItem className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<FormLabel className="font-normal">{label}</FormLabel>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={!!field.value}
|
||||
onCheckedChange={(checked) => field.onChange(checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "select":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{variable.type === "enum" &&
|
||||
variable.choices.map((choice) => (
|
||||
<SelectItem key={choice} value={choice}>
|
||||
{choice}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "radio":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
>
|
||||
{variable.type === "enum" &&
|
||||
variable.choices.map((choice) => (
|
||||
<div key={choice} className="flex items-center gap-2">
|
||||
<RadioGroupItem
|
||||
value={choice}
|
||||
id={`${variable.name}-${choice}`}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`${variable.name}-${choice}`}
|
||||
className="font-normal"
|
||||
>
|
||||
{choice}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "checkboxGroup":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<div className="flex flex-col gap-2">
|
||||
{variable.type === "multiselect" &&
|
||||
variable.choices.map((choice) => {
|
||||
const values: string[] = Array.isArray(field.value)
|
||||
? field.value
|
||||
: [];
|
||||
return (
|
||||
<div key={choice} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={values.includes(choice)}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(
|
||||
checked === true
|
||||
? [...values, choice]
|
||||
: values.filter((v) => v !== choice),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Label className="font-normal">{choice}</Label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "multiselect":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<FormControl>
|
||||
<MultiSelect
|
||||
choices={
|
||||
variable.type === "multiselect" ? variable.choices : []
|
||||
}
|
||||
value={Array.isArray(field.value) ? field.value : []}
|
||||
onChange={(value) => field.onChange(value)}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "text":
|
||||
default:
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user