@agent-native/core 0.101.13 → 0.102.0

package/corpus/templates/tasks/app/components/inbox/InboxList.tsx

@@ -0,0 +1,222 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { INERT_SORTABLE_PROPS } from "@/components/dnd/SortableItem";
+import { InboxListRow } from "@/components/inbox/InboxListRow";
+import { AddListItemInput } from "@/components/shared/AddListItemInput";
+import { BulkDeleteDialog } from "@/components/shared/BulkDeleteDialog";
+import { DeleteItemDialog } from "@/components/shared/DeleteItemDialog";
+import { ListRowPreview } from "@/components/shared/dnd/ListRowPreview";
+import { List } from "@/components/shared/list/List";
+import { ListSkeletonRows } from "@/components/shared/list/ListSkeletonRows";
+import { ListEmptyState } from "@/components/shared/ListEmptyState";
+import { ListViewHeader } from "@/components/shared/ListViewHeader";
+import { ListSelectionBar } from "@/components/shared/selection/ListSelectionBar";
+import { useListSelection } from "@/components/shared/selection/use-list-selection";
+import {
+  useBulkDeleteInboxItems,
+  useCreateInboxItem,
+  useDeleteInboxItem,
+  useMarkInboxItemReady,
+  useReorderInboxItems,
+  useUpdateInboxItem,
+} from "@/hooks/use-inbox-items";
+import type { InboxItem } from "@/hooks/use-inbox-items";
+
+interface InboxListProps {
+  serverItems: InboxItem[];
+  isPending: boolean;
+  selectedInboxItemId: string | null;
+}
+
+export function InboxList({
+  serverItems,
+  isPending,
+  selectedInboxItemId,
+}: InboxListProps) {
+  const createInboxItem = useCreateInboxItem();
+  const updateInboxItem = useUpdateInboxItem();
+  const deleteInboxItem = useDeleteInboxItem();
+  const markInboxItemReady = useMarkInboxItemReady();
+  const reorderInboxItems = useReorderInboxItems();
+  const bulkDeleteInboxItems = useBulkDeleteInboxItems();
+  const [items, setItems] = useState<InboxItem[]>(serverItems);
+  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+  const selection = useListSelection(items, "inboxSelection");
+  const selectionActive = selection.state.selectionMode;
+  const toolbarBusy =
+    createInboxItem.isPending ||
+    updateInboxItem.isPending ||
+    deleteInboxItem.isPending ||
+    markInboxItemReady.isPending;
+
+  useEffect(() => {
+    setItems(serverItems);
+  }, [serverItems]);
+
+  const pendingDeleteItem = pendingDeleteId
+    ? items.find((item) => item.id === pendingDeleteId)
+    : null;
+
+  function handleReorder(nextItems: InboxItem[]) {
+    setItems(nextItems);
+    reorderInboxItems.mutate(
+      { inboxItemIds: nextItems.map((item) => item.id) },
+      { onError: () => setItems(serverItems) },
+    );
+  }
+
+  async function handleBulkDelete(ids: string[]) {
+    await bulkDeleteInboxItems.mutateAsync({ inboxItemIds: ids });
+  }
+
+  async function confirmBulkDelete() {
+    const ids = selection.state.selectedItems.map((item) => item.id);
+    if (ids.length === 0) return;
+
+    try {
+      await handleBulkDelete(ids);
+      toast.success(
+        `Deleted ${ids.length} ${ids.length === 1 ? "inbox item" : "inbox items"}`,
+      );
+      selection.actions.clearSelection();
+      setBulkDeleteOpen(false);
+    } catch {
+      toast.error("Could not delete selected inbox items.");
+    }
+  }
+
+  return (
+    <>
+      <ListViewHeader
+        title="Inbox"
+        description="Capture rough ideas here, then mark ready when they become tasks."
+        isPending={isPending}
+        showSelectToggle={items.length > 0}
+        selection={selection}
+        toolbarBusy={toolbarBusy}
+      />
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <div className="shrink-0">
+          {selectionActive ? (
+            <ListSelectionBar
+              promotedToTask={false}
+              items={items}
+              selection={selection}
+              toolbarBusy={toolbarBusy}
+              onOpenBulkDelete={() => setBulkDeleteOpen(true)}
+            />
+          ) : (
+            <AddListItemInput
+              disabled={createInboxItem.isPending}
+              onCreate={(title) => createInboxItem.mutateAsync({ title })}
+              placeholder="Add to inbox..."
+              buttonLabel="Add item"
+              inputAriaLabel="New inbox item title"
+              errorMessage="Failed to add inbox item. Please try again."
+            />
+          )}
+        </div>
+
+        {isPending ? (
+          <div
+            aria-label="Inbox list"
+            className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
+          >
+            <ListSkeletonRows />
+          </div>
+        ) : items.length === 0 ? (
+          <div
+            aria-label="Inbox list"
+            className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
+          >
+            <ListEmptyState
+              heading="Inbox is empty"
+              description="Add an item above or ask chat to capture something for triage."
+            />
+          </div>
+        ) : (
+          <div className="mt-2 min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none">
+            <List
+              items={items}
+              selection={selection}
+              ariaLabel="Inbox list"
+              listClassName="flex flex-col gap-3 pb-6"
+              onReorder={handleReorder}
+              renderItem={({ item, sortable }) => (
+                <InboxListRow
+                  sortable={sortable}
+                  selection={selection}
+                  item={item}
+                  highlighted={selectedInboxItemId === item.id}
+                  onUpdateTitle={(title) =>
+                    updateInboxItem.mutateAsync({ inboxItemId: item.id, title })
+                  }
+                  onMarkReady={() =>
+                    markInboxItemReady.mutateAsync({ inboxItemId: item.id })
+                  }
+                  onRequestDelete={() => setPendingDeleteId(item.id)}
+                />
+              )}
+              renderOverlay={({ item, blockDragCount }) => (
+                <ListRowPreview
+                  id={item.id}
+                  overlayDataAttribute="data-dnd-overlay-inbox-item-id"
+                  blockDragCount={blockDragCount}
+                >
+                  <InboxListRow
+                    sortable={INERT_SORTABLE_PROPS}
+                    selection={selection}
+                    item={item}
+                    highlighted={selectedInboxItemId === item.id}
+                    onUpdateTitle={(title) =>
+                      updateInboxItem.mutateAsync({
+                        inboxItemId: item.id,
+                        title,
+                      })
+                    }
+                    onMarkReady={() =>
+                      markInboxItemReady.mutateAsync({ inboxItemId: item.id })
+                    }
+                    onRequestDelete={() => setPendingDeleteId(item.id)}
+                  />
+                </ListRowPreview>
+              )}
+            />
+          </div>
+        )}
+
+        {!selectionActive ? (
+          <DeleteItemDialog
+            open={pendingDeleteItem !== null}
+            onOpenChange={(open) => {
+              if (!open) setPendingDeleteId(null);
+            }}
+            entityLabel="inbox item"
+            itemTitle={pendingDeleteItem?.title ?? null}
+            pending={deleteInboxItem.isPending}
+            onConfirm={async () => {
+              if (!pendingDeleteId) return;
+              await deleteInboxItem.mutateAsync({
+                inboxItemId: pendingDeleteId,
+              });
+              setPendingDeleteId(null);
+            }}
+          />
+        ) : null}
+
+        <BulkDeleteDialog
+          open={bulkDeleteOpen}
+          onOpenChange={setBulkDeleteOpen}
+          selectedItems={selection.state.selectedItems}
+          entitySingular="inbox item"
+          entityPlural="inbox items"
+          pending={bulkDeleteInboxItems.isPending}
+          onConfirm={() => void confirmBulkDelete()}
+        />
+      </div>
+    </>
+  );
+}

