@nextclaw/ui 0.15.19 → 0.15.21

package/src/features/inbox/managers/inbox.manager.ts

@@ -0,0 +1,178 @@
+import type { QueryClient } from "@tanstack/react-query";
+import type {
+  InboxDelivery,
+  InboxDeliveryListView,
+  InboxDeliveryStateAction,
+} from "@nextclaw/shared";
+import { eventKeys } from "@nextclaw/shared";
+import { appQueryClient } from "@/app-query-client";
+import { useInboxStore } from "@/features/inbox/stores/inbox.store";
+import { nextclawClient } from "@/shared/lib/api";
+
+export const INBOX_DELIVERIES_QUERY_KEY = ["inbox-deliveries"] as const;
+
+function buildListView(deliveries: InboxDelivery[]): InboxDeliveryListView {
+  return {
+    deliveries,
+    total: deliveries.length,
+    unreadCount: deliveries.filter((delivery) => !delivery.readAt && !delivery.archivedAt).length,
+    unpresentedCount: deliveries.filter((delivery) =>
+      !delivery.presentedAt && !delivery.readAt && !delivery.archivedAt
+    ).length,
+  };
+}
+
+export class InboxManager {
+  private readonly cleanups: Array<() => void> = [];
+  private offerPromise: Promise<void> | null = null;
+  private started = false;
+
+  constructor(private readonly queryClient: QueryClient = appQueryClient) {}
+
+  start = (): void => {
+    if (this.started) {
+      return;
+    }
+    this.started = true;
+    this.cleanups.push(
+      nextclawClient.eventBus.on(
+        eventKeys.inboxDeliveryChanged,
+        this.handleDeliveryChanged,
+      ),
+    );
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", this.handleVisibilityChange);
+      this.cleanups.push(() =>
+        document.removeEventListener("visibilitychange", this.handleVisibilityChange)
+      );
+    }
+    this.offerPendingDelivery();
+  };
+
+  stop = (): void => {
+    if (!this.started) {
+      return;
+    }
+    this.started = false;
+    while (this.cleanups.length > 0) {
+      this.cleanups.pop()?.();
+    }
+  };
+
+  closeReader = (): void => {
+    useInboxStore.getState().setSnapshot({ readerOpen: false });
+  };
+
+  selectInReader = async (deliveryId: string): Promise<InboxDelivery> => {
+    const delivery = await this.updateState(deliveryId, "present");
+    useInboxStore.getState().setSnapshot({
+      activeDeliveryId: delivery.id,
+      readerOpen: true,
+    });
+    return delivery;
+  };
+
+  markRead = async (deliveryId: string): Promise<InboxDelivery> =>
+    await this.updateState(deliveryId, "read");
+
+  markUnread = async (deliveryId: string): Promise<InboxDelivery> =>
+    await this.updateState(deliveryId, "mark_unread");
+
+  archive = async (deliveryId: string): Promise<InboxDelivery> =>
+    await this.updateState(deliveryId, "archive");
+
+  restore = async (deliveryId: string): Promise<InboxDelivery> =>
+    await this.updateState(deliveryId, "restore");
+
+  delete = async (deliveryId: string): Promise<boolean> => {
+    const deleted = await nextclawClient.inboxDeliveries.delete(deliveryId);
+    if (deleted) {
+      this.queryClient.setQueryData<InboxDeliveryListView>(
+        INBOX_DELIVERIES_QUERY_KEY,
+        (current) => current
+          ? buildListView(current.deliveries.filter(({ id }) => id !== deliveryId))
+          : current,
+      );
+      const { snapshot } = useInboxStore.getState();
+      if (snapshot.activeDeliveryId === deliveryId) {
+        useInboxStore.getState().setSnapshot({
+          activeDeliveryId: null,
+          readerOpen: false,
+        });
+      }
+    }
+    return deleted;
+  };
+
+  continueInChat = async (deliveryId: string) => {
+    const result = await nextclawClient.inboxDeliveries.continueInChat(deliveryId);
+    this.replaceCachedDelivery(result.delivery);
+    this.closeReader();
+    return result;
+  };
+
+  private updateState = async (
+    deliveryId: string,
+    action: InboxDeliveryStateAction,
+  ): Promise<InboxDelivery> => {
+    const delivery = await nextclawClient.inboxDeliveries.updateState(deliveryId, action);
+    this.replaceCachedDelivery(delivery);
+    return delivery;
+  };
+
+  private replaceCachedDelivery = (delivery: InboxDelivery): void => {
+    this.queryClient.setQueryData<InboxDeliveryListView>(
+      INBOX_DELIVERIES_QUERY_KEY,
+      (current) => {
+        if (!current) {
+          return current;
+        }
+        const deliveries = current.deliveries.some(({ id }) => id === delivery.id)
+          ? current.deliveries.map((item) => item.id === delivery.id ? delivery : item)
+          : [delivery, ...current.deliveries];
+        return buildListView(deliveries);
+      },
+    );
+  };
+
+  private handleDeliveryChanged = (): void => {
+    void this.queryClient.invalidateQueries({ queryKey: INBOX_DELIVERIES_QUERY_KEY });
+    this.offerPendingDelivery();
+  };
+
+  private handleVisibilityChange = (): void => {
+    if (document.visibilityState === "visible") {
+      this.offerPendingDelivery();
+    }
+  };
+
+  private offerPendingDelivery = (): void => {
+    if (this.offerPromise || !this.isVisible() || useInboxStore.getState().snapshot.readerOpen) {
+      return;
+    }
+    this.offerPromise = this.openOldestPendingDelivery()
+      .catch(() => undefined)
+      .finally(() => {
+        this.offerPromise = null;
+      });
+  };
+
+  private openOldestPendingDelivery = async (): Promise<void> => {
+    const view = await this.queryClient.fetchQuery({
+      queryKey: INBOX_DELIVERIES_QUERY_KEY,
+      queryFn: () => nextclawClient.inboxDeliveries.list(),
+      staleTime: 0,
+    });
+    const pending = view.deliveries.filter((delivery) =>
+      !delivery.presentedAt && !delivery.readAt && !delivery.archivedAt
+    );
+    const delivery = pending[pending.length - 1];
+    if (!delivery || !this.isVisible() || useInboxStore.getState().snapshot.readerOpen) {
+      return;
+    }
+    await this.selectInReader(delivery.id);
+  };
+
+  private isVisible = (): boolean =>
+    typeof document === "undefined" || document.visibilityState === "visible";
+}

