@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/shared/InlineEditable.tsx

@@ -0,0 +1,166 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+} from "react";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+export const LIST_ROW_TITLE_FIELD_CLASS =
+  "h-8 w-full rounded-md border px-3 text-sm leading-8";
+
+function useInlineTitleEdit(input: {
+  title: string;
+  onSave: (title: string) => Promise<unknown>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draftTitle, setDraftTitle] = useState(input.title);
+  const [optimisticTitle, setOptimisticTitle] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const skipBlurSaveRef = useRef(false);
+
+  const displayTitle = optimisticTitle ?? input.title;
+
+  useEffect(() => {
+    if (optimisticTitle !== null && input.title === optimisticTitle) {
+      setOptimisticTitle(null);
+    }
+    if (!editing && optimisticTitle === null) {
+      setDraftTitle(input.title);
+    }
+  }, [editing, optimisticTitle, input.title]);
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [editing]);
+
+  async function saveTitle() {
+    const trimmed = draftTitle.trim();
+    if (!trimmed || trimmed === input.title) {
+      setDraftTitle(input.title);
+      setOptimisticTitle(null);
+      setEditing(false);
+      return;
+    }
+    setOptimisticTitle(trimmed);
+    setEditing(false);
+    try {
+      await input.onSave(trimmed);
+    } catch {
+      setOptimisticTitle(null);
+      setDraftTitle(input.title);
+    }
+  }
+
+  function handleTitleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      skipBlurSaveRef.current = true;
+      void saveTitle();
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      skipBlurSaveRef.current = true;
+      setDraftTitle(displayTitle);
+      setEditing(false);
+    }
+  }
+
+  function handleTitleBlur() {
+    if (skipBlurSaveRef.current) {
+      skipBlurSaveRef.current = false;
+      return;
+    }
+    void saveTitle();
+  }
+
+  return {
+    editing,
+    setEditing,
+    draftTitle,
+    setDraftTitle,
+    displayTitle,
+    inputRef,
+    handleTitleKeyDown,
+    handleTitleBlur,
+  };
+}
+
+interface InlineEditableProps {
+  value: string;
+  onSave: (title: string) => Promise<unknown>;
+  ariaLabel: string;
+  disabled?: boolean;
+  titleDragProps?: HTMLAttributes<HTMLButtonElement>;
+  displayDone?: boolean;
+  className?: string;
+  onDisplayTitleChange?: (title: string) => void;
+}
+
+export function InlineEditable({
+  value,
+  onSave,
+  ariaLabel,
+  disabled = false,
+  titleDragProps,
+  displayDone = false,
+  className,
+  onDisplayTitleChange,
+}: InlineEditableProps) {
+  const {
+    editing,
+    setEditing,
+    draftTitle,
+    setDraftTitle,
+    displayTitle,
+    inputRef,
+    handleTitleKeyDown,
+    handleTitleBlur,
+  } = useInlineTitleEdit({ title: value, onSave });
+
+  useEffect(() => {
+    onDisplayTitleChange?.(displayTitle);
+  }, [displayTitle, onDisplayTitleChange]);
+
+  if (editing) {
+    return (
+      <Input
+        ref={inputRef}
+        value={draftTitle}
+        onChange={(event) => setDraftTitle(event.target.value)}
+        onBlur={handleTitleBlur}
+        onKeyDown={handleTitleKeyDown}
+        aria-label={ariaLabel}
+        className={cn(
+          LIST_ROW_TITLE_FIELD_CLASS,
+          "border-input bg-background py-0 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0",
+          className,
+        )}
+        disabled={disabled}
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      {...titleDragProps}
+      onClick={() => setEditing(true)}
+      disabled={disabled}
+      className={cn(
+        LIST_ROW_TITLE_FIELD_CLASS,
+        "flex cursor-text items-center truncate border-transparent bg-transparent text-left outline-none transition-[color,text-decoration-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed",
+        displayDone && "line-through text-muted-foreground",
+        className,
+      )}
+    >
+      {displayTitle}
+    </button>
+  );
+}

package/corpus/templates/tasks/app/components/shared/ListEmptyState.tsx

@@ -0,0 +1,13 @@
+interface ListEmptyStateProps {
+  heading: string;
+  description: string;
+}
+
+export function ListEmptyState({ heading, description }: ListEmptyStateProps) {
+  return (
+    <div className="rounded-lg border border-dashed border-border p-8 text-center">
+      <p className="text-sm font-medium">{heading}</p>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/ListErrorMessage.tsx

@@ -0,0 +1,15 @@
+type ListErrorMessageProps = {
+  error: unknown;
+  fallbackMessage: string;
+};
+
+export function ListErrorMessage({
+  error,
+  fallbackMessage,
+}: ListErrorMessageProps) {
+  return (
+    <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
+      {(error as Error)?.message ?? fallbackMessage}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/ListViewHeader.tsx

@@ -0,0 +1,75 @@
+import { AgentToggleButton } from "@agent-native/core/client";
+
+import { PageHeader } from "@/components/shared/PageHeader";
+import { ListSelectionHeaderToggle } from "@/components/shared/selection/ListSelectionHeaderToggle";
+import { type ListSelection } from "@/components/shared/selection/use-list-selection";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export interface ListViewHeaderProps<T extends { id: string }> {
+  title: string;
+  description: string;
+  isPending: boolean;
+  showSelectToggle: boolean;
+  selection: ListSelection<T> | null;
+  toolbarBusy?: boolean;
+  includeDone?: boolean;
+  onIncludeDoneChange?: (next: boolean) => void;
+  showAgentToggle?: boolean;
+}
+
+export function ListViewHeader<T extends { id: string }>({
+  title,
+  description,
+  isPending,
+  showSelectToggle,
+  selection,
+  toolbarBusy,
+  includeDone,
+  onIncludeDoneChange,
+  showAgentToggle = false,
+}: ListViewHeaderProps<T>) {
+  const showIncludeDone =
+    includeDone !== undefined && onIncludeDoneChange !== undefined;
+  const hasActions =
+    (showSelectToggle && selection) || showIncludeDone || showAgentToggle;
+
+  return (
+    <PageHeader
+      title={title}
+      description={description}
+      actions={
+        hasActions ? (
+          <>
+            {showSelectToggle && selection ? (
+              <ListSelectionHeaderToggle
+                selectionMode={selection.state.selectionMode}
+                disabled={toolbarBusy || isPending}
+                onSelectionModeChange={
+                  selection.actions.setSelectionModeFromHeader
+                }
+              />
+            ) : null}
+            {showIncludeDone ? (
+              <div className="flex shrink-0 items-center gap-2 rounded-lg border border-border px-3 py-2">
+                <Switch
+                  id="include-done"
+                  checked={includeDone}
+                  onCheckedChange={onIncludeDoneChange}
+                  disabled={isPending}
+                />
+                <Label
+                  htmlFor="include-done"
+                  className="text-sm whitespace-nowrap"
+                >
+                  Show all
+                </Label>
+              </div>
+            ) : null}
+            {showAgentToggle ? <AgentToggleButton /> : null}
+          </>
+        ) : undefined
+      }
+    />
+  );
+}

package/corpus/templates/tasks/app/components/shared/PageHeader.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string;
+  description: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className="shrink-0 space-y-1">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="min-w-0 truncate text-2xl font-semibold tracking-tight">
+          {title}
+        </h1>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
+        ) : null}
+      </div>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </header>
+  );
+}

package/corpus/templates/tasks/app/components/shared/RowActionsMenu.tsx

@@ -0,0 +1,42 @@
+import { IconDots } from "@tabler/icons-react";
+import { type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface RowActionsMenuProps {
+  ariaLabel: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export function RowActionsMenu({
+  ariaLabel,
+  disabled = false,
+  children,
+}: RowActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          onClick={(event) => event.stopPropagation()}
+          className="relative z-10 size-8 text-muted-foreground opacity-70 hover:text-foreground"
+        >
+          <IconDots />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" sideOffset={4}>
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/corpus/templates/tasks/app/components/shared/SidePanel.tsx

@@ -0,0 +1,99 @@
+import { IconX } from "@tabler/icons-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const AGENT_SIDEBAR_WIDTH_KEY = "agent-native-sidebar-width";
+const DEFAULT_AGENT_SIDEBAR_WIDTH = 380;
+
+/** Match AgentSidebar width so app-owned panels sit flush on the right edge.
+ *  Uses the same localStorage key the framework writes on resize (280–700px).
+ *  Reads once on mount only — live agent-sidebar drags do not update this hook. */
+function useAgentSidebarWidth() {
+  const [width, setWidth] = useState(DEFAULT_AGENT_SIDEBAR_WIDTH);
+
+  useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(AGENT_SIDEBAR_WIDTH_KEY);
+      if (!saved) return;
+      const parsed = Number.parseInt(saved, 10);
+      if (parsed >= 280 && parsed <= 700) setWidth(parsed);
+    } catch {
+      // Keep the default width if storage is unavailable.
+    }
+  }, []);
+
+  return width;
+}
+
+export function SidePanel({
+  children,
+  className,
+  title,
+  subtitle,
+  closeLabel = "Close panel",
+  onClose,
+}: {
+  children: ReactNode;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  closeLabel?: string;
+  onClose?: () => void;
+}) {
+  const width = useAgentSidebarWidth();
+
+  useEffect(() => {
+    if (!onClose) return;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      onClose?.();
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <aside
+      className={cn(
+        "fixed inset-y-0 right-0 z-[70] flex max-w-[85vw] flex-col overflow-hidden border-l border-border bg-background text-[13px] leading-[1.2] text-foreground antialiased shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none md:shadow-none",
+        className,
+      )}
+      style={{ width }}
+    >
+      {title || onClose ? (
+        <div className="relative z-[240] flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border px-2">
+          <div className="min-w-0 px-1">
+            {title ? (
+              <h2 className="truncate text-[13px] font-semibold leading-tight">
+                {title}
+              </h2>
+            ) : null}
+            {subtitle ? (
+              <p className="mt-0.5 truncate text-[11px] leading-tight text-muted-foreground">
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+          {onClose ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              aria-label={closeLabel}
+              className="size-8"
+            >
+              <IconX className="size-4" />
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {children}
+    </aside>
+  );
+}

package/corpus/templates/tasks/app/components/shared/dnd/ListRowPreview.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+
+/**
+ * Drag overlay wrapper. It renders the real row (passed as children) so the
+ * preview always matches the actual row — no per-list chrome duplication. It
+ * only adds the block-drag count badge and the overlay test hook.
+ */
+interface ListRowPreviewProps {
+  id: string;
+  overlayDataAttribute: string;
+  blockDragCount?: number;
+  children: ReactNode;
+}
+
+export function ListRowPreview({
+  id,
+  overlayDataAttribute,
+  blockDragCount,
+  children,
+}: ListRowPreviewProps) {
+  return (
+    <div
+      {...{ [overlayDataAttribute]: id }}
+      className="relative w-full rounded-lg shadow-lg"
+    >
+      {blockDragCount && blockDragCount > 1 ? (
+        <span
+          aria-hidden="true"
+          className="absolute -right-2 -top-2 z-10 flex size-6 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground shadow-md"
+        >
+          {blockDragCount}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/list/List.tsx

@@ -0,0 +1,63 @@
+import { useMemo, type ReactNode } from "react";
+
+import { SortableList } from "@/components/dnd/SortableList";
+import type {
+  SortableListRenderItemProps,
+  SortableListRenderOverlayProps,
+} from "@/components/dnd/SortableList";
+import type { ListIdentifiable } from "@/components/shared/list/types";
+import type { ListSelection } from "@/components/shared/selection/use-list-selection";
+
+/**
+ * Generic sortable list shell.
+ *
+ * Composers own scroll layout, loading, empty states, and row UI; `List` wires
+ * dnd-kit reordering, listbox ARIA when bulk selection is active, and block-drag
+ * for selected items.
+ */
+export interface ListProps<T extends ListIdentifiable> {
+  items: T[];
+  ariaLabel: string;
+  onReorder: (nextItems: T[]) => void;
+  renderItem: (props: SortableListRenderItemProps<T>) => ReactNode;
+  renderOverlay?: (props: SortableListRenderOverlayProps<T>) => ReactNode;
+  selection?: ListSelection<T>;
+  selectionEnabled?: boolean;
+  listClassName?: string;
+}
+
+export function List<T extends ListIdentifiable>({
+  items,
+  ariaLabel,
+  onReorder,
+  renderItem,
+  renderOverlay,
+  selection,
+  selectionEnabled = true,
+  listClassName,
+}: ListProps<T>) {
+  const selectionActive =
+    selectionEnabled && (selection?.state.selectionMode ?? false);
+  const movingIds = useMemo(() => {
+    if (!selectionEnabled || !selection) return new Set<string>();
+    return new Set(selection.state.selectedItems.map((item) => item.id));
+  }, [selection, selectionEnabled]);
+
+  return (
+    <div
+      role={selectionActive ? "listbox" : "region"}
+      aria-label={ariaLabel}
+      aria-multiselectable={selectionActive ? true : undefined}
+      tabIndex={selectionActive ? 0 : undefined}
+    >
+      <SortableList
+        items={items}
+        movingIds={movingIds}
+        onReorder={onReorder}
+        renderItem={renderItem}
+        renderOverlay={renderOverlay}
+        listClassName={listClassName}
+      />
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/list/ListRow.tsx

@@ -0,0 +1,159 @@
+import {
+  type AnimationEvent,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+import { getSortableDragProps } from "@/components/dnd/sortable-drag-props";
+import type { SortableItemRenderProps } from "@/components/dnd/SortableItem";
+import { SortableListItemShell } from "@/components/shared/list/SortableListItemShell";
+import type { ListIdentifiable } from "@/components/shared/list/types";
+import { getListRowSelectionUi } from "@/components/shared/selection/get-list-row-selection-ui";
+import type { ListSelection } from "@/components/shared/selection/use-list-selection";
+import { cn } from "@/lib/utils";
+
+export type { ListIdentifiable } from "@/components/shared/list/types";
+
+export type ListRowDrag = {
+  dragHandleProps?: HTMLAttributes<HTMLButtonElement>;
+  titleDragProps?: HTMLAttributes<HTMLButtonElement>;
+  isDragging: boolean;
+};
+
+export type ListRowRowSelection = {
+  selectionMode: boolean;
+  selected: boolean;
+  selectRow: (event: MouseEvent<Element>) => void;
+};
+
+export type ListRowRenderArgs = {
+  rowDrag: ListRowDrag;
+  rowSelection: ListRowRowSelection;
+};
+
+export type ListRowDataAttributes = Record<`data-${string}`, string>;
+
+export interface ListRowProps<T extends ListIdentifiable> {
+  sortable: SortableItemRenderProps;
+  item: T;
+  itemLabel: string;
+  selection?: ListSelection<T>;
+  highlighted?: boolean;
+  onActivate?: () => void;
+  onAnimationEnd?: (event: AnimationEvent<HTMLDivElement>) => void;
+  dataAttributes?: ListRowDataAttributes;
+  className?: string;
+  children: (args: ListRowRenderArgs) => ReactNode;
+}
+
+function isInteractiveTarget(
+  target: EventTarget | null,
+  currentTarget: HTMLElement,
+) {
+  const interactive = (target as HTMLElement | null)?.closest(
+    'button, input, textarea, select, a, [role="button"], [data-radix-collection-item]',
+  );
+  return Boolean(interactive && interactive !== currentTarget);
+}
+
+export function ListRow<T extends ListIdentifiable>({
+  sortable,
+  item,
+  itemLabel,
+  selection,
+  highlighted = false,
+  onActivate,
+  onAnimationEnd,
+  dataAttributes,
+  className,
+  children,
+}: ListRowProps<T>) {
+  const selectionMode = selection?.state.selectionMode ?? false;
+  const selected =
+    selection?.state.selectedItems.some((entry) => entry.id === item.id) ??
+    false;
+  const activateEnabled = Boolean(onActivate) && !selectionMode;
+
+  function selectRow(event: MouseEvent<Element>) {
+    selection?.actions.selectRow(item.id, event);
+  }
+
+  const rowDragEnabled = !selectionMode;
+  const { dragHandleProps, rowDragProps, titleDragProps } =
+    getSortableDragProps(sortable.attributes, sortable.listeners);
+  const isDragging = sortable.isDragging;
+  const gatedRowDragProps = rowDragEnabled ? rowDragProps : undefined;
+  const renderArgs: ListRowRenderArgs = {
+    rowDrag: {
+      dragHandleProps,
+      titleDragProps: rowDragEnabled ? titleDragProps : undefined,
+      isDragging,
+    },
+    rowSelection: {
+      selectionMode,
+      selected,
+      selectRow,
+    },
+  };
+
+  const selectionUi = getListRowSelectionUi({
+    selectionMode,
+    selected,
+    itemLabel,
+    onRowSelect: selection ? selectRow : undefined,
+  });
+
+  function handleRowClick(event: MouseEvent<HTMLDivElement>) {
+    selectionUi.onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (
+      activateEnabled &&
+      !isInteractiveTarget(event.target, event.currentTarget)
+    ) {
+      onActivate?.();
+    }
+  }
+
+  function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!activateEnabled || event.defaultPrevented) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onActivate?.();
+  }
+
+  return (
+    <SortableListItemShell
+      setNodeRef={sortable.setNodeRef}
+      style={sortable.style}
+      isDragging={sortable.isDragging}
+      hideForBlockDrag={sortable.hideForBlockDrag}
+    >
+      <div
+        {...dataAttributes}
+        {...gatedRowDragProps}
+        role={activateEnabled ? "button" : selectionUi.role}
+        tabIndex={activateEnabled ? 0 : undefined}
+        aria-selected={selectionUi["aria-selected"]}
+        aria-label={selectionUi["aria-label"]}
+        onClick={handleRowClick}
+        onKeyDown={handleRowKeyDown}
+        onAnimationEnd={onAnimationEnd}
+        className={cn(
+          "group flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2",
+          gatedRowDragProps && "cursor-pointer",
+          selectionUi.className,
+          highlighted &&
+            !selectionMode &&
+            "border-ring shadow-[inset_0_0_0_2px_hsl(var(--ring))]",
+          isDragging && "shadow-md ring-1 ring-border",
+          className,
+        )}
+        data-list-row-id={item.id}
+      >
+        {children(renderArgs)}
+      </div>
+    </SortableListItemShell>
+  );
+}