@nextclaw/ui 0.15.22 → 0.15.23

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

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

@@ -89,7 +89,7 @@ export function InboxReaderDialog() {
     });
   };
 
-  const positionControls = (
+  const positionControls = unreadDeliveries.length > 1 ? (
     <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)}
@@ -107,7 +107,7 @@ export function InboxReaderDialog() {
         onClick={() => selectAt(activeIndex + 1)}
       />
     </div>
-  );
+  ) : null;
 
   return (
     <Dialog
@@ -127,64 +127,40 @@ export function InboxReaderDialog() {
       >
         {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}
+            <header className="shrink-0 border-b border-border/50 px-5 py-3 pr-14 sm:px-6">
+              <div className="flex min-h-7 items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted/70 text-muted-foreground">
+                    <Inbox className="h-3.5 w-3.5" />
+                  </span>
+                  <DialogTitle
+                    ref={titleRef}
+                    tabIndex={-1}
+                    title={activeDelivery.title}
+                    className="min-w-0 truncate text-sm font-medium text-foreground outline-none"
+                  >
+                    {activeDelivery.title}
+                  </DialogTitle>
+                  <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+                  <time
+                    className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+                    dateTime={activeDelivery.createdAt}
+                  >
+                    {formatDateTime(activeDelivery.createdAt)}
+                  </time>
                 </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>
-            )}
+                {positionControls}
+              </div>
+              <DialogDescription className="sr-only">
+                {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",
+                ? "p-3 sm:p-4"
+                : "custom-scrollbar overflow-y-auto px-6 py-5 sm:px-8 sm:py-6",
             )}>
               <InboxDeliveryContent
                 className={isHtml ? "h-full" : undefined}
@@ -195,23 +171,23 @@ export function InboxReaderDialog() {
               />
             </div>
 
-            <footer className="shrink-0 border-t border-border/60 bg-background/95 px-6 py-4 backdrop-blur sm:px-8">
+            <footer className="shrink-0 border-t border-border/50 bg-background px-5 py-3 sm:px-6">
               {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}>
+                <div className="flex flex-col-reverse gap-1 sm:flex-row sm:flex-wrap">
+                  <Button size="sm" variant="ghost" onClick={inboxManager.closeReader}>
                     {t("inboxReadLater")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={markRead}>
+                  <Button size="sm" variant="outline" disabled={pendingAction !== null} onClick={markRead}>
                     {t("inboxMarkRead")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={openInbox}>
+                  <Button size="sm" variant="ghost" disabled={pendingAction !== null} onClick={openInbox}>
                     {t("inboxOpenInbox")}
                   </Button>
                 </div>
-                <Button disabled={pendingAction !== null} onClick={continueInChat}>
+                <Button size="sm" disabled={pendingAction !== null} onClick={continueInChat}>
                   {t("inboxContinueChat")}
                 </Button>
               </div>