package/src/features/inbox/pages/inbox-page.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { resolveInboxFilter } from "@/features/inbox/pages/inbox-page";
+
+const readDelivery = {
+  archivedAt: null,
+  readAt: "2026-08-06T08:30:00.000Z",
+};
+const unreadDelivery = {
+  archivedAt: null,
+  readAt: null,
+};
+
+describe("resolveInboxFilter", () => {
+  it("defaults to all when there is no unread delivery", () => {
+    expect(resolveInboxFilter([], null)).toBe("all");
+    expect(resolveInboxFilter([readDelivery], null)).toBe("all");
+    expect(resolveInboxFilter([{ ...unreadDelivery, archivedAt: readDelivery.readAt }], null))
+      .toBe("all");
+  });
+
+  it("defaults to unread when actionable unread deliveries exist", () => {
+    expect(resolveInboxFilter([readDelivery, unreadDelivery], null)).toBe("unread");
+  });
+
+  it("preserves the user's explicit filter", () => {
+    expect(resolveInboxFilter([unreadDelivery], "archived")).toBe("archived");
+  });
+});

package/src/features/inbox/pages/inbox-page.tsx

@@ -0,0 +1,385 @@
+import { useEffect, useMemo, useState } from "react";
+import type { InboxDelivery } from "@nextclaw/shared";
+import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
+import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
+import { Button } from "@/shared/components/ui/button";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type InboxFilter = "unread" | "all" | "archived";
+
+export function resolveInboxFilter(
+  deliveries: readonly Pick<InboxDelivery, "archivedAt" | "readAt">[],
+  selectedFilter: InboxFilter | null,
+): InboxFilter {
+  if (selectedFilter) {
+    return selectedFilter;
+  }
+  return deliveries.some((delivery) => !delivery.readAt && !delivery.archivedAt)
+    ? "unread"
+    : "all";
+}
+
+function filterDeliveries(deliveries: InboxDelivery[], filter: InboxFilter): InboxDelivery[] {
+  if (filter === "unread") {
+    return deliveries.filter((delivery) => !delivery.readAt && !delivery.archivedAt);
+  }
+  if (filter === "archived") {
+    return deliveries.filter((delivery) => Boolean(delivery.archivedAt));
+  }
+  return deliveries.filter((delivery) => !delivery.archivedAt);
+}
+
+function InboxEmptyState({ selection = false }: { selection?: boolean }) {
+  return (
+    <div className="flex h-full min-h-56 flex-col items-center justify-center px-8 text-center">
+      <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+        <Inbox className="h-5 w-5" />
+      </span>
+      <h2 className="text-base font-semibold text-foreground">
+        {t(selection ? "inboxSelectTitle" : "inboxEmptyTitle")}
+      </h2>
+      <p className="mt-2 max-w-sm text-sm leading-6 text-muted-foreground">
+        {t(selection ? "inboxSelectDescription" : "inboxEmptyDescription")}
+      </p>
+    </div>
+  );
+}
+
+function InboxPageHeader({ unreadCount }: { unreadCount: number }) {
+  return (
+    <header className="shrink-0 px-4 pb-4 pt-1 sm:px-0">
+      <div className="flex items-end justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
+            {t("inboxTitle")}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">{t("inboxDescription")}</p>
+        </div>
+        {unreadCount > 0 ? (
+          <span className="shrink-0 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
+            {t("inboxUnreadCount").replace("{count}", String(unreadCount))}
+          </span>
+        ) : null}
+      </div>
+    </header>
+  );
+}
+
+function InboxListPane({
+  activeDeliveryId,
+  deliveries,
+  filter,
+  onFilterChange,
+}: {
+  activeDeliveryId: string | null;
+  deliveries: InboxDelivery[];
+  filter: InboxFilter;
+  onFilterChange: (filter: InboxFilter) => void;
+}) {
+  const filterItems: Array<{ id: InboxFilter; label: string }> = [
+    { id: "unread", label: t("inboxUnread") },
+    { id: "all", label: t("inboxAll") },
+    { id: "archived", label: t("inboxArchived") },
+  ];
+  const filteredDeliveries = filterDeliveries(deliveries, filter);
+  return (
+    <aside className="flex min-h-0 flex-col border-border/60 md:border-r">
+      <div className="flex shrink-0 gap-1 border-b border-border/60 p-3">
+        {filterItems.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => onFilterChange(item.id)}
+            className={cn(
+              "rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              filter === item.id
+                ? "bg-foreground text-background"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
+        {filteredDeliveries.length > 0 ? (
+          <ul className="space-y-1">
+            {filteredDeliveries.map((delivery) => (
+              <li key={delivery.id}>
+                <Link
+                  to={`/inbox/${encodeURIComponent(delivery.id)}`}
+                  className={cn(
+                    "block rounded-xl px-3 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    activeDeliveryId === delivery.id ? "bg-muted" : "hover:bg-muted/70",
+                  )}
+                >
+                  <div className="flex items-start gap-2">
+                    <span
+                      className={cn(
+                        "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+                        !delivery.readAt && "bg-primary",
+                      )}
+                      aria-label={!delivery.readAt ? t("inboxUnread") : undefined}
+                      aria-hidden={delivery.readAt ? "true" : undefined}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <h2 className={cn(
+                        "line-clamp-2 text-sm leading-5 text-foreground",
+                        !delivery.readAt && "font-semibold",
+                      )}>
+                        {delivery.title}
+                      </h2>
+                      <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
+                        {delivery.summary ?? t("inboxNoSummary")}
+                      </p>
+                      <time
+                        className="mt-2 block text-[11px] text-muted-foreground/80"
+                        dateTime={delivery.createdAt}
+                      >
+                        {formatDateTime(delivery.createdAt)}
+                      </time>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : <InboxEmptyState />}
+      </div>
+    </aside>
+  );
+}
+
+function InboxDetailPane({
+  delivery,
+  error,
+  isMobile,
+  pending,
+  onArchiveToggle,
+  onBack,
+  onContinue,
+  onDelete,
+  onReadToggle,
+}: {
+  delivery: InboxDelivery | null;
+  error: string | null;
+  isMobile: boolean;
+  pending: boolean;
+  onArchiveToggle: () => void;
+  onBack: () => void;
+  onContinue: () => void;
+  onDelete: () => void;
+  onReadToggle: () => void;
+}) {
+  if (!delivery) {
+    return <main className="flex min-h-0 flex-col"><InboxEmptyState selection /></main>;
+  }
+  const isHtml = delivery.contentType === "html";
+  return (
+    <main className="flex min-h-0 flex-col">
+      <div className={cn(
+        "shrink-0 border-b border-border/60 px-5 sm:px-8",
+        isHtml ? "py-3 sm:py-4" : "py-4 sm:py-6",
+      )}>
+        {isMobile ? (
+          <button
+            type="button"
+            onClick={onBack}
+            className="mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            {t("inboxTitle")}
+          </button>
+        ) : null}
+        <div className="text-xs text-muted-foreground">
+          {t("inboxDeliveredBy")} · {formatDateTime(delivery.createdAt)}
+        </div>
+        <h2 className={cn(
+          "text-balance font-semibold leading-tight tracking-[-0.02em] text-foreground",
+          isHtml ? "mt-2 text-lg sm:text-xl" : "mt-3 text-2xl",
+        )}>
+          {delivery.title}
+        </h2>
+        {delivery.summary && !isHtml ? (
+          <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
+            {delivery.summary}
+          </p>
+        ) : null}
+      </div>
+      <div className={cn(
+        "min-h-0 flex-1",
+        isHtml
+          ? "p-4 sm:p-5"
+          : "custom-scrollbar overflow-y-auto px-5 py-6 sm:px-8 sm:py-8",
+      )}>
+        <div className={cn("mx-auto", isHtml ? "h-full max-w-5xl" : "max-w-3xl")}>
+          <InboxDeliveryContent
+            className={isHtml ? "h-full" : undefined}
+            content={delivery.content}
+            contentType={delivery.contentType}
+            fillHeight={isHtml}
+            title={delivery.title}
+          />
+        </div>
+      </div>
+      <div className="shrink-0 border-t border-border/60 px-5 py-3 sm:px-8">
+        {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
+        <div className="flex flex-wrap items-center gap-2">
+          <Button disabled={pending} onClick={onContinue}>
+            <MessageCircle className="mr-2 h-4 w-4" />
+            {t("inboxContinueChat")}
+          </Button>
+          <Button variant="outline" disabled={pending} onClick={onReadToggle}>
+            {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
+          </Button>
+          <Button variant="ghost" disabled={pending} onClick={onArchiveToggle}>
+            {delivery.archivedAt
+              ? <RotateCcw className="mr-2 h-4 w-4" />
+              : <Archive className="mr-2 h-4 w-4" />}
+            {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
+          </Button>
+          <Button variant="ghost" disabled={pending} onClick={onDelete}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            {t("inboxDelete")}
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export function InboxPage() {
+  const navigate = useNavigate();
+  const { deliveryId } = useParams<{ deliveryId?: string }>();
+  const { isMobile } = useViewportLayout();
+  const { inboxManager } = useAppPresenter();
+  const deliveriesQuery = useInboxDeliveries();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const [selectedFilter, setSelectedFilter] = useState<InboxFilter | null>(null);
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const deliveries = useMemo(
+    () => deliveriesQuery.data?.deliveries ?? [],
+    [deliveriesQuery.data?.deliveries],
+  );
+  const activeDelivery = useMemo(
+    () => deliveryId
+      ? deliveries.find(({ id }) => id === deliveryId) ?? null
+      : null,
+    [deliveries, deliveryId],
+  );
+  const filter = resolveInboxFilter(deliveries, selectedFilter);
+
+  useEffect(() => {
+    if (activeDelivery && !activeDelivery.readAt) {
+      void inboxManager.markRead(activeDelivery.id).catch(() => setError(t("inboxActionError")));
+    }
+  }, [activeDelivery, inboxManager]);
+
+  const runAction = async (name: string, action: () => Promise<void>) => {
+    setPendingAction(name);
+    setError(null);
+    try {
+      await action();
+    } catch {
+      setError(t("inboxActionError"));
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const continueInChat = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("continue", async () => {
+      const result = await inboxManager.continueInChat(activeDelivery.id);
+      navigate(`/chat/${encodeURIComponent(result.sessionId)}`);
+    });
+  };
+
+  const deleteDelivery = async () => {
+    if (!activeDelivery || !await confirm({
+      title: t("inboxDeleteTitle"),
+      description: t("inboxDeleteDescription"),
+      confirmLabel: t("inboxDeleteConfirm"),
+      variant: "destructive",
+    })) {
+      return;
+    }
+    void runAction("delete", async () => {
+      await inboxManager.delete(activeDelivery.id);
+      navigate("/inbox", { replace: true });
+    });
+  };
+
+  const toggleRead = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("read", async () => {
+      if (activeDelivery.readAt) {
+        await inboxManager.markUnread(activeDelivery.id);
+        navigate("/inbox", { replace: true });
+        return;
+      }
+      await inboxManager.markRead(activeDelivery.id);
+    });
+  };
+
+  const toggleArchive = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("archive", async () => {
+      if (activeDelivery.archivedAt) {
+        await inboxManager.restore(activeDelivery.id);
+        return;
+      }
+      await inboxManager.archive(activeDelivery.id);
+      navigate("/inbox", { replace: true });
+    });
+  };
+
+  const showList = !isMobile || !activeDelivery;
+  const showDetail = !isMobile || Boolean(activeDelivery);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <InboxPageHeader unreadCount={deliveriesQuery.data?.unreadCount ?? 0} />
+
+      <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
+        {deliveriesQuery.isError ? (
+          <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
+        ) : (
+          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[320px_minmax(0,1fr)]">
+            {showList ? <InboxListPane
+              activeDeliveryId={activeDelivery?.id ?? null}
+              deliveries={deliveries}
+              filter={filter}
+              onFilterChange={setSelectedFilter}
+            /> : null}
+            {showDetail ? <InboxDetailPane
+              delivery={activeDelivery}
+              error={error}
+              isMobile={isMobile}
+              pending={pendingAction !== null}
+              onArchiveToggle={toggleArchive}
+              onBack={() => navigate("/inbox")}
+              onContinue={continueInChat}
+              onDelete={() => void deleteDelivery()}
+              onReadToggle={toggleRead}
+            /> : null}
+          </div>
+        )}
+      </div>
+      <ConfirmDialog />
+    </div>
+  );
+}

package/src/features/inbox/stores/inbox.store.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+export type InboxSnapshot = {
+  readerOpen: boolean;
+  activeDeliveryId: string | null;
+};
+
+type InboxStore = {
+  snapshot: InboxSnapshot;
+  setSnapshot: (patch: Partial<InboxSnapshot>) => void;
+};
+
+const initialSnapshot: InboxSnapshot = {
+  readerOpen: false,
+  activeDeliveryId: null,
+};
+
+export const useInboxStore = create<InboxStore>((set) => ({
+  snapshot: initialSnapshot,
+  setSnapshot: (patch) => set((state) => ({
+    snapshot: { ...state.snapshot, ...patch },
+  })),
+}));

package/src/features/notifications/components/__tests__/app-notification-toast.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { AppNotificationToast } from "@/features/notifications";
+
+describe("AppNotificationToast", () => {
+  it("renders a keyboard-accessible route notification and dismisses it on activation", async () => {
+    const onDismiss = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AppNotificationToast
+          title="Background task"
+          description="The requested summary is ready."
+          href="/chat/session-1"
+          ariaLabel="Open the background task reply"
+          onDismiss={onDismiss}
+        />
+      </MemoryRouter>,
+    );
+
+    const notification = screen.getByRole("link", {
+      name: "Open the background task reply",
+    });
+    expect(notification.getAttribute("href")).toBe("/chat/session-1");
+    expect(screen.getByText("Background task")).toBeTruthy();
+    expect(screen.getByText("The requested summary is ready.")).toBeTruthy();
+
+    await user.click(notification);
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it("keeps informational notifications non-interactive when no route exists", () => {
+    render(
+      <MemoryRouter>
+        <AppNotificationToast
+          title="All caught up"
+          description="There is nothing else to review."
+          onDismiss={vi.fn()}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+});