@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/custom-fields/FieldsList.tsx

@@ -0,0 +1,225 @@
+import { focusAgentChat } from "@agent-native/core/client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { FieldListRow } from "@/components/custom-fields/FieldListRow";
+import { FieldsListSkeleton } from "@/components/custom-fields/FieldsListSkeleton";
+import { INERT_SORTABLE_PROPS } from "@/components/dnd/SortableItem";
+import { ChipSelect } from "@/components/shared/ChipSelect";
+import { DeleteItemDialog } from "@/components/shared/DeleteItemDialog";
+import { ListRowPreview } from "@/components/shared/dnd/ListRowPreview";
+import { List } from "@/components/shared/list/List";
+import { ListEmptyState } from "@/components/shared/ListEmptyState";
+import { ListErrorMessage } from "@/components/shared/ListErrorMessage";
+import {
+  useCreateCustomField,
+  useCustomFields,
+  useDeleteCustomField,
+  useReorderCustomFields,
+  type FieldDefinition,
+} from "@/hooks/use-custom-fields";
+import {
+  TASK_CARD_FIELD_LIMIT,
+  useUpdateVisibleTaskFields,
+  useVisibleTaskFieldIds,
+} from "@/hooks/use-visible-task-fields";
+
+import { FieldEditorSidebar } from "./editor/FieldEditorSidebar";
+import type { FieldDraft } from "./editor/types";
+import { FieldCreateBar } from "./FieldCreateBar";
+
+type FieldListItem = FieldDefinition;
+
+export function FieldsList({
+  activeFieldId,
+  setActiveFieldId,
+}: {
+  activeFieldId: string | null;
+  setActiveFieldId: (fieldId: string | null) => void;
+}) {
+  const { fields, isPending, isError, error } = useCustomFields();
+  const { fieldIds: visibleFieldIds } = useVisibleTaskFieldIds();
+  const updateVisibleTaskFields = useUpdateVisibleTaskFields();
+  const visibleFieldOptions = useMemo(
+    () => fields.map((field) => ({ id: field.id, label: field.title })),
+    [fields],
+  );
+  const createField = useCreateCustomField();
+  const deleteField = useDeleteCustomField();
+  const reorderFields = useReorderCustomFields();
+  const listItems = useMemo<FieldListItem[]>(() => fields, [fields]);
+  const [orderedFields, setOrderedFields] =
+    useState<FieldListItem[]>(listItems);
+  const [pendingDelete, setPendingDelete] = useState<FieldDefinition | null>(
+    null,
+  );
+  const busy =
+    createField.isPending || deleteField.isPending || reorderFields.isPending;
+  const editingField = activeFieldId
+    ? (fields.find((field) => field.id === activeFieldId) ?? null)
+    : null;
+
+  useEffect(() => {
+    setOrderedFields(listItems);
+  }, [listItems]);
+
+  useEffect(() => {
+    if (!activeFieldId) return;
+    if (!fields.some((field) => field.id === activeFieldId)) {
+      setActiveFieldId(null);
+    }
+  }, [activeFieldId, fields, setActiveFieldId]);
+
+  async function handleCreate(draft: FieldDraft) {
+    try {
+      const created = await createField.mutateAsync({
+        title: draft.title,
+        type: draft.type,
+        config: draft.config,
+      });
+      setActiveFieldId(created.id);
+      focusAgentChat();
+      toast.success("Field created.");
+    } catch (caught) {
+      toast.error((caught as Error)?.message ?? "Could not create field.");
+      throw caught;
+    }
+  }
+
+  async function handleDelete() {
+    const field = pendingDelete;
+    if (!field) return;
+    try {
+      const result = await deleteField.mutateAsync({ fieldId: field.id });
+      setPendingDelete(null);
+      if (activeFieldId === field.id) setActiveFieldId(null);
+      toast.success(
+        `Deleted ${field.title}${result.deletedValues ? ` and ${result.deletedValues} task values` : ""}.`,
+      );
+    } catch (caught) {
+      toast.error((caught as Error)?.message ?? "Could not delete field.");
+    }
+  }
+
+  const openEditor = useCallback(
+    (fieldId: string) => {
+      focusAgentChat();
+      setActiveFieldId(fieldId);
+    },
+    [setActiveFieldId],
+  );
+
+  function handleReorder(nextFields: FieldListItem[]) {
+    setOrderedFields(nextFields);
+    reorderFields.mutate(
+      { fieldIds: nextFields.map((field) => field.id) },
+      { onError: () => setOrderedFields(listItems) },
+    );
+  }
+
+  return (
+    <>
+      <div className="grid shrink-0 gap-3">
+        <FieldCreateBar busy={busy} onCreate={handleCreate} />
+        <ChipSelect
+          label="Task card fields"
+          options={visibleFieldOptions}
+          selectedIds={visibleFieldIds}
+          onSelectedIdsChange={(fieldIds) =>
+            updateVisibleTaskFields.mutate({ fieldIds })
+          }
+          disabled={busy || isPending || updateVisibleTaskFields.isPending}
+          limit={TASK_CARD_FIELD_LIMIT}
+          addButtonLabel="Add field"
+          emptyLabel="No fields selected"
+        />
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {isPending ? (
+          <FieldsListSkeleton />
+        ) : isError ? (
+          <div
+            aria-label="Fields list"
+            className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
+          >
+            <ListErrorMessage
+              error={error}
+              fallbackMessage="Failed to load fields."
+            />
+          </div>
+        ) : orderedFields.length === 0 ? (
+          <div
+            aria-label="Fields list"
+            className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
+          >
+            <ListEmptyState
+              heading="No fields yet"
+              description="Create a field above to start adding task structure."
+            />
+          </div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none">
+            <List
+              items={orderedFields}
+              selectionEnabled={false}
+              ariaLabel="Fields list"
+              onReorder={handleReorder}
+              renderItem={({ item, sortable }) => (
+                <FieldListRow
+                  sortable={sortable}
+                  item={item}
+                  highlighted={activeFieldId === item.id}
+                  onOpenDetails={() => openEditor(item.id)}
+                  onRequestDelete={() => setPendingDelete(item)}
+                />
+              )}
+              renderOverlay={({ item, blockDragCount }) => (
+                <ListRowPreview
+                  id={item.id}
+                  overlayDataAttribute="data-dnd-overlay-field-id"
+                  blockDragCount={blockDragCount}
+                >
+                  <FieldListRow
+                    sortable={INERT_SORTABLE_PROPS}
+                    item={item}
+                    highlighted={activeFieldId === item.id}
+                    onOpenDetails={() => openEditor(item.id)}
+                    onRequestDelete={() => setPendingDelete(item)}
+                  />
+                </ListRowPreview>
+              )}
+            />
+          </div>
+        )}
+
+        <DeleteItemDialog
+          open={pendingDelete !== null}
+          onOpenChange={(open) => {
+            if (!open) setPendingDelete(null);
+          }}
+          entityLabel="field"
+          itemTitle={pendingDelete?.title ?? null}
+          pending={deleteField.isPending}
+          description={
+            pendingDelete ? (
+              <>
+                This deletes &quot;{pendingDelete.title}&quot; and removes its
+                values from every task.
+              </>
+            ) : (
+              "This deletes the field and removes its values from every task."
+            )
+          }
+          onConfirm={() => void handleDelete()}
+        />
+      </div>
+
+      <FieldEditorSidebar
+        field={editingField}
+        disabled={deleteField.isPending}
+        onClose={() => setActiveFieldId(null)}
+      />
+    </>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/FieldsListSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SKELETON_ROW_COUNT = 3;
+
+export function FieldsListSkeleton() {
+  return (
+    <div
+      aria-label="Fields list"
+      className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
+    >
+      <div className="grid gap-2">
+        {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
+          <Skeleton key={index} className="h-14 rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/FieldsPage.tsx

@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router";
+
+import { FieldsList } from "@/components/custom-fields/FieldsList";
+import { PageHeader } from "@/components/shared/PageHeader";
+
+export function FieldsPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeFieldId = searchParams.get("field");
+
+  const setActiveFieldId = useCallback(
+    (nextFieldId: string | null) => {
+      setSearchParams(
+        (prev) => {
+          const nextParams = new URLSearchParams(prev);
+          if (nextFieldId) {
+            nextParams.set("field", nextFieldId);
+          } else {
+            nextParams.delete("field");
+          }
+          return nextParams;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  return (
+    <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col gap-6 overflow-hidden p-4 md:p-6">
+      <PageHeader
+        title="Fields"
+        description="Define the reusable fields that every task can fill in."
+      />
+
+      <FieldsList
+        activeFieldId={activeFieldId}
+        setActiveFieldId={setActiveFieldId}
+      />
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/FieldEditorSidebar.tsx

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+
+import { SidePanel } from "@/components/shared/SidePanel";
+import {
+  useUpdateCustomField,
+  type FieldDefinition,
+} from "@/hooks/use-custom-fields";
+
+import { FieldConfigControl } from "./config/FieldConfigControl";
+import { FieldTitleSection } from "./FieldTitleSection";
+
+export function FieldEditorSidebar({
+  field,
+  disabled,
+  onClose,
+}: {
+  field: FieldDefinition | null;
+  disabled: boolean;
+  onClose: () => void;
+}) {
+  if (!field) return null;
+
+  return (
+    <SidePanel title="Field" closeLabel="Close field editor" onClose={onClose}>
+      <FieldEditorSidebarPanel field={field} disabled={disabled} />
+    </SidePanel>
+  );
+}
+
+function FieldEditorSidebarPanel({
+  field,
+  disabled,
+}: {
+  field: FieldDefinition;
+  disabled: boolean;
+}) {
+  const updateField = useUpdateCustomField();
+
+  const saveUpdate = useCallback(
+    (payload: { title?: string; config?: FieldDefinition["config"] }) => {
+      void updateField
+        .mutateAsync({ fieldId: field.id, ...payload })
+        .catch((caught) => {
+          toast.error((caught as Error)?.message ?? "Could not update field.");
+        });
+    },
+    [field.id, updateField],
+  );
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <FieldTitleSection
+        title={field.title}
+        disabled={disabled}
+        onChange={(title) => saveUpdate({ title })}
+      />
+
+      <section className="grid gap-3 border-b border-border/70 px-3 py-3">
+        <FieldConfigControl
+          type={field.type}
+          config={field.config}
+          disabled={disabled}
+          onChange={(config) => saveUpdate({ config })}
+        />
+      </section>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/FieldTitleSection.tsx

@@ -0,0 +1,32 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function FieldTitleSection({
+  title,
+  disabled,
+  onChange,
+}: {
+  title: string;
+  disabled?: boolean;
+  onChange: (title: string) => void;
+}) {
+  return (
+    <section className="grid gap-2 border-b border-border/70 px-3 py-3">
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <Label className="min-w-0 truncate text-[13px] font-medium">
+          Title
+        </Label>
+        <span className="shrink-0 text-[11px] text-muted-foreground">
+          Required
+        </span>
+      </div>
+      <Input
+        value={title}
+        disabled={disabled}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        aria-label="Edit field title"
+        className="h-9 text-[13px]"
+      />
+    </section>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/CurrencyConfigControl.tsx

@@ -0,0 +1,49 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import {
+  type FieldConfigControlProps,
+  precisionFromConfig,
+  symbolFromConfig,
+} from "./utils";
+
+export function CurrencyConfigControl({
+  config,
+  onChange,
+  disabled = false,
+}: FieldConfigControlProps) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-[96px_1fr]">
+      <div className="grid gap-2">
+        <Label>Symbol</Label>
+        <Input
+          maxLength={8}
+          disabled={disabled}
+          value={symbolFromConfig(config)}
+          onChange={(event) =>
+            onChange({
+              symbol: event.currentTarget.value,
+              precision: precisionFromConfig(config) || 2,
+            })
+          }
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label>Precision</Label>
+        <Input
+          type="number"
+          min={0}
+          max={6}
+          disabled={disabled}
+          value={precisionFromConfig(config) || 2}
+          onChange={(event) =>
+            onChange({
+              symbol: symbolFromConfig(config),
+              precision: Number(event.currentTarget.value || 0),
+            })
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/FieldConfigControl.tsx

@@ -0,0 +1,56 @@
+import type { FieldConfig, FieldType } from "@/hooks/use-custom-fields";
+
+import { CurrencyConfigControl } from "./CurrencyConfigControl";
+import { NumberConfigControl } from "./NumberConfigControl";
+import { PercentConfigControl } from "./PercentConfigControl";
+import { SelectConfigControl } from "./SelectConfigControl";
+
+export function FieldConfigControl({
+  type,
+  config,
+  onChange,
+  disabled = false,
+}: {
+  type: FieldType;
+  config: FieldConfig;
+  onChange: (config: FieldConfig) => void;
+  disabled?: boolean;
+}) {
+  switch (type) {
+    case "number":
+      return (
+        <NumberConfigControl
+          config={config}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    case "percent":
+      return (
+        <PercentConfigControl
+          config={config}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    case "currency":
+      return (
+        <CurrencyConfigControl
+          config={config}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    case "single_select":
+    case "multi_select":
+      return (
+        <SelectConfigControl
+          config={config}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    default:
+      return null;
+  }
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/NumberConfigControl.tsx

@@ -0,0 +1,52 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import {
+  type FieldConfigControlProps,
+  positiveOnlyFromConfig,
+  precisionFromConfig,
+} from "./utils";
+
+export function NumberConfigControl({
+  config,
+  onChange,
+  disabled = false,
+}: FieldConfigControlProps) {
+  return (
+    <div className="grid gap-3">
+      <div className="grid gap-2">
+        <Label>Precision</Label>
+        <Input
+          type="number"
+          min={0}
+          max={6}
+          disabled={disabled}
+          value={precisionFromConfig(config)}
+          onChange={(event) => {
+            const precision = Number(event.currentTarget.value || 0);
+            onChange({
+              ...config,
+              precision,
+            });
+          }}
+        />
+      </div>
+      <div className="grid gap-2">
+        <label className="flex items-center gap-2 text-sm">
+          <Checkbox
+            checked={positiveOnlyFromConfig(config)}
+            disabled={disabled}
+            onCheckedChange={(checked) =>
+              onChange({
+                ...config,
+                positiveOnly: checked === true,
+              })
+            }
+          />
+          Positive numbers only
+        </label>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/custom-fields/editor/config/PercentConfigControl.tsx

@@ -0,0 +1,30 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { type FieldConfigControlProps, precisionFromConfig } from "./utils";
+
+export function PercentConfigControl({
+  config,
+  onChange,
+  disabled = false,
+}: FieldConfigControlProps) {
+  return (
+    <div className="grid gap-2">
+      <Label>Precision</Label>
+      <Input
+        type="number"
+        min={0}
+        max={6}
+        disabled={disabled}
+        value={precisionFromConfig(config)}
+        onChange={(event) => {
+          const precision = Number(event.currentTarget.value || 0);
+          onChange({
+            ...config,
+            precision,
+          });
+        }}
+      />
+    </div>
+  );
+}