@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/cron/components/__tests__/cron-config.test.tsx

@@ -1,9 +1,11 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { CronJobView } from "@/shared/lib/api";
 import { setLanguage } from "@/shared/lib/i18n";
+import { buildSessionPath } from "@/features/chat";
 import { CronConfig } from "@/features/cron";
 
 const mocks = vi.hoisted(() => ({
@@ -12,7 +14,6 @@ const mocks = vi.hoisted(() => ({
   deleteJob: vi.fn(),
   refetch: vi.fn(),
   runJob: vi.fn(),
-  selectSession: vi.fn(),
   toggleJob: vi.fn(),
   cronParams: vi.fn(),
   cronQuery: {
@@ -26,14 +27,20 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("@/features/chat", () => ({
-  usePresenter: () => ({
-    chatSessionListManager: {
-      createSession: mocks.createSession,
-      selectSession: mocks.selectSession,
-    },
-  }),
-}));
+vi.mock("@/features/chat", async () => {
+  const routeUtils = await vi.importActual<{
+    buildSessionPath: typeof buildSessionPath;
+  }>("@/features/chat/features/session/utils/chat-session-route.utils");
+
+  return {
+    buildSessionPath: routeUtils.buildSessionPath,
+    usePresenter: () => ({
+      chatSessionListManager: {
+        createSession: mocks.createSession,
+      },
+    }),
+  };
+});
 
 vi.mock("@/features/cron/hooks/use-cron-jobs", () => ({
   useCronJobs: (params: unknown) => {
@@ -77,6 +84,14 @@ function createJob(overrides: Partial<CronJobView> = {}): CronJobView {
   };
 }
 
+function renderCronConfig() {
+  return render(
+    <MemoryRouter>
+      <CronConfig />
+    </MemoryRouter>,
+  );
+}
+
 describe("CronConfig", () => {
   beforeEach(() => {
     setLanguage("zh");
@@ -110,8 +125,12 @@ describe("CronConfig", () => {
   });
 
   it("shows current task metrics and distinguishes bound and dedicated sessions", () => {
-    render(<CronConfig />);
+    renderCronConfig();
 
+    expect(
+      screen.getByRole("heading", { level: 1, name: "定时任务" }),
+    ).toBeTruthy();
+    expect(screen.queryByText("自动化工作台")).toBeNull();
     expect(screen.getByText("全部任务")).toBeTruthy();
     expect(screen.getAllByText("运行中").length).toBeGreaterThan(0);
     expect(screen.getAllByText("需要关注").length).toBeGreaterThan(0);
@@ -123,7 +142,7 @@ describe("CronConfig", () => {
 
   it("keeps one inline task preview open at a time", async () => {
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     const agentPreview = document.getElementById(
       "cron-job-preview-agent-radar",
@@ -152,9 +171,70 @@ describe("CronConfig", () => {
     ).toBe("true");
   });
 
+  it("links available execution sessions from inline task previews", async () => {
+    const user = userEvent.setup();
+    renderCronConfig();
+
+    await user.click(
+      screen.getByRole("button", { name: "展开任务 Agent 产品雷达" }),
+    );
+    const sessionLink = screen.getByRole("link", {
+      name: "session:research",
+    });
+    expect(sessionLink.getAttribute("href")).toBe(
+      buildSessionPath("session:research"),
+    );
+    expect(sessionLink.className).toContain(
+      "text-[hsl(var(--link-foreground))]",
+    );
+    expect(sessionLink.className.split(" ")).toContain("underline");
+    expect(sessionLink.querySelector("svg")).toBeNull();
+
+    await user.click(
+      screen.getByRole("button", { name: "展开任务 重要邮件监控" }),
+    );
+    expect(
+      screen.getByRole("link", { name: "cron:mail-watch" }).getAttribute("href"),
+    ).toBe(buildSessionPath("cron:mail-watch"));
+  });
+
+  it("keeps a dedicated execution session unavailable before its first run", async () => {
+    mocks.cronQuery.data = {
+      jobs: [
+        createJob({
+          id: "not-run",
+          name: "尚未执行的任务",
+          payload: {
+            kind: "agent_turn",
+            message: "等待第一次执行。",
+            agentId: "main",
+            sessionId: null,
+          },
+          state: {
+            nextRunAt: "2026-07-21T01:00:00.000Z",
+            lastRunAt: null,
+            lastStatus: null,
+            lastError: null,
+          },
+        }),
+      ],
+      total: 1,
+      summary: { total: 1, enabled: 1, disabled: 0, attention: 0 },
+    };
+    const user = userEvent.setup();
+    renderCronConfig();
+
+    await user.click(
+      screen.getByRole("button", { name: "展开任务 尚未执行的任务" }),
+    );
+
+    expect(screen.getByText("cron:not-run")).toBeTruthy();
+    expect(screen.queryByRole("link", { name: "cron:not-run" })).toBeNull();
+  });
+
   it("hands a typed request to a new AI draft conversation", async () => {
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     const input = screen.getByLabelText("描述你想安排的任务");
     await user.type(input, "每天早上整理项目风险{Enter}");
@@ -171,7 +251,7 @@ describe("CronConfig", () => {
       summary: { total: 0, enabled: 0, disabled: 0, attention: 0 },
     };
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     await user.click(screen.getByRole("button", { name: /每日 AI 新闻简报/ }));
 
@@ -183,9 +263,9 @@ describe("CronConfig", () => {
     expect(mocks.createSession).not.toHaveBeenCalled();
   });
 
-  it("opens task details from the edit action and navigates to the bound session", async () => {
+  it("exposes the bound session destination from task details", async () => {
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     await user.click(
       screen.getByRole("button", { name: "编辑 Agent 产品雷达" }),
@@ -193,13 +273,14 @@ describe("CronConfig", () => {
     expect(screen.getByRole("dialog")).toBeTruthy();
     expect(screen.getByText("当前系统只保存最近一次执行快照。")).toBeTruthy();
 
-    await user.click(screen.getByRole("button", { name: "打开会话" }));
-    expect(mocks.selectSession).toHaveBeenCalledWith("session:research");
+    expect(
+      screen.getByRole("link", { name: "打开会话" }).getAttribute("href"),
+    ).toBe(buildSessionPath("session:research"));
   });
 
   it("keeps enablement as an independent row action", async () => {
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     await user.click(screen.getAllByRole("switch")[0]);
     expect(mocks.toggleJob).toHaveBeenCalledWith({
@@ -226,7 +307,7 @@ describe("CronConfig", () => {
       summary: { total: 12, enabled: 10, disabled: 2, attention: 1 },
     };
     const user = userEvent.setup();
-    render(<CronConfig />);
+    renderCronConfig();
 
     expect(screen.getByText("1–10 / 12")).toBeTruthy();
     await user.click(screen.getByRole("button", { name: "展开任务 任务 1" }));

package/src/features/cron/components/cron-config.tsx

@@ -9,7 +9,7 @@ import {
   Search,
 } from "lucide-react";
 
-import { PageLayout } from "@/app/components/layout/page-layout";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
 import { usePresenter } from "@/features/chat";
 import { CronJobDetailDialog } from "@/features/cron/components/cron-job-detail-dialog";
 import { CronJobRow } from "@/features/cron/components/cron-job-row";
@@ -24,13 +24,13 @@ import {
   useToggleCronJob,
 } from "@/features/cron/hooks/use-cron-jobs";
 import { Button } from "@/shared/components/ui/button";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { Input } from "@/shared/components/ui/input";
 import type {
   CronJobView,
   CronListStatus,
   CronListSummaryView,
 } from "@/shared/lib/api";
-import { describeCronSession } from "@/shared/lib/cron";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
@@ -232,10 +232,6 @@ export function CronConfig() {
     runCronJob.mutate({ id: job.id, force });
   };
 
-  const handleOpenSession = (job: CronJobView) => {
-    presenter.chatSessionListManager.selectSession(describeCronSession(job));
-  };
-
   const handlePageChange = (nextPage: number) => {
     setExpandedJobId(null);
     setPage(nextPage);
@@ -248,24 +244,20 @@ export function CronConfig() {
   const hasTasks = (summary?.total ?? 0) > 0;
 
   return (
-    <PageLayout className="space-y-7">
-      <header className="flex items-start justify-between gap-6 pt-2">
-        <div>
-          <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-primary">
-            {t("cronWorkspaceEyebrow")}
-          </div>
-          <h1 className="text-3xl font-semibold tracking-[-0.035em] text-foreground sm:text-4xl">
-            {t("cronPageTitle")}
-          </h1>
-          <p className="mt-2 text-sm text-muted-foreground">
-            {t("cronPageDescription")}
-          </p>
-        </div>
-        <div className="pt-5">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
+    <PageLayout className="space-y-6">
+      <PageHeader
+        headingLevel={1}
+        title={t("cronPageTitle")}
+        description={t("cronPageDescription")}
+        actions={(
+          <IconActionButton
+            size="lg"
+            label={t("refresh")}
+            icon={(
+              <RefreshCw
+                className={cn("h-4 w-4", cronQuery.isFetching && "animate-spin")}
+              />
+            )}
             onClick={() => {
               if (page === 0) {
                 setExpandedJobId(null);
@@ -274,14 +266,9 @@ export function CronConfig() {
                 handlePageChange(0);
               }
             }}
-            aria-label={t("refresh")}
-          >
-            <RefreshCw
-              className={cn("h-4 w-4", cronQuery.isFetching && "animate-spin")}
-            />
-          </Button>
-        </div>
-      </header>
+          />
+        )}
+      />
 
       {hasTasks ? (
         <CronTaskComposer
@@ -456,7 +443,6 @@ export function CronConfig() {
           }
         }}
         onDelete={handleDelete}
-        onOpenSession={handleOpenSession}
         onRun={handleRun}
         onToggle={handleToggle}
       />

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -1,7 +1,10 @@
-import { ExternalLink, Play, Trash2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { Play, Trash2 } from "lucide-react";
 
+import { buildSessionPath } from "@/features/chat";
 import type { CronJobView } from "@/shared/lib/api";
-import { Button } from "@/shared/components/ui/button";
+import { NavigationLink } from "@/shared/components/actions/navigation-link";
+import { Button, buttonVariants } from "@/shared/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -12,6 +15,7 @@ import {
 } from "@/shared/components/ui/overlays/sheet";
 import { Switch } from "@/shared/components/ui/switch";
 import {
+  canOpenCronSession,
   describeCronSchedule,
   describeCronSession,
   formatCronDate,
@@ -24,7 +28,7 @@ function DetailRow({
   value,
 }: {
   readonly label: string;
-  readonly value: string;
+  readonly value: ReactNode;
 }) {
   return (
     <div className="flex items-start justify-between gap-4 border-b border-border/50 py-3 last:border-b-0">
@@ -41,7 +45,6 @@ type CronJobDetailDialogProps = {
   readonly open: boolean;
   readonly onDelete: (job: CronJobView) => void;
   readonly onOpenChange: (open: boolean) => void;
-  readonly onOpenSession: (job: CronJobView) => void;
   readonly onRun: (job: CronJobView) => void;
   readonly onToggle: (job: CronJobView, enabled: boolean) => void;
 };
@@ -51,7 +54,6 @@ export function CronJobDetailDialog({
   open,
   onDelete,
   onOpenChange,
-  onOpenSession,
   onRun,
   onToggle,
 }: CronJobDetailDialogProps) {
@@ -61,7 +63,9 @@ export function CronJobDetailDialog({
 
   const sessionKey = describeCronSession(job);
   const isBound = Boolean(job.payload.sessionId?.trim());
-  const canOpenSession = isBound || Boolean(job.state.lastRunAt);
+  const sessionHref = canOpenCronSession(job)
+    ? buildSessionPath(sessionKey)
+    : null;
   const status = job.state.lastStatus
     ? t(
         `cronLastStatus${job.state.lastStatus[0].toUpperCase()}${job.state.lastStatus.slice(1)}`,
@@ -114,7 +118,22 @@ export function CronJobDetailDialog({
                 label={t("cronAgentLabel")}
                 value={job.payload.agentId?.trim() || "main"}
               />
-              <DetailRow label={t("cronSessionLabel")} value={sessionKey} />
+              <DetailRow
+                label={t("cronSessionLabel")}
+                value={
+                  sessionHref ? (
+                    <NavigationLink
+                      href={sessionHref}
+                      size="xs"
+                      className="text-[hsl(var(--link-foreground))] underline decoration-[1.2px] underline-offset-2 hover:text-[hsl(var(--link-foreground-hover))]"
+                    >
+                      {sessionKey}
+                    </NavigationLink>
+                  ) : (
+                    sessionKey
+                  )
+                }
+              />
               <DetailRow
                 label={t("cronCreatedAt")}
                 value={formatCronDate(job.createdAt)}
@@ -175,7 +194,7 @@ export function CronJobDetailDialog({
             />
           </section>
 
-          {!canOpenSession ? (
+          {!sessionHref ? (
             <p className="text-xs text-muted-foreground">
               {t("cronSessionAvailableAfterRun")}
             </p>
@@ -191,14 +210,21 @@ export function CronJobDetailDialog({
             <Trash2 className="mr-2 h-4 w-4" />
             {t("delete")}
           </Button>
-          <Button
-            variant="outline"
-            onClick={() => onOpenSession(job)}
-            disabled={!canOpenSession}
-          >
-            <ExternalLink className="mr-2 h-4 w-4" />
-            {t("cronOpenSession")}
-          </Button>
+          {sessionHref ? (
+            <NavigationLink
+              href={sessionHref}
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "hover:no-underline",
+              )}
+            >
+              {t("cronOpenSession")}
+            </NavigationLink>
+          ) : (
+            <Button variant="outline" disabled>
+              {t("cronOpenSession")}
+            </Button>
+          )}
           <Button onClick={() => onRun(job)}>
             <Play className="mr-2 h-4 w-4" />
             {t("cronRunNow")}

package/src/features/cron/components/cron-job-row.tsx

@@ -10,7 +10,9 @@ import {
   TriangleAlert,
 } from "lucide-react";
 
+import { buildSessionPath } from "@/features/chat";
 import type { CronJobView } from "@/shared/lib/api";
+import { NavigationLink } from "@/shared/components/actions/navigation-link";
 import { Button } from "@/shared/components/ui/button";
 import {
   Popover,
@@ -25,6 +27,7 @@ import {
   TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
 import {
+  canOpenCronSession,
   describeCronSchedule,
   describeCronSession,
   formatCronDate,
@@ -92,6 +95,10 @@ export function CronJobRow({
   const StatusIcon = needsAttention ? TriangleAlert : Check;
   const jobLabel = job.name || job.id;
   const previewId = `cron-job-preview-${job.id}`;
+  const sessionKey = describeCronSession(job);
+  const sessionHref = canOpenCronSession(job)
+    ? buildSessionPath(sessionKey)
+    : null;
 
   return (
     <div
@@ -248,7 +255,17 @@ export function CronJobRow({
                   {t("cronSessionLabel")}
                 </dt>
                 <dd className="mt-0.5 truncate font-medium text-foreground">
-                  {describeCronSession(job)}
+                  {sessionHref ? (
+                    <NavigationLink
+                      href={sessionHref}
+                      size="xs"
+                      className="max-w-full truncate text-[11px] text-[hsl(var(--link-foreground))] underline decoration-[1.2px] underline-offset-2 hover:text-[hsl(var(--link-foreground-hover))]"
+                    >
+                      {sessionKey}
+                    </NavigationLink>
+                  ) : (
+                    sessionKey
+                  )}
                 </dd>
               </div>
               <div className="min-w-0">

package/src/features/cron/components/cron-task-discovery.tsx

@@ -94,7 +94,7 @@ export const CronTaskComposer = forwardRef<
         ref={ref}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className="pl-9 pr-11 focus:border-border/75"
+        className="pl-9 pr-11"
         placeholder={t("cronComposerPlaceholder")}
         aria-label={t("cronComposerLabel")}
       />

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

@@ -23,7 +23,7 @@ describe("InboxDeliveryContent", () => {
   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>'}
+        content={'<meta http-equiv="refresh" content="0;url=https://example.com"><h1 onclick="alert(1)">Report</h1><a href="https://example.com/report">Source</a><a href="javascript:alert(1)">Unsafe</a><script>alert(1)</script>'}
         contentType="html"
         fillHeight
         title="HTML report"
@@ -31,7 +31,9 @@ describe("InboxDeliveryContent", () => {
     );
 
     const frame = screen.getByTitle<HTMLIFrameElement>("HTML report");
-    expect(frame.getAttribute("sandbox")).toBe("");
+    expect(frame.getAttribute("sandbox")).toBe(
+      "allow-popups allow-popups-to-escape-sandbox",
+    );
     expect(frame.className).toContain("h-full");
     expect(frame.className).toContain("border-0");
     expect(frame.srcdoc).toContain("Content-Security-Policy");
@@ -40,6 +42,10 @@ describe("InboxDeliveryContent", () => {
     expect(frame.srcdoc).not.toContain("http-equiv=\"refresh\"");
     expect(frame.srcdoc).not.toContain("onclick");
     expect(frame.srcdoc).not.toContain("<script");
+    expect(frame.srcdoc).toContain('href="https://example.com/report"');
+    expect(frame.srcdoc).toContain('target="_blank"');
+    expect(frame.srcdoc).toContain('rel="noopener noreferrer"');
+    expect(frame.srcdoc).not.toContain("javascript:");
   });
 
   it("preserves the iframe instance while the surrounding view rerenders", () => {

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

@@ -79,7 +79,7 @@ function InboxHtmlContent({
           ? "h-full min-h-0 border-0"
           : "h-[min(60vh,680px)] min-h-[360px] border border-border/70",
       )}
-      sandbox=""
+      sandbox="allow-popups allow-popups-to-escape-sandbox"
       srcDoc={document}
       title={title}
     />

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

@@ -3,6 +3,7 @@ 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";
+import { t } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   closeReader: vi.fn(),
@@ -54,24 +55,29 @@ describe("InboxReaderDialog", () => {
     });
   });
 
-  it("renders one accessible reader with friendly Markdown output", () => {
+  it("renders one accessible compact 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(title.className).toContain("text-sm");
     expect(document.activeElement).toBe(title);
+    expect(screen.getByText("A concise summary").className).toContain("sr-only");
     expect(screen.getByText(/Important result/)).toBeTruthy();
     expect(screen.queryByText("**Important** result")).toBeNull();
+    expect(screen.queryByRole("button", { name: t("inboxPrevious") })).toBeNull();
+    expect(screen.queryByRole("button", { name: t("inboxNext") })).toBeNull();
   });
 
-  it("uses compact chrome and lets HTML fill the reading area", () => {
+  it("lets HTML fill the reading area without changing the compact chrome", () => {
     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");
+    const htmlPreview = screen.getAllByTitle("A considered report")
+      .find((element) => element.tagName === "IFRAME");
+    expect(htmlPreview?.className).toContain("h-full");
   });
 });