@nextclaw/ui 0.15.20 → 0.15.21

package/src/features/inbox/components/inbox-delivery-content.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
+
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  ChatMessageMarkdown: ({ text }: { text: string }) => <article>{text}</article>,
+}));
+
+describe("InboxDeliveryContent", () => {
+  it("keeps Markdown on the existing renderer path", () => {
+    render(
+      <InboxDeliveryContent
+        content="# Markdown report"
+        contentType="markdown"
+        title="Markdown report"
+      />,
+    );
+
+    expect(screen.getByText("# Markdown report")).toBeTruthy();
+    expect(screen.queryByTitle("Markdown report")).toBeNull();
+  });
+
+  it("renders static HTML in an isolated document", () => {
+    render(
+      <InboxDeliveryContent
+        content={'<meta http-equiv="refresh" content="0;url=https://example.com"><h1 onclick="alert(1)">Report</h1><script>alert(1)</script>'}
+        contentType="html"
+        fillHeight
+        title="HTML report"
+      />,
+    );
+
+    const frame = screen.getByTitle<HTMLIFrameElement>("HTML report");
+    expect(frame.getAttribute("sandbox")).toBe("");
+    expect(frame.className).toContain("h-full");
+    expect(frame.className).toContain("border-0");
+    expect(frame.srcdoc).toContain("Content-Security-Policy");
+    expect(frame.srcdoc).toContain("script-src 'none'");
+    expect(frame.srcdoc).toContain("connect-src 'none'");
+    expect(frame.srcdoc).not.toContain("http-equiv=\"refresh\"");
+    expect(frame.srcdoc).not.toContain("onclick");
+    expect(frame.srcdoc).not.toContain("<script");
+  });
+
+  it("preserves the iframe instance while the surrounding view rerenders", () => {
+    const view = render(
+      <InboxDeliveryContent content="<h1>Report</h1>" contentType="html" title="Report" />,
+    );
+    const frame = screen.getByTitle("Report");
+
+    view.rerender(
+      <InboxDeliveryContent content="<h1>Report</h1>" contentType="html" title="Report" />,
+    );
+
+    expect(screen.getByTitle("Report")).toBe(frame);
+  });
+});

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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");
+  });
+});