@nextclaw/ui 0.15.9 → 0.15.11

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

@@ -1,345 +1,194 @@
-import { useMemo, useState } from "react";
-import type { CronJobView } from "@/shared/lib/api";
-import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { useDeferredValue, useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  CircleAlert,
+  CircleCheck,
+  ListTodo,
+  RefreshCw,
+  Search,
+} from "lucide-react";
+
+import { 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";
+import {
+  CronTaskComposer,
+  CronTemplateGallery,
+} from "@/features/cron/components/cron-task-discovery";
 import {
   useCronJobs,
   useDeleteCronJob,
-  useToggleCronJob,
   useRunCronJob,
+  useToggleCronJob,
 } from "@/features/cron/hooks/use-cron-jobs";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
-import { Switch } from "@/shared/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/components/ui/select";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/shared/components/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/shared/components/ui/tooltip";
-import {
-  describeCronSchedule,
-  describeCronSession,
-  formatCronDate,
-  formatRelativeTime,
-} from "@/shared/lib/cron";
-import { cn } from "@/shared/lib/utils";
+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 { PageLayout, PageHeader } from "@/app/components/layout/page-layout";
-import {
-  Search,
-  RefreshCw,
-  Trash2,
-  Play,
-  MoreVertical,
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  CalendarClock,
-  ListTodo,
-  AlertCircle,
-} from "lucide-react";
-
-type StatusFilter = "all" | "enabled" | "disabled";
+import { cn } from "@/shared/lib/utils";
 
-function matchQuery(job: CronJobView, query: string): boolean {
-  const q = query.trim().toLowerCase();
-  if (!q) return true;
-  const haystack = [
-    job.id,
-    job.name,
-    job.payload.message,
-    job.payload.sessionId ?? "",
-  ]
-    .join(" ")
-    .toLowerCase();
-  return haystack.includes(q);
-}
+const CRON_PAGE_SIZE = 10;
 
-function filterByStatus(job: CronJobView, status: StatusFilter): boolean {
-  if (status === "all") return true;
-  if (status === "enabled") return job.enabled;
-  return !job.enabled;
-}
+function CronSummaryStrip({
+  summary,
+}: {
+  readonly summary: CronListSummaryView;
+}) {
+  const { attention, disabled, enabled, total } = summary;
+  const metrics = [
+    { label: t("cronSummaryTotal"), value: total },
+    { label: t("cronSummaryEnabled"), value: enabled },
+    { label: t("cronSummaryPaused"), value: disabled },
+  ];
+  const AttentionIcon = attention > 0 ? CircleAlert : CircleCheck;
 
-function StatusBadge({ job }: { job: CronJobView }) {
   return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium",
-        job.enabled
-          ? "bg-emerald-50 text-emerald-700"
-          : "bg-muted text-muted-foreground",
-      )}
+    <section
+      aria-label={t("cronSummaryLabel")}
+      className="grid grid-cols-3 overflow-hidden rounded-2xl bg-border/60 sm:grid-cols-[minmax(220px,1.35fr)_repeat(3,minmax(100px,0.55fr))] sm:gap-px"
     >
-      <span
-        className={cn(
-          "h-1.5 w-1.5 rounded-full",
-          job.enabled ? "bg-emerald-500" : "bg-muted-foreground/50",
-        )}
-      />
-      {job.enabled ? t("enabled") : t("disabled")}
-    </span>
+      <div className="col-span-3 flex items-center gap-3 bg-muted/40 px-4 py-3.5 sm:col-span-1">
+        <span
+          className={cn(
+            "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+            attention > 0
+              ? "bg-amber-50 text-amber-600"
+              : "bg-emerald-50 text-emerald-600",
+          )}
+        >
+          <AttentionIcon className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <span className="min-w-0">
+          <strong className="block truncate text-xs font-semibold text-foreground">
+            {attention > 0
+              ? `${attention} ${t("cronAttentionSummary")}`
+              : t("cronAllHealthy")}
+          </strong>
+          <span className="mt-1 block truncate text-[11px] text-muted-foreground">
+            {attention > 0
+              ? t("cronAttentionSummaryHint")
+              : t("cronAllHealthyHint")}
+          </span>
+        </span>
+      </div>
+      {metrics.map((metric) => (
+        <div key={metric.label} className="bg-muted/40 px-4 py-3.5 sm:px-5">
+          <div className="text-lg font-semibold tabular-nums text-foreground">
+            {metric.value}
+          </div>
+          <div className="mt-1 text-[11px] text-muted-foreground">
+            {metric.label}
+          </div>
+        </div>
+      ))}
+    </section>
   );
 }
 
