refactor: restructure manage-signal-sheet, add size variants to Input and Button

- Split manage-signal-sheet.tsx into folder with one component per file
- Group template-picker and test-results-view into subfolders with index.tsx pattern
- Add xs/sm/md size prop to Input component (xs default, preserves existing behavior)
- Add md size variant to Button component
- Use size sm for signal name input, md for Test/Create/Run test buttons
- Right-justify footer buttons, disable Test when Create is disabled
- Reduce sheet width by 10%, remove selected trace chip, remove test flask icon
- Rename template label to "Template" with consistent header styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: kolbeyang

frontend/components/signals/manage-signal-sheet.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export default function EnumValuesInput({
+  values,
+  onChange,
+}: {
+  values: string[] | undefined;
+  onChange: (values: string[] | undefined) => void;
+}) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault();
+        const trimmed = inputValue.trim();
+        if (trimmed && !values?.includes(trimmed)) {
+          onChange([...(values || []), trimmed]);
+          setInputValue("");
+        }
+      } else if (e.key === "Backspace" && !inputValue && values && values.length > 0) {
+        onChange(values.slice(0, -1));
+      }
+    },
+    [inputValue, values, onChange]
+  );
+
+  const removeValue = useCallback(
+    (valueToRemove: string) => {
+      const newValues = values?.filter((v) => v !== valueToRemove);
+      onChange(newValues && newValues.length > 0 ? newValues : undefined);
+    },
+    [values, onChange]
+  );
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 min-h-7 px-2 py-1 border rounded-md bg-background w-full">
+      {values?.map((value) => (
+        <span
+          key={value}
+          className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-xs bg-muted text-secondary-foreground rounded"
+        >
+          {value}
+          <button
+            type="button"
+            onClick={() => removeValue(value)}
+            className="hover:text-destructive text-muted-foreground transition-colors"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </span>
+      ))}
+      <input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={values?.length ? "" : "Add values..."}
+        className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
+      />
+    </div>
+  );
+}