package/corpus/templates/tasks/app/components/inbox/InboxListPage.tsx

@@ -0,0 +1,39 @@
+import { useSearchParams } from "react-router";
+
+import { InboxList } from "@/components/inbox/InboxList";
+import { ListErrorMessage } from "@/components/shared/ListErrorMessage";
+import { ListViewHeader } from "@/components/shared/ListViewHeader";
+import { useInboxItems } from "@/hooks/use-inbox-items";
+
+export function InboxListPage() {
+  const [searchParams] = useSearchParams();
+  const selectedInboxItemId = searchParams.get("inboxItem");
+  const { items: serverItems, isPending, isError, error } = useInboxItems();
+
+  return (
+    <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 overflow-hidden p-4 md:p-6">
+      {isError ? (
+        <>
+          <ListViewHeader
+            title="Inbox"
+            description="Capture rough ideas here, then mark ready when they become tasks."
+            isPending={false}
+            showSelectToggle={false}
+            selection={null}
+            toolbarBusy={false}
+          />
+          <ListErrorMessage
+            error={error}
+            fallbackMessage="Failed to load inbox items."
+          />
+        </>
+      ) : (
+        <InboxList
+          serverItems={serverItems}
+          isPending={isPending}
+          selectedInboxItemId={selectedInboxItemId}
+        />
+      )}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/inbox/InboxListRow.tsx

@@ -0,0 +1,122 @@
+import { IconChecks, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+
+import type { SortableItemRenderProps } from "@/components/dnd/SortableItem";
+import {
+  InlineEditable,
+  LIST_ROW_TITLE_FIELD_CLASS,
+} from "@/components/shared/InlineEditable";
+import { ListRow } from "@/components/shared/list/ListRow";
+import { ListRowDragHandle } from "@/components/shared/list/ListRowDragHandle";
+import { RowActionsMenu } from "@/components/shared/RowActionsMenu";
+import type { ListSelection } from "@/components/shared/selection/use-list-selection";
+import { Button } from "@/components/ui/button";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+export interface InboxListRowProps {
+  sortable: SortableItemRenderProps;
+  selection: ListSelection<{ id: string }>;
+  item: { id: string; title: string };
+  highlighted?: boolean;
+  onUpdateTitle: (title: string) => Promise<unknown>;
+  onRequestDelete: () => void;
+  onMarkReady: () => Promise<unknown>;
+}
+
+export function InboxListRow({
+  sortable,
+  selection,
+  item,
+  highlighted = false,
+  onUpdateTitle,
+  onRequestDelete,
+  onMarkReady,
+}: InboxListRowProps) {
+  const [displayTitle, setDisplayTitle] = useState(item.title);
+  const [markReadyPending, setMarkReadyPending] = useState(false);
+  const busy = markReadyPending;
+
+  async function handleMarkReady() {
+    setMarkReadyPending(true);
+    try {
+      await onMarkReady();
+    } catch {
+      setMarkReadyPending(false);
+    }
+  }
+
+  return (
+    <ListRow
+      sortable={sortable}
+      item={item}
+      itemLabel={displayTitle}
+      selection={selection}
+      highlighted={highlighted}
+      dataAttributes={{ "data-inbox-item-id": item.id }}
+    >
+      {({ rowDrag, rowSelection }) => (
+        <>
+          <ListRowDragHandle
+            rowDrag={rowDrag}
+            rowSelection={rowSelection}
+            displayTitle={displayTitle}
+            disabled={busy}
+          />
+
+          <div className="min-w-0 flex-1">
+            {rowSelection.selectionMode ? (
+              <div
+                className={cn(
+                  LIST_ROW_TITLE_FIELD_CLASS,
+                  "flex items-center truncate border-transparent bg-transparent text-left",
+                )}
+              >
+                {displayTitle}
+              </div>
+            ) : (
+              <InlineEditable
+                value={item.title}
+                onSave={onUpdateTitle}
+                onDisplayTitleChange={setDisplayTitle}
+                ariaLabel="Edit title"
+                disabled={busy}
+                titleDragProps={rowDrag.titleDragProps}
+              />
+            )}
+          </div>
+
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            disabled={busy || rowSelection.selectionMode}
+            onClick={() => void handleMarkReady()}
+          >
+            Mark ready
+          </Button>
+
+          <RowActionsMenu
+            ariaLabel={`Actions for ${displayTitle}`}
+            disabled={busy || rowSelection.selectionMode}
+          >
+            <DropdownMenuItem
+              className="gap-2"
+              onSelect={() => selection.actions.startSelection(item.id)}
+            >
+              <IconChecks className="size-4" />
+              Select
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="gap-2 text-destructive focus:bg-destructive focus:text-destructive-foreground"
+              onSelect={onRequestDelete}
+            >
+              <IconTrash className="size-4" />
+              Delete
+            </DropdownMenuItem>
+          </RowActionsMenu>
+        </>
+      )}
+    </ListRow>
+  );
+}

package/corpus/templates/tasks/app/components/layout/Header.tsx

@@ -0,0 +1,55 @@
+import { AgentToggleButton } from "@agent-native/core/client";
+import { IconMenu2 } from "@tabler/icons-react";
+import { useLocation } from "react-router";
+
+import { APP_TITLE } from "@/lib/app-config";
+
+import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
+
+const pageTitles: Record<string, string> = {
+  "/tasks": "Tasks",
+  "/settings": "Settings",
+  "/team": "Team",
+};
+
+function resolveTitle(pathname: string): string {
+  if (pageTitles[pathname]) return pageTitles[pathname];
+  if (pathname.startsWith("/extensions")) return "Extensions";
+  return APP_TITLE;
+}
+
+interface HeaderProps {
+  onOpenMobileSidebar?: () => void;
+}
+
+export function Header({ onOpenMobileSidebar }: HeaderProps) {
+  const location = useLocation();
+  const title = useHeaderTitle();
+  const actions = useHeaderActions();
+
+  return (
+    <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
+      {onOpenMobileSidebar && (
+        <button
+          type="button"
+          onClick={onOpenMobileSidebar}
+          aria-label="Open navigation"
+          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
+        >
+          <IconMenu2 className="h-4 w-4" />
+        </button>
+      )}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {title ?? (
+          <h1 className="text-lg font-semibold tracking-tight truncate">
+            {resolveTitle(location.pathname)}
+          </h1>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        <AgentToggleButton />
+      </div>
+    </header>
+  );
+}

package/corpus/templates/tasks/app/components/layout/HeaderActions.tsx

@@ -0,0 +1,84 @@
+import {
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+  type FC,
+} from "react";
+
+/**
+ * External store for the page's header title + actions. We use an external
+ * store (not React context) so that pages can inject ReactNode without
+ * subscribing to the header state themselves — subscribing would trigger a
+ * re-render on every update, which in turn creates new JSX, which updates
+ * the store again, which re-renders… an infinite loop.
+ *
+ * Only <Header /> reads the store via useSyncExternalStore; pages only write.
+ */
+
+type Listener = () => void;
+
+let currentTitle: ReactNode = null;
+let currentActions: ReactNode = null;
+const listeners = new Set<Listener>();
+
+function notify() {
+  for (const l of listeners) l();
+}
+
+function subscribe(l: Listener): () => void {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+}
+
+/** Consumed only by <Header /> — returns the current title. */
+export function useHeaderTitle(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentTitle,
+    () => currentTitle,
+  );
+}
+
+/** Consumed only by <Header /> — returns the current actions slot. */
+export function useHeaderActions(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentActions,
+    () => currentActions,
+  );
+}
+
+/**
+ * Provider is now a no-op wrapper for backwards compatibility — the state
+ * lives in the module-level store above. Kept as a component so callers of
+ * <HeaderActionsProvider> don't need to change.
+ */
+export const HeaderActionsProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+/** Mount a custom title into the app header. Cleans up on unmount. */
+export function useSetPageTitle(node: ReactNode) {
+  useEffect(() => {
+    currentTitle = node;
+    notify();
+    return () => {
+      currentTitle = null;
+      notify();
+    };
+  });
+}
+
+/** Mount ReactNode into the header's actions slot. Cleans up on unmount. */
+export function useSetHeaderActions(node: ReactNode) {
+  useEffect(() => {
+    currentActions = node;
+    notify();
+    return () => {
+      currentActions = null;
+      notify();
+    };
+  });
+}

package/corpus/templates/tasks/app/components/layout/Layout.tsx

@@ -0,0 +1,134 @@
+import {
+  AgentSidebar,
+  focusAgentChat,
+  useAgentChatHomeHandoff,
+} from "@agent-native/core/client";
+import { IconMenu2 } from "@tabler/icons-react";
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { TAB_ID } from "@/lib/tab-id";
+
+import { Header } from "./Header";
+import { HeaderActionsProvider } from "./HeaderActions";
+import { Sidebar } from "./Sidebar";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const SIDEBAR_COLLAPSE_KEY = "tasks.sidebar.collapsed";
+
+/**
+ * Routes whose page renders its own toolbar. Layout still wraps these with the
+ * left Sidebar and agent surfaces but skips the global Header so they don't
+ * double-stack chrome.
+ */
+function routeOwnsToolbar(pathname: string): boolean {
+  return pathname === "/tasks" || pathname.startsWith("/extensions");
+}
+
+export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const chatHomeHandoffActive = useAgentChatHomeHandoff({
+    storageKey: "chat",
+    activePath: location.pathname,
+    enabled: true,
+  });
+
+  useEffect(() => {
+    setMobileSidebarOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY);
+      if (stored !== null) setSidebarCollapsed(stored === "1");
+    } catch {
+      // Ignore storage access errors; the default collapsed state still works.
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(
+        SIDEBAR_COLLAPSE_KEY,
+        sidebarCollapsed ? "1" : "0",
+      );
+    } catch {
+      // Ignore storage access errors.
+    }
+  }, [sidebarCollapsed]);
+
+  const ownsToolbar = routeOwnsToolbar(location.pathname);
+
+  const contentFrame = (
+    <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
+      {ownsToolbar ? (
+        <div className="flex h-12 shrink-0 items-center border-b border-border px-4 md:hidden">
+          <button
+            type="button"
+            onClick={() => setMobileSidebarOpen(true)}
+            aria-label="Open navigation"
+            className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <IconMenu2 className="h-4 w-4" />
+          </button>
+        </div>
+      ) : (
+        <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
+      )}
+      <main className="min-w-0 flex-1 overflow-y-auto overscroll-contain">
+        {children}
+      </main>
+    </div>
+  );
+
+  return (
+    <HeaderActionsProvider>
+      <div className="flex h-screen w-full overflow-hidden bg-background text-foreground">
+        <div className="hidden md:block">
+          <Sidebar
+            collapsed={sidebarCollapsed}
+            onCollapsedChange={setSidebarCollapsed}
+          />
+        </div>
+        <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
+          <SheetContent side="left" className="p-0 w-[260px]">
+            <SheetTitle className="sr-only">Navigation</SheetTitle>
+            <SheetDescription className="sr-only">
+              App navigation links
+            </SheetDescription>
+            <Sidebar collapsed={false} collapsible={false} />
+          </SheetContent>
+        </Sheet>
+        <AgentSidebar
+          position="right"
+          chatViewTransition
+          storageKey="chat"
+          browserTabId={TAB_ID}
+          openOnChatRunning={chatHomeHandoffActive}
+          onFullscreenRequest={() => focusAgentChat()}
+          emptyStateText="Ask the agent to inspect or change this app."
+          dynamicSuggestions={false}
+          suggestions={[
+            "Check my calendar and mails - any tasks for today?",
+            "Prioritise my tasks",
+            "I need to clean my house, create a list of tasks for it",
+          ]}
+        >
+          {contentFrame}
+        </AgentSidebar>
+      </div>
+    </HeaderActionsProvider>
+  );
+}