-function CronJobCard(props: {
-  job: CronJobView;
-  onDelete: (job: CronJobView) => void;
-  onRun: (job: CronJobView) => void;
-  onToggle: (job: CronJobView, nextEnabled: boolean) => void;
+function CronPagination({
+  page,
+  total,
+  disabled,
+  onPageChange,
+}: {
+  readonly page: number;
+  readonly total: number;
+  readonly disabled: boolean;
+  readonly onPageChange: (page: number) => void;
 }) {
-  const { job, onDelete, onRun, onToggle } = props;
-  const [expanded, setExpanded] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const handleCardClick = (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.closest("[data-no-expand]")) return;
-    setExpanded(!expanded);
-  };
+  const totalPages = Math.ceil(total / CRON_PAGE_SIZE);
+  if (totalPages <= 1) {
+    return null;
+  }
+  const rangeStart = page * CRON_PAGE_SIZE + 1;
+  const rangeEnd = Math.min(total, rangeStart + CRON_PAGE_SIZE - 1);
 
   return (
-    <div
-      className={cn(
-        "group overflow-hidden rounded-xl border border-border/70 bg-card transition-colors cursor-pointer",
-        expanded ? "bg-muted/20" : "hover:bg-muted/30",
-      )}
-      onClick={handleCardClick}
+    <nav
+      aria-label={t("cronPaginationLabel")}
+      className="flex items-center justify-between gap-3 border-b border-border/60 py-3 text-xs text-muted-foreground"
     >
-      <div className="px-3 py-2.5">
-        <div className="flex items-center gap-2.5">
-          <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-2">
-              {expanded ? (
-                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/50 shrink-0 group-hover:text-muted-foreground transition-colors" />
-              )}
-              <span className="text-sm font-medium text-foreground truncate">
-                {job.name || job.id}
-              </span>
-              <StatusBadge job={job} />
-              {job.deleteAfterRun ? (
-                <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                  {t("cronOneShot")}
-                </span>
-              ) : null}
-            </div>
-          </div>
-
-          <div className="flex items-center gap-1 shrink-0" data-no-expand>
-            <Switch
-              checked={job.enabled}
-              onCheckedChange={(checked) => onToggle(job, checked)}
-            />
-            <Popover open={menuOpen} onOpenChange={setMenuOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted"
-                  aria-label={t("cronMoreActions")}
-                >
-                  <MoreVertical className="h-4 w-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent align="end" sideOffset={4} className="w-40 p-1">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMenuOpen(false);
-                    onRun(job);
-                  }}
-                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-                >
-                  <Play className="h-3.5 w-3.5 text-muted-foreground" />
-                  {t("cronRunNow")}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMenuOpen(false);
-                    onDelete(job);
-                  }}
-                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                  {t("delete")}
-                </button>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-
-        <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground pl-6">
-          <span className="flex items-center gap-1">
-            <CalendarClock className="h-3 w-3 text-muted-foreground/70" />
-            <span className="font-mono text-foreground/80">
-              {describeCronSchedule(job)}
-            </span>
-          </span>
-          {job.state.nextRunAt ? (
-            <span className="flex items-center gap-1">
-              <Clock className="h-3 w-3 text-muted-foreground/70" />
-              <span>{formatRelativeTime(job.state.nextRunAt)}</span>
-            </span>
-          ) : null}
-          {job.state.lastRunAt ? (
-            <span className="flex items-center gap-1" data-no-expand>
-              <span className="text-border">•</span>
-              {job.state.lastStatus === "error" && job.state.lastError ? (
-                <TooltipProvider delayDuration={200}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="inline-flex items-center gap-0.5 text-orange-500 cursor-help">
-                        <AlertCircle className="h-3 w-3" />
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent
-                      side="top"
-                      align="start"
-                      className="max-w-xs text-xs bg-red-50 text-red-700 border-red-200"
-                    >
-                      {job.state.lastError}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              ) : (
-                <span
-                  className={cn(
-                    job.state.lastStatus === "ok"
-                      ? "text-emerald-500"
-                      : "text-muted-foreground/70",
-                  )}
-                >
-                  {job.state.lastStatus === "ok" ? "✓" : ""}
-                </span>
-              )}
-              <span>{formatRelativeTime(job.state.lastRunAt)}</span>
-            </span>
-          ) : null}
-        </div>
-
-        <div className="mt-2 pl-6">
-          <div
-            className={cn(
-              "text-sm text-muted-foreground break-words",
-              !expanded && "line-clamp-2",
-            )}
-          >
-            {job.payload.message}
-          </div>
-        </div>
-
-        {expanded ? (
-          <div className="mt-3 ml-6 space-y-3 border-t border-border/60 pt-3">
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2 text-xs">
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronSessionLabel")}
-                </div>
-                <div
-                  className="text-foreground/80 font-mono text-[11px] truncate"
-                  title={describeCronSession(job)}
-                >
-                  {describeCronSession(job)}
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronNextRun")}
-                </div>
-                <div className="text-foreground/80">
-                  {formatCronDate(job.state.nextRunAt)}
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronLastRun")}
-                </div>
-                <div className="text-foreground/80">
-                  {formatCronDate(job.state.lastRunAt)}
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronLastStatus")}
-                </div>
-                <div
-                  className={cn(
-                    "inline-flex items-center gap-1 font-medium",
-                    job.state.lastStatus === "ok"
-                      ? "text-emerald-600"
-                      : job.state.lastStatus === "error"
-                        ? "text-red-600"
-                        : job.state.lastStatus === "skipped"
-                          ? "text-amber-600"
-                          : "text-muted-foreground",
-                  )}
-                >
-                  {job.state.lastStatus ?? "-"}
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronCreatedAt")}
-                </div>
-                <div className="text-foreground/80">
-                  {formatCronDate(job.createdAt)}
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
-                  {t("cronId")}
-                </div>
-                <div
-                  className="text-foreground/80 font-mono text-[11px] truncate"
-                  title={job.id}
-                >
-                  {job.id}
-                </div>
-              </div>
-            </div>
-
-            {job.state.lastError ? (
-              <div className="rounded-lg bg-red-50/80 border border-red-100 px-3 py-2 text-xs text-red-600 break-words">
-                {job.state.lastError}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
+      <span className="tabular-nums">
+        {rangeStart}–{rangeEnd} / {total}
+      </span>
+      <div className="flex items-center gap-1.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          disabled={disabled || page === 0}
+          onClick={() => onPageChange(page - 1)}
+          aria-label={t("cronPreviousPage")}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <span className="min-w-14 text-center tabular-nums text-foreground">
+          {page + 1} / {totalPages}
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          disabled={disabled || page >= totalPages - 1}
+          onClick={() => onPageChange(page + 1)}
+          aria-label={t("cronNextPage")}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
       </div>
-    </div>
+    </nav>
   );
 }
 
 export function CronConfig() {
+  const [composerPrompt, setComposerPrompt] = useState("");
   const [query, setQuery] = useState("");
-  const [status, setStatus] = useState<StatusFilter>("all");
-  const cronQuery = useCronJobs({ all: true });
+  const [status, setStatus] = useState<CronListStatus>("all");
+  const [page, setPage] = useState(0);
+  const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const deferredQuery = useDeferredValue(query.trim());
+  const composerRef = useRef<HTMLInputElement>(null);
+  const presenter = usePresenter();
+  const cronQuery = useCronJobs({
+    all: true,
+    limit: CRON_PAGE_SIZE,
+    offset: page * CRON_PAGE_SIZE,
+    query: deferredQuery,
+    status,
+  });
   const deleteCronJob = useDeleteCronJob();
   const toggleCronJob = useToggleCronJob();
   const runCronJob = useRunCronJob();
   const { confirm, ConfirmDialog } = useConfirmDialog();
+  const jobs = cronQuery.data?.jobs ?? [];
+  const total = cronQuery.data?.total ?? 0;
+  const summary = cronQuery.data?.summary;
+  const selectedJob = jobs.find((job) => job.id === selectedJobId) ?? null;
 
-  const jobs = useMemo(() => {
-    const data = cronQuery.data?.jobs ?? [];
-    return data
-      .filter((job) => matchQuery(job, query))
-      .filter((job) => filterByStatus(job, status));
-  }, [cronQuery.data, query, status]);
+  const startDraftConversation = () => {
+    const prompt = composerPrompt.trim();
+    if (!prompt) {
+      composerRef.current?.focus();
+      return;
+    }
+    presenter.chatSessionListManager.createSession({ prompt });
+  };
+
+  const handleTemplateSelect = (prompt: string) => {
+    setComposerPrompt(prompt);
+    composerRef.current?.focus();
+  };
 
   const handleDelete = async (job: CronJobView) => {
     const confirmed = await confirm({
@@ -348,12 +197,24 @@ export function CronConfig() {
       variant: "destructive",
       confirmLabel: t("delete"),
     });
-    if (!confirmed) return;
+    if (!confirmed) {
+      return;
+    }
+    setExpandedJobId(null);
+    setSelectedJobId(null);
+    if (jobs.length === 1 && page > 0) {
+      setPage(page - 1);
+    }
     deleteCronJob.mutate({ id: job.id });
   };
 
-  const handleToggle = (job: CronJobView, nextEnabled: boolean) => {
-    toggleCronJob.mutate({ id: job.id, enabled: nextEnabled });
+  const handleToggle = (job: CronJobView, enabled: boolean) => {
+    const leavesCurrentFilter =
+      (status === "enabled" && !enabled) || (status === "disabled" && enabled);
+    if (leavesCurrentFilter && jobs.length === 1 && page > 0) {
+      setPage(page - 1);
+    }
+    toggleCronJob.mutate({ id: job.id, enabled });
   };
 
   const handleRun = async (job: CronJobView) => {
@@ -364,98 +225,241 @@ export function CronConfig() {
         description: job.name ? `${job.name} (${job.id})` : job.id,
         confirmLabel: t("cronRunNow"),
       });
-      if (!confirmed) return;
+      if (!confirmed) {
+        return;
+      }
     }
     runCronJob.mutate({ id: job.id, force });
   };
 
+  const handleOpenSession = (job: CronJobView) => {
+    presenter.chatSessionListManager.selectSession(describeCronSession(job));
+  };
+
+  const handlePageChange = (nextPage: number) => {
+    setExpandedJobId(null);
+    setPage(nextPage);
+  };
+
+  const handleToggleExpanded = (job: CronJobView) => {
+    setExpandedJobId((currentId) => (currentId === job.id ? null : job.id));
+  };
+
+  const hasTasks = (summary?.total ?? 0) > 0;
+
   return (
-    <PageLayout fullHeight>
-      <PageHeader
-        title={t("cronPageTitle")}
-        description={t("cronPageDescription")}
-        actions={
+    <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 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted"
-            onClick={() => cronQuery.refetch()}
+            className="h-8 w-8"
+            onClick={() => {
+              if (page === 0) {
+                setExpandedJobId(null);
+                void cronQuery.refetch();
+              } else {
+                handlePageChange(0);
+              }
+            }}
+            aria-label={t("refresh")}
           >
             <RefreshCw
               className={cn("h-4 w-4", cronQuery.isFetching && "animate-spin")}
             />
           </Button>
-        }
-      />
+        </div>
+      </header>
 
-      <div className="mb-4">
-        <div className="flex flex-wrap gap-2.5 items-center">
-          <div className="relative flex-1 min-w-[240px]">
-            <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" />
-            <Input
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder={t("cronSearchPlaceholder")}
-              className="pl-9"
-            />
-          </div>
-          <div className="min-w-[140px]">
-            <Select
-              value={status}
-              onValueChange={(value) => setStatus(value as StatusFilter)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder={t("cronStatusLabel")} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t("cronStatusAll")}</SelectItem>
-                <SelectItem value="enabled">
-                  {t("cronStatusEnabled")}
-                </SelectItem>
-                <SelectItem value="disabled">
-                  {t("cronStatusDisabled")}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="text-xs text-muted-foreground ml-auto tabular-nums">
-            {jobs.length} / {cronQuery.data?.total ?? 0}
-          </div>
+      {hasTasks ? (
+        <CronTaskComposer
+          ref={composerRef}
+          value={composerPrompt}
+          onChange={setComposerPrompt}
+          onSubmit={startDraftConversation}
+        />
+      ) : null}
+
+      {cronQuery.isLoading ? (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <RefreshCw className="mb-3 h-5 w-5 animate-spin" />
+          <span className="text-sm">{t("cronLoading")}</span>
         </div>
-      </div>
+      ) : hasTasks ? (
+        <>
+          {summary ? <CronSummaryStrip summary={summary} /> : null}
 
-      <div className="flex-1 overflow-auto custom-scrollbar">
-        {cronQuery.isLoading ? (
-          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-            <RefreshCw className="h-5 w-5 animate-spin mb-3" />
-            <span className="text-sm">{t("cronLoading")}</span>
-          </div>
-        ) : jobs.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-            <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-muted">
-              <ListTodo className="h-5 w-5 text-muted-foreground/70" />
+          <section className="pt-1">
+            <div className="mb-3 flex items-end justify-between gap-4">
+              <div>
+                <h2 className="text-base font-semibold text-foreground">
+                  {t("cronMyTasks")}
+                </h2>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {total} {t("cronTaskCountUnit")}
+                </p>
+              </div>
             </div>
-            <span className="text-sm font-medium text-foreground">
-              {t("cronEmpty")}
-            </span>
-            <span className="text-xs text-muted-foreground mt-1">
-              {t("cronEmptyGuide")}
+            <div className="mb-2 flex flex-wrap items-center justify-between gap-2.5">
+              <div className="relative min-w-[220px] flex-1">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" />
+                <Input
+                  value={query}
+                  onChange={(event) => {
+                    setQuery(event.target.value);
+                    handlePageChange(0);
+                  }}
+                  placeholder={t("cronSearchPlaceholder")}
+                  className="pl-9"
+                />
+              </div>
+              <div
+                className="flex flex-wrap items-center gap-1"
+                aria-label={t("cronStatusLabel")}
+              >
+                {(
+                  [
+                    ["all", "cronStatusAll"],
+                    ["enabled", "cronStatusEnabled"],
+                    ["disabled", "cronStatusDisabled"],
+                    ["attention", "cronStatusAttention"],
+                  ] as const
+                ).map(([value, label]) => (
+                  <button
+                    key={value}
+                    type="button"
+                    aria-pressed={status === value}
+                    onClick={() => {
+                      setStatus(value);
+                      handlePageChange(0);
+                    }}
+                    className={cn(
+                      "rounded-lg px-2.5 py-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      status === value && "bg-muted text-foreground",
+                    )}
+                  >
+                    {t(label)}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {jobs.length > 0 ? (
+              <>
+                <div
+                  aria-busy={cronQuery.isFetching}
+                  className={cn(
+                    "border-y border-border/60 transition-opacity",
+                    cronQuery.isFetching && "opacity-60",
+                  )}
+                >
+                  {jobs.map((job) => (
+                    <CronJobRow
+                      key={job.id}
+                      expanded={expandedJobId === job.id}
+                      job={job}
+                      onDelete={handleDelete}
+                      onEdit={(item) => setSelectedJobId(item.id)}
+                      onRun={handleRun}
+                      onToggleExpanded={handleToggleExpanded}
+                      onToggle={handleToggle}
+                    />
+                  ))}
+                </div>
+                <CronPagination
+                  page={page}
+                  total={total}
+                  disabled={cronQuery.isFetching}
+                  onPageChange={handlePageChange}
+                />
+              </>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground">
+                <Search className="mb-3 h-5 w-5" />
+                <span className="text-sm font-medium text-foreground">
+                  {t("cronNoMatchingTasks")}
+                </span>
+                <span className="mt-1 text-xs">
+                  {t("cronNoMatchingTasksHint")}
+                </span>
+              </div>
+            )}
+          </section>
+
+          <section className="pt-2">
+            <div className="mb-3">
+              <h2 className="text-base font-semibold text-foreground">
+                {t("cronNeedInspiration")}
+              </h2>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {t("cronTemplateSelectionHint")}
+              </p>
+            </div>
+            <CronTemplateGallery compact onSelect={handleTemplateSelect} />
+          </section>
+        </>
+      ) : (
+        <>
+          <section className="flex min-h-[270px] flex-col items-center justify-center rounded-3xl bg-muted/25 px-4 py-10 text-center sm:px-8">
+            <span className="mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-card shadow-sm">
+              <ListTodo className="h-5 w-5 text-primary" />
             </span>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {jobs.map((job) => (
-              <CronJobCard
-                key={job.id}
-                job={job}
-                onDelete={handleDelete}
-                onRun={handleRun}
-                onToggle={handleToggle}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+            <h2 className="text-xl font-semibold text-foreground">
+              {t("cronEmptyHeroTitle")}
+            </h2>
+            <p className="mb-6 mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
+              {t("cronEmptyHeroDescription")}
+            </p>
+            <CronTaskComposer
+              ref={composerRef}
+              prominent
+              value={composerPrompt}
+              onChange={setComposerPrompt}
+              onSubmit={startDraftConversation}
+            />
+            <p className="mt-3 text-xs text-muted-foreground">
+              {t("cronComposerHint")}
+            </p>
+          </section>
+          <section>
+            <div className="mb-3">
+              <h2 className="text-base font-semibold text-foreground">
+                {t("cronStartFromResult")}
+              </h2>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {t("cronTemplateSelectionHint")}
+              </p>
+            </div>
+            <CronTemplateGallery onSelect={handleTemplateSelect} />
+          </section>
+        </>
+      )}
+
+      <CronJobDetailDialog
+        job={selectedJob}
+        open={Boolean(selectedJob)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedJobId(null);
+          }
+        }}
+        onDelete={handleDelete}
+        onOpenSession={handleOpenSession}
+        onRun={handleRun}
+        onToggle={handleToggle}
+      />
       <ConfirmDialog />
     </PageLayout>
   );