frontend/components/signals/manage-signal-sheet/enum-values-input.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useParams } from "next/navigation";
+import { type PropsWithChildren, useCallback, useState } from "react";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { useToast } from "@/lib/hooks/use-toast";
+import { type TraceRow } from "@/lib/traces/types";
+import { cn } from "@/lib/utils";
+
+import SignalFormFields from "./signal-form-fields";
+import TestPanel from "./test-panel";
+import { getDefaultValues, type ManageSignalForm } from "./types";
+import useSubmitHandler from "./use-submit-handler";
+import useTestExecution from "./use-test-execution";
+
+export type { ManageSignalForm } from "./types";
+export { getDefaultValues } from "./types";
+
+function SubmitButton({ isLoading }: { isLoading: boolean }) {
+  const {
+    watch,
+    formState: { isValid },
+  } = useFormContext<ManageSignalForm>();
+  const id = watch("id");
+
+  return (
+    <Button type="submit" size="md" disabled={isLoading || !isValid} handleEnter>
+      <Loader2 className={cn("hidden", isLoading && "animate-spin block")} size={16} />
+      {id ? "Save" : "Create"}
+    </Button>
+  );
+}
+
+function DrawerContent({
+  setOpen,
+  onSuccess,
+  showTest,
+  setShowTest,
+}: {
+  setOpen: (open: boolean) => void;
+  onSuccess?: (signal: ManageSignalForm) => Promise<void>;
+  showTest: boolean;
+  setShowTest: (show: boolean) => void;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedTrace, setSelectedTrace] = useState<TraceRow | null>(null);
+
+  const { projectId } = useParams();
+  const { toast } = useToast();
+  const {
+    handleSubmit,
+    reset,
+    watch,
+    getValues,
+    formState: { isValid },
+  } = useFormContext<ManageSignalForm>();
+  const id = watch("id");
+
+  const submit = useSubmitHandler({
+    projectId: String(projectId),
+    toast,
+    setOpen,
+    reset,
+    onSuccess,
+    setIsLoading,
+  });
+
+  const { isExecuting, testOutput, execute } = useTestExecution({
+    getValues,
+    projectId: String(projectId),
+    selectedTrace,
+  });
+
+  return (
+    <div className="flex h-full overflow-hidden">
+      {/* Left side — Form */}
+      <form onSubmit={handleSubmit(submit)} className="flex flex-col flex-1 overflow-hidden min-w-0">
+        <ScrollArea className="flex-1 px-5 py-4">
+          <SignalFormFields showTemplates={!id} />
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t">
+          <Button
+            type="button"
+            size="md"
+            variant={showTest ? "secondary" : "outline"}
+            disabled={isLoading || !isValid}
+            onClick={() => setShowTest(!showTest)}
+          >
+            Test
+          </Button>
+          <SubmitButton isLoading={isLoading} />
+        </div>
+      </form>
+
+      {/* Right side — Test panel */}
+      {showTest && (
+        <TestPanel
+          watch={watch}
+          selectedTrace={selectedTrace}
+          setSelectedTrace={setSelectedTrace}
+          isExecuting={isExecuting}
+          testOutput={testOutput}
+          execute={execute}
+          onClose={() => setShowTest(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default function ManageSignalSheet({
+  children,
+  open,
+  setOpen,
+  defaultValues: initialValues,
+  onSuccess,
+}: PropsWithChildren<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  defaultValues?: ManageSignalForm;
+  onSuccess?: (signal: ManageSignalForm) => Promise<void>;
+}>) {
+  const { projectId } = useParams();
+  const [showTest, setShowTest] = useState(false);
+
+  const convertToFormValues = useCallback(
+    (values: ManageSignalForm | undefined): ManageSignalForm => {
+      if (!values) return getDefaultValues(String(projectId));
+      return values;
+    },
+    [projectId]
+  );
+
+  const form = useForm<ManageSignalForm>({
+    defaultValues: convertToFormValues(initialValues),
+    mode: "onChange",
+  });
+
+  const onOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen);
+      if (nextOpen) {
+        form.reset(convertToFormValues(initialValues));
+      } else {
+        form.reset(getDefaultValues(String(projectId)));
+        setShowTest(false);
+      }
+    },
+    [form, initialValues, projectId, setOpen, convertToFormValues]
+  );
+
+  return (
+    <FormProvider {...form}>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetTrigger asChild>{children}</SheetTrigger>
+        <SheetContent
+          side="right"
+          className={cn(
+            "sm:max-w-none! p-0 flex flex-col transition-[width] duration-300",
+            showTest ? "w-[72vw]" : "w-[45vw]"
+          )}
+        >
+          <DrawerContent setOpen={setOpen} onSuccess={onSuccess} showTest={showTest} setShowTest={setShowTest} />
+        </SheetContent>
+      </Sheet>
+    </FormProvider>
+  );
+}

frontend/components/signals/manage-signal-sheet/index.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useCallback } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { SCHEMA_FIELD_TYPES } from "@/components/signals/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
+import { Textarea } from "@/components/ui/textarea";
+
+import EnumValuesInput from "./enum-values-input";
+import { type ManageSignalForm } from "./types";
+
+export default function SchemaFieldRow({
+  index,
+  onRemove,
+  canRemove,
+}: {
+  index: number;
+  onRemove: () => void;
+  canRemove: boolean;
+}) {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext<ManageSignalForm>();
+
+  const fieldType = watch(`schemaFields.${index}.type`);
+  const enumValues = watch(`schemaFields.${index}.enumValues`);
+  const fieldErrors = errors.schemaFields?.[index];
+
+  const handleTypeChange = useCallback(
+    (newType: string) => {
+      setValue(`schemaFields.${index}.type`, newType as "string" | "number" | "boolean" | "enum");
+      if (newType !== "enum") {
+        setValue(`schemaFields.${index}.enumValues`, undefined);
+      }
+    },
+    [setValue, index]
+  );
+
+  const handleEnumValuesChange = useCallback(
+    (values: string[] | undefined) => {
+      setValue(`schemaFields.${index}.enumValues`, values);
+    },
+    [setValue, index]
+  );
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex gap-2 items-start">
+        <Controller
+          name={`schemaFields.${index}.name`}
+          control={control}
+          rules={{
+            required: "Name is required",
+            pattern: {
+              value: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+              message: "Name must be a valid identifier",
+            },
+          }}
+          render={({ field }) => <Input {...field} placeholder="Field name" className="w-32 text-sm" />}
+        />
+        {fieldType === "enum" ? (
+          <div className="flex flex-col gap-1 w-28">
+            <Controller
+              name={`schemaFields.${index}.type`}
+              control={control}
+              render={({ field }) => (
+                <Select value={field.value} onValueChange={handleTypeChange}>
+                  <SelectTrigger className="w-28">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {SCHEMA_FIELD_TYPES.map((type) => (
+                      <SelectItem key={type.value} value={type.value}>
+                        {type.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            <EnumValuesInput values={enumValues} onChange={handleEnumValuesChange} />
+          </div>
+        ) : (
+          <Controller
+            name={`schemaFields.${index}.type`}
+            control={control}
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={handleTypeChange}>
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {SCHEMA_FIELD_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
+        )}
+        <Controller
+          name={`schemaFields.${index}.description`}
+          control={control}
+          render={({ field }) => (
+            <Textarea
+              {...field}
+              placeholder="Description of the field"
+              rows={0}
+              className="flex-1 text-xs! py-1.25 min-h-7!"
+            />
+          )}
+        />
+        <Button type="button" variant="ghost" onClick={onRemove} disabled={!canRemove} className="py-[7px] shrink-0">
+          <X className="w-3.5 h-3.5" />
+        </Button>
+      </div>
+      {fieldErrors && (
+        <p className="text-destructive text-xs">
+          {fieldErrors.name?.message || fieldErrors.description?.message || fieldErrors.type?.message}
+        </p>
+      )}
+    </div>
+  );
+}