npm - @nextclaw/ui - Versions diffs - 0.15.20 → 0.15.22 - Mend

@nextclaw/ui 0.15.20 → 0.15.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

package/src/features/inbox/components/inbox-delivery-content.tsx ADDED Viewed

@@ -0,0 +1,118 @@
+import { useMemo } from "react";
+import type { InboxDeliveryContentType } from "@nextclaw/shared";
+import { ChatMessageMarkdown } from "@nextclaw/agent-chat-ui";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+const HTML_PREVIEW_CONTENT_SECURITY_POLICY = [
+  "default-src 'none'",
+  "base-uri 'none'",
+  "connect-src 'none'",
+  "font-src data:",
+  "form-action 'none'",
+  "frame-src 'none'",
+  "img-src data: blob:",
+  "media-src data: blob:",
+  "object-src 'none'",
+  "script-src 'none'",
+  "style-src 'unsafe-inline'",
+].join("; ");
+function createIsolatedHtmlDocument(content: string): string {
+  const document = new DOMParser().parseFromString(content, "text/html");
+  document.querySelectorAll("base, script").forEach((element) => element.remove());
+  document.querySelectorAll("meta[http-equiv]").forEach((element) => {
+    const directive = element.getAttribute("http-equiv")?.toLowerCase();
+    if (directive === "content-security-policy" || directive === "refresh") {
+      element.remove();
+    }
+  });
+  document.querySelectorAll("*").forEach((element) => {
+    element.getAttributeNames()
+      .filter((attribute) => attribute.toLowerCase().startsWith("on"))
+      .forEach((attribute) => element.removeAttribute(attribute));
+  });
+  document.querySelectorAll("a[href]").forEach((element) => {
+    const href = element.getAttribute("href")?.trim() ?? "";
+    if (href.toLowerCase().startsWith("javascript:")) {
+      element.removeAttribute("href");
+      return;
+    }
+    element.setAttribute("target", href.startsWith("#") ? "_self" : "_blank");
+    element.setAttribute("rel", "noopener noreferrer");
+  });
+  const policy = document.createElement("meta");
+  policy.setAttribute("http-equiv", "Content-Security-Policy");
+  policy.setAttribute("content", HTML_PREVIEW_CONTENT_SECURITY_POLICY);
+  document.head.prepend(policy);
+  const defaults = document.createElement("style");
+  defaults.dataset.nextclawInboxDefaults = "";
+  defaults.textContent = [
+    ":root { color-scheme: light dark; }",
+    "*, *::before, *::after { box-sizing: border-box; }",
+    "body { margin: 0; padding: 24px; color: CanvasText; background: Canvas; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; overflow-wrap: anywhere; }",
+    "img, svg, video { max-width: 100%; height: auto; }",
+    "pre { max-width: 100%; overflow: auto; }",
+  ].join("\n");
+  policy.after(defaults);
+  return `<!doctype html>${document.documentElement.outerHTML}`;
+}
+function InboxHtmlContent({
+  content,
+  fillHeight,
+  title,
+}: {
+  content: string;
+  fillHeight: boolean;
+  title: string;
+}) {
+  const document = useMemo(() => createIsolatedHtmlDocument(content), [content]);
+  return (
+    <iframe
+      className={cn(
+        "w-full rounded-xl bg-background",
+        fillHeight
+          ? "h-full min-h-0 border-0"
+          : "h-[min(60vh,680px)] min-h-[360px] border border-border/70",
+      )}
+      sandbox=""
+      srcDoc={document}
+      title={title}
+    />
+  );
+}
+export function InboxDeliveryContent({
+  className,
+  content,
+  contentType,
+  fillHeight = false,
+  title,
+}: {
+  className?: string;
+  content: string;
+  contentType: InboxDeliveryContentType;
+  fillHeight?: boolean;
+  title: string;
+}) {
+  return (
+    <div className={cn("inbox-delivery-content", className)}>
+      {contentType === "html" ? (
+        <InboxHtmlContent content={content} fillHeight={fillHeight} title={title} />
+      ) : (
+        <ChatMessageMarkdown
+          text={content}
+          role="assistant"
+          texts={{
+            copyCodeLabel: t("chatCodeCopy"),
+            copiedCodeLabel: t("chatCodeCopied"),
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/features/inbox/components/inbox-reader-dialog.test.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { InboxReaderDialog } from "@/features/inbox/components/inbox-reader-dialog";
+import { useInboxStore } from "@/features/inbox/stores/inbox.store";
+const mocks = vi.hoisted(() => ({
+  closeReader: vi.fn(),
+  contentType: "markdown",
+  continueInChat: vi.fn(),
+  markRead: vi.fn(),
+  selectInReader: vi.fn(),
+}));
+vi.mock("@/app/components/app-presenter-provider", () => ({
+  useAppPresenter: () => ({ inboxManager: mocks }),
+}));
+vi.mock("@/features/inbox/hooks/use-inbox-deliveries", () => ({
+  useInboxDeliveries: () => ({
+    data: {
+      deliveries: [{
+        id: "delivery-1",
+        title: "A considered report",
+        summary: "A concise summary",
+        content: mocks.contentType === "html"
+          ? "<h1>HTML finding</h1>"
+          : "# Finding\n\n**Important** result",
+        contentType: mocks.contentType,
+        source: { kind: "agent", agentId: null, sessionId: null, toolCallId: null, filePath: null },
+        createdAt: "2026-08-06T00:00:00.000Z",
+        updatedAt: "2026-08-06T00:00:00.000Z",
+        presentedAt: "2026-08-06T00:01:00.000Z",
+        readAt: null,
+        archivedAt: null,
+        conversationSessionId: null,
+      }],
+    },
+  }),
+}));
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  ChatMessageMarkdown: ({ text }: { text: string }) => (
+    <article>{text.replace(/[*#]/g, "").trim()}</article>
+  ),
+}));
+describe("InboxReaderDialog", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.contentType = "markdown";
+    useInboxStore.setState({
+      snapshot: { readerOpen: true, activeDeliveryId: "delivery-1" },
+    });
+  });
+  it("renders one accessible reader with friendly Markdown output", () => {
+    render(<MemoryRouter><InboxReaderDialog /></MemoryRouter>);
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    const title = screen.getByRole("heading", { name: "A considered report" });
+    expect(title).toBeTruthy();
+    expect(document.activeElement).toBe(title);
+    expect(screen.getByText(/Important result/)).toBeTruthy();
+    expect(screen.queryByText("**Important** result")).toBeNull();
+  });
+  it("uses compact chrome and lets HTML fill the reading area", () => {
+    mocks.contentType = "html";
+    render(<MemoryRouter><InboxReaderDialog /></MemoryRouter>);
+    const title = screen.getByRole("heading", { name: "A considered report" });
+    expect(title.className).toContain("text-sm");
+    expect(screen.getByText("A concise summary").className).toContain("sr-only");
+    expect(screen.getByTitle("A considered report").className).toContain("h-full");
+  });
+});

package/src/features/inbox/components/inbox-reader-dialog.tsx ADDED Viewed

@@ -0,0 +1,224 @@
+import { useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Inbox } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
+import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
+import { useInboxStore } from "@/features/inbox/stores/inbox.store";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+function formatPosition(current: number, total: number): string {
+  return t("inboxReaderPosition")
+    .replace("{current}", String(current))
+    .replace("{total}", String(total));
+}
+export function InboxReaderDialog() {
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const navigate = useNavigate();
+  const { inboxManager } = useAppPresenter();
+  const { data } = useInboxDeliveries();
+  const { activeDeliveryId, readerOpen } = useInboxStore((state) => state.snapshot);
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const unreadDeliveries = (data?.deliveries ?? []).filter(
+    (delivery) => !delivery.readAt && !delivery.archivedAt,
+  );
+  const activeIndex = unreadDeliveries.findIndex(({ id }) => id === activeDeliveryId);
+  const activeDelivery = activeIndex >= 0 ? unreadDeliveries[activeIndex] : null;
+  const isHtml = activeDelivery?.contentType === "html";
+  const runAction = async (name: string, action: () => Promise<void>) => {
+    setPendingAction(name);
+    setError(null);
+    try {
+      await action();
+    } catch {
+      setError(t("inboxActionError"));
+    } finally {
+      setPendingAction(null);
+    }
+  };
+  const selectAt = (index: number) => {
+    const delivery = unreadDeliveries[index];
+    if (delivery) {
+      void runAction("select", async () => {
+        await inboxManager.selectInReader(delivery.id);
+      });
+    }
+  };
+  const openInbox = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("open", async () => {
+      await inboxManager.markRead(activeDelivery.id);
+      inboxManager.closeReader();
+      navigate(`/inbox/${encodeURIComponent(activeDelivery.id)}`);
+    });
+  };
+  const continueInChat = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("continue", async () => {
+      const result = await inboxManager.continueInChat(activeDelivery.id);
+      navigate(`/chat/${encodeURIComponent(result.sessionId)}`);
+    });
+  };
+  const markRead = () => {
+    if (!activeDelivery) {
+      return;
+    }
+    void runAction("read", async () => {
+      await inboxManager.markRead(activeDelivery.id);
+      inboxManager.closeReader();
+    });
+  };
+  const positionControls = (
+    <div className="flex shrink-0 items-center gap-1 pr-1">
+      <span className="mr-1 text-[11px] tabular-nums text-muted-foreground">
+        {formatPosition(activeIndex + 1, unreadDeliveries.length)}
+      </span>
+      <IconActionButton
+        icon={<ChevronLeft className="h-4 w-4" />}
+        label={t("inboxPrevious")}
+        disabled={activeIndex <= 0 || pendingAction === "select"}
+        onClick={() => selectAt(activeIndex - 1)}
+      />
+      <IconActionButton
+        icon={<ChevronRight className="h-4 w-4" />}
+        label={t("inboxNext")}
+        disabled={activeIndex >= unreadDeliveries.length - 1 || pendingAction === "select"}
+        onClick={() => selectAt(activeIndex + 1)}
+      />
+    </div>
+  );
+  return (
+    <Dialog
+      open={readerOpen && Boolean(activeDelivery)}
+      onOpenChange={(open) => {
+        if (!open) {
+          inboxManager.closeReader();
+        }
+      }}
+    >
+      <DialogContent
+        className="flex h-[min(82vh,760px)] w-[calc(100vw-2rem)] max-w-[820px] flex-col gap-0 overflow-hidden rounded-[24px] border-border/70 bg-background p-0 shadow-[0_20px_55px_-22px_rgba(15,23,42,0.32)] max-sm:h-[100dvh] max-sm:max-h-none max-sm:w-screen max-sm:rounded-none max-sm:border-0"
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          titleRef.current?.focus();
+        }}
+      >
+        {activeDelivery ? (
+          <>
+            {isHtml ? (
+              <header className="shrink-0 border-b border-border/60 px-6 py-3 pr-14 sm:px-8">
+                <div className="flex min-h-8 items-center justify-between gap-4">
+                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <Inbox className="h-3.5 w-3.5" />
+                    </span>
+                    <DialogTitle
+                      ref={titleRef}
+                      tabIndex={-1}
+                      className="truncate text-sm font-semibold text-foreground outline-none"
+                    >
+                      {activeDelivery.title}
+                    </DialogTitle>
+                    <span aria-hidden="true">·</span>
+                    <time className="shrink-0" dateTime={activeDelivery.createdAt}>
+                      {formatDateTime(activeDelivery.createdAt)}
+                    </time>
+                  </div>
+                  {positionControls}
+                </div>
+                <DialogDescription className="sr-only">
+                  {activeDelivery.summary ?? t("inboxNoSummary")}
+                </DialogDescription>
+              </header>
+            ) : (
+              <header className="shrink-0 border-b border-border/60 px-6 pb-4 pt-5 pr-14 sm:px-8 sm:pb-5 sm:pt-6">
+                <div className="mb-5 flex min-h-8 items-center justify-between gap-4">
+                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <Inbox className="h-3.5 w-3.5" />
+                    </span>
+                    <span className="truncate">{t("inboxDeliveredBy")}</span>
+                    <span aria-hidden="true">·</span>
+                    <time dateTime={activeDelivery.createdAt}>
+                      {formatDateTime(activeDelivery.createdAt)}
+                    </time>
+                  </div>
+                  {positionControls}
+                </div>
+                <DialogTitle
+                  ref={titleRef}
+                  tabIndex={-1}
+                  className="max-w-[680px] text-balance text-2xl font-semibold leading-tight tracking-[-0.02em] outline-none sm:text-[28px]"
+                >
+                  {activeDelivery.title}
+                </DialogTitle>
+                <DialogDescription className="mt-2 max-w-[680px] text-sm leading-6 text-muted-foreground">
+                  {activeDelivery.summary ?? t("inboxNoSummary")}
+                </DialogDescription>
+              </header>
+            )}
+            <div className={cn(
+              "min-h-0 flex-1",
+              isHtml
+                ? "p-4 sm:p-5"
+                : "custom-scrollbar overflow-y-auto px-6 py-6 sm:px-8 sm:py-7",
+            )}>
+              <InboxDeliveryContent
+                className={isHtml ? "h-full" : undefined}
+                content={activeDelivery.content}
+                contentType={activeDelivery.contentType}
+                fillHeight={isHtml}
+                title={activeDelivery.title}
+              />
+            </div>
+            <footer className="shrink-0 border-t border-border/60 bg-background/95 px-6 py-4 backdrop-blur sm:px-8">
+              {error ? (
+                <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>
+              ) : null}
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between">
+                <div className="flex flex-col-reverse gap-2 sm:flex-row">
+                  <Button variant="ghost" onClick={inboxManager.closeReader}>
+                    {t("inboxReadLater")}
+                  </Button>
+                  <Button variant="outline" disabled={pendingAction !== null} onClick={markRead}>
+                    {t("inboxMarkRead")}
+                  </Button>
+                  <Button variant="outline" disabled={pendingAction !== null} onClick={openInbox}>
+                    {t("inboxOpenInbox")}
+                  </Button>
+                </div>
+                <Button disabled={pendingAction !== null} onClick={continueInChat}>
+                  {t("inboxContinueChat")}
+                </Button>
+              </div>
+            </footer>
+          </>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/inbox/components/inbox-runtime.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { InboxReaderDialog } from "@/features/inbox/components/inbox-reader-dialog";
+export function InboxRuntime() {
+  const { inboxManager } = useAppPresenter();
+  useEffect(() => {
+    inboxManager.start();
+    return () => inboxManager.stop();
+  }, [inboxManager]);
+  return <InboxReaderDialog />;
+}

package/src/features/inbox/hooks/use-inbox-deliveries.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { INBOX_DELIVERIES_QUERY_KEY } from "@/features/inbox/managers/inbox.manager";
+import { nextclawClient } from "@/shared/lib/api";
+export function useInboxDeliveries() {
+  return useQuery({
+    queryKey: INBOX_DELIVERIES_QUERY_KEY,
+    queryFn: () => nextclawClient.inboxDeliveries.list(),
+  });
+}
+export function useInboxUnreadCount(): number {
+  return useInboxDeliveries().data?.unreadCount ?? 0;
+}

package/src/features/inbox/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export { InboxRuntime } from "./components/inbox-runtime";
+export { InboxPage } from "./pages/inbox-page";
+export { InboxManager } from "./managers/inbox.manager";
+export {
+  useInboxDeliveries,
+  useInboxUnreadCount,
+} from "./hooks/use-inbox-deliveries";

package/src/features/inbox/managers/inbox.manager.test.ts ADDED Viewed

@@ -0,0 +1,86 @@
+import { QueryClient } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { InboxDelivery } from "@nextclaw/shared";
+import { InboxManager } from "@/features/inbox/managers/inbox.manager";
+import { useInboxStore } from "@/features/inbox/stores/inbox.store";
+const mocks = vi.hoisted(() => ({
+  delete: vi.fn(),
+  continueInChat: vi.fn(),
+  list: vi.fn(),
+  on: vi.fn(() => vi.fn()),
+  updateState: vi.fn(),
+}));
+vi.mock("@/shared/lib/api", () => ({
+  nextclawClient: {
+    eventBus: { on: mocks.on },
+    inboxDeliveries: {
+      delete: mocks.delete,
+      continueInChat: mocks.continueInChat,
+      list: mocks.list,
+      updateState: mocks.updateState,
+    },
+  },
+}));
+const delivery: InboxDelivery = {
+  id: "delivery-1",
+  title: "Brief",
+  summary: null,
+  content: "# Brief",
+  contentType: "markdown",
+  source: { kind: "agent", agentId: null, sessionId: null, toolCallId: null, filePath: null },
+  createdAt: "2026-08-06T00:00:00.000Z",
+  updatedAt: "2026-08-06T00:00:00.000Z",
+  presentedAt: null,
+  readAt: null,
+  archivedAt: null,
+  conversationSessionId: null,
+};
+describe("InboxManager", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+    useInboxStore.setState({
+      snapshot: { readerOpen: false, activeDeliveryId: null },
+    });
+    mocks.list.mockResolvedValue({
+      deliveries: [delivery],
+      total: 1,
+      unreadCount: 1,
+      unpresentedCount: 1,
+    });
+    mocks.updateState.mockImplementation(async (_id: string, action: string) => ({
+      ...delivery,
+      presentedAt: action === "present" || action === "read" ? "2026-08-06T01:00:00.000Z" : null,
+      readAt: action === "read" ? "2026-08-06T01:00:00.000Z" : null,
+    }));
+  });
+  it("auto-opens the oldest unpresented item and only marks it presented", async () => {
+    const manager = new InboxManager(new QueryClient());
+    manager.start();
+    await vi.waitFor(() => {
+      expect(useInboxStore.getState().snapshot).toEqual({
+        readerOpen: true,
+        activeDeliveryId: "delivery-1",
+      });
+    });
+    expect(mocks.updateState).toHaveBeenCalledWith("delivery-1", "present");
+    expect(mocks.updateState).not.toHaveBeenCalledWith("delivery-1", "read");
+    manager.stop();
+  });
+  it("closes the reader without changing unread state or reopening it", async () => {
+    const manager = new InboxManager(new QueryClient());
+    await manager.selectInReader(delivery.id);
+    manager.closeReader();
+    expect(useInboxStore.getState().snapshot.readerOpen).toBe(false);
+    expect(mocks.updateState).toHaveBeenCalledTimes(1);
+    expect(mocks.updateState).toHaveBeenCalledWith(delivery.id, "present");
+  });
+});