diff --git a/frontend/src/app/workspace/scheduled-tasks/new/page.tsx b/frontend/src/app/workspace/scheduled-tasks/new/page.tsx
new file mode 100644
index 00000000000..dfc9a2aa96b
--- /dev/null
+++ b/frontend/src/app/workspace/scheduled-tasks/new/page.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { ArrowLeftIcon, CalendarClock, TriangleAlertIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ScheduledTaskScheduleInput,
+  type ScheduleValue,
+} from "@/components/workspace/scheduled-task-schedule-input";
+import { useI18n } from "@/core/i18n/hooks";
+import { fetchScheduledTasks } from "@/core/scheduled-tasks/api";
+import {
+  clearDuplicateDraft,
+  draftFromScheduledTask,
+  getSessionDuplicateDraftStorage,
+  readDuplicateDraft,
+  resolveCreateContextMode,
+  type DuplicateDraft,
+} from "@/core/scheduled-tasks/duplicate-draft";
+import { useCreateScheduledTask } from "@/core/scheduled-tasks/hooks";
+import type { ScheduledTask } from "@/core/scheduled-tasks/types";
+
+function ReuseThreadNotice({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <Alert className="border-amber-500/50 bg-amber-500/10">
+      <TriangleAlertIcon className="text-amber-600 dark:text-amber-400" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  );
+}
+
+function scheduleFromDraft(draft: DuplicateDraft): ScheduleValue {
+  const spec = draft.schedule_spec as { cron?: string; run_at?: string };
+  if (draft.schedule_type === "once") {
+    return {
+      schedule_type: "once",
+      schedule_spec: spec.run_at ? { run_at: spec.run_at } : {},
+      timezone: draft.timezone ?? "",
+    };
+  }
+  return {
+    schedule_type: "cron",
+    schedule_spec: { cron: spec.cron ?? "0 9 * * *" },
+    timezone: draft.timezone ?? "",
+  };
+}
+
+export default function NewScheduledTaskPage() {
+  const { t } = useI18n();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const sourceTaskId = searchParams.get("from");
+  const initialThreadId = searchParams.get("thread_id");
+  const initialContextMode = searchParams.get("context_mode");
+  const st = t.scheduledTasks;
+  const createTask = useCreateScheduledTask();
+  const [contextMode, setContextMode] = useState<
+    "fresh_thread_per_run" | "reuse_thread"
+  >(() =>
+    resolveCreateContextMode({
+      contextModeParam: initialContextMode,
+      threadIdParam: sourceTaskId ? null : initialThreadId,
+    }),
+  );
+  const [targetThreadId, setTargetThreadId] = useState(
+    sourceTaskId ? "" : (initialThreadId ?? ""),
+  );
+  const [title, setTitle] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [createSchedule, setCreateSchedule] = useState<ScheduleValue>({
+    schedule_type: "cron",
+    schedule_spec: { cron: "0 9 * * *" },
+    timezone: "",
+  });
+  const [sourceStatus, setSourceStatus] = useState<
+    "idle" | "loading" | "ready" | "missing"
+  >(sourceTaskId ? "loading" : "idle");
+
+  const applyDraft = (draft: DuplicateDraft) => {
+    setTitle(draft.title);
+    setPrompt(draft.prompt);
+    setContextMode(draft.context_mode);
+    setTargetThreadId(draft.thread_id ?? "");
+    setCreateSchedule(scheduleFromDraft(draft));
+    setSourceStatus("ready");
+  };
+
+  useEffect(() => {
+    if (!sourceTaskId) {
+      return;
+    }
+    let cancelled = false;
+    const applyIfCurrent = (draft: DuplicateDraft) => {
+      if (!cancelled) {
+        applyDraft(draft);
+      }
+    };
+
+    const sessionDraft = readDuplicateDraft(
+      getSessionDuplicateDraftStorage(),
+      sourceTaskId,
+    );
+    if (sessionDraft) {
+      applyIfCurrent(sessionDraft);
+      clearDuplicateDraft(getSessionDuplicateDraftStorage(), sourceTaskId);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    const cached = queryClient
+      .getQueryData<ScheduledTask[]>(["scheduled-tasks"])
+      ?.find((task) => task.id === sourceTaskId);
+    if (cached) {
+      applyIfCurrent(
+        draftFromScheduledTask(cached, st.actions.duplicateTitleSuffix),
+      );
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    void fetchScheduledTasks()
+      .then((tasks) => {
+        const found = tasks.find((task) => task.id === sourceTaskId);
+        if (!found) {
+          if (!cancelled) {
+            setSourceStatus("missing");
+          }
+          return;
+        }
+        applyIfCurrent(
+          draftFromScheduledTask(found, st.actions.duplicateTitleSuffix),
+        );
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSourceStatus("missing");
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [queryClient, sourceTaskId, st.actions.duplicateTitleSuffix]);
+
+  const listHref = initialThreadId
+    ? `/workspace/scheduled-tasks?thread_id=${encodeURIComponent(initialThreadId)}`
+    : "/workspace/scheduled-tasks";
+
+  const successHref =
+    contextMode === "reuse_thread" && targetThreadId
+      ? `/workspace/scheduled-tasks?thread_id=${encodeURIComponent(targetThreadId)}`
+      : "/workspace/scheduled-tasks";
+
+  const handleCreate = () => {
+    createTask.mutate(
+      {
+        context_mode: contextMode,
+        thread_id: contextMode === "reuse_thread" ? targetThreadId : null,
+        title,
+        prompt,
+        schedule_type: createSchedule.schedule_type,
+        schedule_spec: createSchedule.schedule_spec,
+        timezone: createSchedule.timezone || "UTC",
+      },
+      { onSuccess: () => router.push(successHref) },
+    );
+  };
+
+  return (
+    <div className="flex size-full flex-col">
+      <header className="flex shrink-0 items-center justify-between gap-3 border-b px-4 py-3">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label={st.create.back}
+            title={st.create.back}
+            onClick={() => router.push(listHref)}
+          >
+            <ArrowLeftIcon className="h-4 w-4" />
+          </Button>
+          <h1 className="text-sm font-semibold">{st.create.title}</h1>
+        </div>
+      </header>
+      <main className="flex flex-1 justify-center overflow-y-auto px-4 py-6">
+        <div
+          className="my-auto w-full max-w-xl space-y-4"
+          data-testid="scheduled-task-create-form"
+        >
+          <div className="space-y-3 pb-2 text-center">
+            <div className="bg-primary/10 mx-auto flex h-14 w-14 items-center justify-center rounded-full">
+              <CalendarClock className="text-primary h-7 w-7" />
+            </div>
+            <div className="space-y-1">
+              <h2 className="text-xl font-semibold">{st.create.title}</h2>
+              <p className="text-muted-foreground text-sm">{st.description}</p>
+            </div>
+          </div>
+          {sourceStatus === "missing" && (
+            <div className="text-destructive text-sm">
+              {st.create.sourceMissing}
+            </div>
+          )}
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant={
+                contextMode === "fresh_thread_per_run" ? "default" : "outline"
+              }
+              size="sm"
+              onClick={() => setContextMode("fresh_thread_per_run")}
+            >
+              {st.context.fresh}
+            </Button>
+            <Button
+              type="button"
+              variant={contextMode === "reuse_thread" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setContextMode("reuse_thread")}
+            >
+              {st.context.reuse}
+            </Button>
+          </div>
+          {contextMode === "reuse_thread" && (
+            <>
+              <Input
+                value={targetThreadId}
+                onChange={(event) => setTargetThreadId(event.target.value)}
+                placeholder={st.context.threadIdPlaceholder}
+              />
+              <ReuseThreadNotice
+                title={st.context.reuseNoticeTitle}
+                description={st.context.reuseNoticeDescription}
+              />
+            </>
+          )}
+          <Input
+            autoFocus
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder={st.create.taskTitle}
+          />
+          <Textarea
+            rows={4}
+            value={prompt}
+            onChange={(event) => setPrompt(event.target.value)}
+            placeholder={st.create.prompt}
+          />
+          <ScheduledTaskScheduleInput
+            key={
+              sourceTaskId
+                ? `${sourceTaskId}:${createSchedule.schedule_type}:${JSON.stringify(createSchedule.schedule_spec)}`
+                : "new"
+            }
+            initial={createSchedule}
+            onChange={setCreateSchedule}
+          />
+          {createSchedule.schedule_type === "once" &&
+            !createSchedule.schedule_spec.run_at && (
+              <div className="text-muted-foreground text-sm">
+                {st.create.invalidOnce}
+              </div>
+            )}
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              onClick={() => router.push(listHref)}
+              disabled={createTask.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              onClick={handleCreate}
+              disabled={
+                sourceStatus === "loading" ||
+                sourceStatus === "missing" ||
+                !title ||
+                !prompt ||
+                (!createSchedule.schedule_spec.cron &&
+                  !createSchedule.schedule_spec.run_at) ||
+                (contextMode === "reuse_thread" && !targetThreadId) ||
+                createTask.isPending
+              }
+            >
+              {createTask.isPending ? t.common.loading : st.create.submit}
+            </Button>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/app/workspace/scheduled-tasks/page.tsx b/frontend/src/app/workspace/scheduled-tasks/page.tsx
index 45dddd5a084..8102cf95fd1 100644
--- a/frontend/src/app/workspace/scheduled-tasks/page.tsx
+++ b/frontend/src/app/workspace/scheduled-tasks/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { CopyIcon, TriangleAlertIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { CalendarClock, CopyIcon, Plus, TriangleAlertIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -23,11 +23,15 @@ import {
 import {
   WorkspaceBody,
   WorkspaceContainer,
-  WorkspaceHeader,
 } from "@/components/workspace/workspace-container";
 import { useI18n } from "@/core/i18n/hooks";
+import type { Translations } from "@/core/i18n/locales/types";
+import {
+  draftFromScheduledTask,
+  getSessionDuplicateDraftStorage,
+  writeDuplicateDraft,
+} from "@/core/scheduled-tasks/duplicate-draft";
 import {
-  useCreateScheduledTask,
   useUpdateScheduledTask,
   useDeleteScheduledTask,
   usePauseScheduledTask,
@@ -37,7 +41,6 @@ import {
   useTriggerScheduledTask,
   useThreadScheduledTasks,
 } from "@/core/scheduled-tasks/hooks";
-import { RECIPES, type Recipe } from "@/core/scheduled-tasks/recipes";
 import type {
   ScheduledTask,
   ScheduledTaskRun,
@@ -70,8 +73,6 @@ function formatTimestamp(value: string | null, locale: string): string {
   if (Number.isNaN(date.getTime())) {
     return value;
   }
-  // Use a locale-aware short format like "2026-07-03 09:00". Future timestamps
-  // (next_run_at) render as an absolute time, not a relative "ago" string.
   const intlLocale = locale === "zh-CN" ? "zh-CN" : "en-US";
   return new Intl.DateTimeFormat(intlLocale, {
     year: "numeric",
@@ -82,33 +83,50 @@ function formatTimestamp(value: string | null, locale: string): string {
   }).format(date);
 }
 
+const STATUS_DOT: Record<string, string> = {
+  enabled: "bg-emerald-500",
+  running: "bg-sky-500",
+  paused: "bg-amber-500",
+  completed: "bg-zinc-400",
+  failed: "bg-rose-500",
+  cancelled: "bg-zinc-400",
+};
+
+function StatusBadge({
+  status,
+  statusLabel,
+}: {
+  status: string;
+  statusLabel: (v: string) => string;
+}) {
+  const dot = STATUS_DOT[status] ?? "bg-zinc-400";
+  return (
+    <span className="text-muted-foreground inline-flex h-5 items-center gap-1.5 rounded-full border px-2 text-xs font-medium">
+      <span aria-hidden className={cn("size-1.5 rounded-full", dot)} />
+      {statusLabel(status)}
+    </span>
+  );
+}
+
 export default function ScheduledTasksPage() {
   const { t, locale } = useI18n();
   const st = t.scheduledTasks;
+  const router = useRouter();
   const searchParams = useSearchParams();
   const threadId = searchParams.get("thread_id");
   const allTasksQuery = useScheduledTasks();
   const threadTasksQuery = useThreadScheduledTasks(threadId);
   const data = threadId ? threadTasksQuery.data : allTasksQuery.data;
   const queryError = threadId ? threadTasksQuery.error : allTasksQuery.error;
-  const [deleteOpen, setDeleteOpen] = useState(false);
+  const isLoading = threadId
+    ? threadTasksQuery.isPending
+    : allTasksQuery.isPending;
+  const [detailOpen, setDetailOpen] = useState(false);
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
-  const [contextMode, setContextMode] = useState<
-    "fresh_thread_per_run" | "reuse_thread"
-  >(threadId ? "reuse_thread" : "fresh_thread_per_run");
-  const [targetThreadId, setTargetThreadId] = useState(threadId ?? "");
-  const [title, setTitle] = useState("");
-  const [prompt, setPrompt] = useState("");
-  const [createSchedule, setCreateSchedule] = useState<ScheduleValue>({
-    schedule_type: "cron",
-    schedule_spec: { cron: "0 9 * * *" },
-    timezone: "",
-  });
+  const [deleteOpen, setDeleteOpen] = useState(false);
   const [statusFilter, setStatusFilter] = useState<
     "all" | "enabled" | "paused" | "running" | "completed" | "failed"
   >("all");
-  const [typeFilter, setTypeFilter] = useState<"all" | "once" | "cron">("all");
-  const [formError, setFormError] = useState<string | null>(null);
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState("");
   const [editPrompt, setEditPrompt] = useState("");
@@ -117,18 +135,13 @@ export default function ScheduledTasksPage() {
     schedule_spec: { cron: "0 9 * * *" },
     timezone: "UTC",
   });
-  const [createNonce, setCreateNonce] = useState(0);
-  const createFormRef = useRef<HTMLDivElement>(null);
-  const createTitleRef = useRef<HTMLInputElement>(null);
+  const hasTasks = (data ?? []).length > 0;
   const filteredData = (data ?? []).filter((task) => {
-    const statusPass = statusFilter === "all" || task.status === statusFilter;
-    const typePass = typeFilter === "all" || task.schedule_type === typeFilter;
-    return statusPass && typePass;
+    return statusFilter === "all" || task.status === statusFilter;
   });
   const selectedTask =
-    filteredData.find((task) => task.id === selectedTaskId) ?? filteredData[0];
+    filteredData.find((task) => task.id === selectedTaskId) ?? null;
   const taskRunsQuery = useScheduledTaskRuns(selectedTask?.id);
-  const createTask = useCreateScheduledTask();
   const updateTask = useUpdateScheduledTask(selectedTask?.id ?? "");
   const pauseTask = usePauseScheduledTask();
   const resumeTask = useResumeScheduledTask();
@@ -153,37 +166,8 @@ export default function ScheduledTasksPage() {
     (st.runTrigger as Record<string, string>)[v] ?? v;
   const runStatusLabel = (v: string) =>
     (st.runStatus as Record<string, string>)[v] ?? v;
-  const taskSummary = (task: ScheduledTask) =>
-    `${scheduleTypeLabel(task.schedule_type)} · ${statusLabel(task.status)}`;
   const runSummary = (run: ScheduledTaskRun) =>
     `${runTriggerLabel(run.trigger)} · ${runStatusLabel(run.status)}`;
-  const applyRecipe = (recipe: Recipe) => {
-    const labels = st.recipes[recipe.titleKey];
-    setTitle(labels.title);
-    setPrompt(recipe.prompt);
-    setCreateSchedule(recipe.schedule);
-    setContextMode("fresh_thread_per_run");
-    setCreateNonce((n) => n + 1);
-  };
-  const duplicateTask = (task: ScheduledTask) => {
-    setTitle(`${task.title}${st.actions.duplicateTitleSuffix}`);
-    setPrompt(task.prompt);
-    setContextMode(task.context_mode);
-    setTargetThreadId(task.thread_id ?? "");
-    setCreateSchedule({
-      schedule_type: task.schedule_type,
-      schedule_spec: { ...task.schedule_spec },
-      timezone: task.timezone,
-    });
-    setFormError(null);
-    setCreateNonce((nonce) => nonce + 1);
-    createFormRef.current?.scrollIntoView({
-      behavior: "smooth",
-      block: "start",
-    });
-    createTitleRef.current?.focus();
-  };
-
   useEffect(() => {
     document.title = `${t.sidebar.scheduledTasks} - ${t.pages.appName}`;
   }, [t.pages.appName, t.sidebar.scheduledTasks]);
@@ -196,7 +180,8 @@ export default function ScheduledTasksPage() {
       (task) => task.id === selectedTaskId,
     );
     if (!stillVisible) {
-      setSelectedTaskId(filteredData[0]?.id ?? null);
+      setSelectedTaskId(null);
+      setDetailOpen(false);
       setEditing(false);
     }
   }, [filteredData, selectedTaskId]);
@@ -220,150 +205,63 @@ export default function ScheduledTasksPage() {
       },
       timezone: selectedTask.timezone || "UTC",
     });
-    // Depend on id only so a background refetch (same task, new object reference)
-    // does not wipe edits in progress.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTask?.id]);
 
+  const createHref = threadId
+    ? `/workspace/scheduled-tasks/new?thread_id=${encodeURIComponent(threadId)}`
+    : "/workspace/scheduled-tasks/new";
+
+  const duplicateSelectedTask = () => {
+    if (!selectedTask) {
+      return;
+    }
+    writeDuplicateDraft(
+      getSessionDuplicateDraftStorage(),
+      selectedTask.id,
+      draftFromScheduledTask(selectedTask, st.actions.duplicateTitleSuffix),
+    );
+    const params = new URLSearchParams();
+    params.set("from", selectedTask.id);
+    if (threadId) {
+      params.set("thread_id", threadId);
+    }
+    setDetailOpen(false);
+    router.push(`/workspace/scheduled-tasks/new?${params.toString()}`);
+  };
+
+  const statusFilters = [
+    { id: "enabled" as const, label: st.filters.enabled },
+    { id: "paused" as const, label: st.filters.paused },
+  ];
+
+  const openDetail = (taskId: string) => {
+    setSelectedTaskId(taskId);
+    setDetailOpen(true);
+  };
+
   return (
     <WorkspaceContainer>
-      <WorkspaceHeader />
+      <header className="flex items-center justify-between border-b px-6 py-4">
+        <div>
+          <h1 className="text-xl font-semibold">{st.title}</h1>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            {st.description}
+          </p>
+        </div>
+        <Button
+          size="sm"
+          onClick={() => router.push(createHref)}
+          data-testid="scheduled-task-create-toggle"
+        >
+          <Plus className="mr-1.5 h-4 w-4" />
+          {st.create.title}
+        </Button>
+      </header>
       <WorkspaceBody>
-        <div className="mx-auto flex w-full max-w-(--container-width-md) flex-col gap-4 p-6">
-          <h1 className="text-2xl font-semibold">{t.sidebar.scheduledTasks}</h1>
-          <div
-            ref={createFormRef}
-            className="grid gap-2 rounded-lg border p-4"
-            data-testid="scheduled-task-create-form"
-          >
-            <div className="font-medium">{st.create.title}</div>
-            <div
-              className="flex flex-wrap items-center gap-1"
-              data-testid="schedule-recipes"
-            >
-              <span className="text-muted-foreground text-sm">
-                {st.recipes.label}:
-              </span>
-              {RECIPES.map((recipe) => (
-                <Button
-                  key={recipe.id}
-                  variant="outline"
-                  size="sm"
-                  onClick={() => applyRecipe(recipe)}
-                >
-                  <span aria-hidden>{recipe.icon}</span>
-                  {st.recipes[recipe.titleKey].title}
-                </Button>
-              ))}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant={
-                  contextMode === "fresh_thread_per_run" ? "default" : "outline"
-                }
-                size="sm"
-                onClick={() => setContextMode("fresh_thread_per_run")}
-              >
-                {st.context.fresh}
-              </Button>
-              <Button
-                variant={contextMode === "reuse_thread" ? "default" : "outline"}
-                size="sm"
-                onClick={() => setContextMode("reuse_thread")}
-              >
-                {st.context.reuse}
-              </Button>
-            </div>
-            {contextMode === "reuse_thread" && (
-              <>
-                <Input
-                  value={targetThreadId}
-                  onChange={(event) => setTargetThreadId(event.target.value)}
-                  placeholder={st.context.threadIdPlaceholder}
-                />
-                <ReuseThreadNotice
-                  title={st.context.reuseNoticeTitle}
-                  description={st.context.reuseNoticeDescription}
-                />
-              </>
-            )}
-            <Input
-              ref={createTitleRef}
-              value={title}
-              onChange={(event) => setTitle(event.target.value)}
-              placeholder={st.create.taskTitle}
-            />
-            <Textarea
-              rows={4}
-              value={prompt}
-              onChange={(event) => setPrompt(event.target.value)}
-              placeholder={st.create.prompt}
-            />
-            <ScheduledTaskScheduleInput
-              key={createNonce}
-              initial={createSchedule}
-              onChange={setCreateSchedule}
-            />
-            {formError && (
-              <div className="text-destructive text-sm">{formError}</div>
-            )}
-            <Button
-              onClick={() => {
-                const hasSchedule =
-                  Boolean(createSchedule.schedule_spec.cron) ||
-                  Boolean(createSchedule.schedule_spec.run_at);
-                if (
-                  !title ||
-                  !prompt ||
-                  !hasSchedule ||
-                  (contextMode === "reuse_thread" && !targetThreadId)
-                ) {
-                  setFormError(st.create.fillRequired);
-                  return;
-                }
-                setFormError(null);
-                createTask.mutate(
-                  {
-                    context_mode: contextMode,
-                    thread_id:
-                      contextMode === "reuse_thread" ? targetThreadId : null,
-                    title,
-                    prompt,
-                    schedule_type: createSchedule.schedule_type,
-                    schedule_spec: createSchedule.schedule_spec,
-                    timezone: createSchedule.timezone || "UTC",
-                  },
-                  {
-                    onSuccess: () => {
-                      // Clear the form so a follow-up task starts fresh.
-                      setTitle("");
-                      setPrompt("");
-                      setTargetThreadId("");
-                      setContextMode("fresh_thread_per_run");
-                      setCreateSchedule({
-                        schedule_type: "cron",
-                        schedule_spec: { cron: "0 9 * * *" },
-                        timezone: "",
-                      });
-                      setCreateNonce((n) => n + 1);
-                    },
-                  },
-                );
-              }}
-              disabled={
-                !title ||
-                !prompt ||
-                (!createSchedule.schedule_spec.cron &&
-                  !createSchedule.schedule_spec.run_at) ||
-                (contextMode === "reuse_thread" && !targetThreadId) ||
-                createTask.isPending
-              }
-            >
-              {st.create.submit}
-            </Button>
-          </div>
+        <div className="mx-auto w-full max-w-(--container-width-md) p-6">
           {threadId && (
-            <div className="text-muted-foreground text-sm">
+            <div className="text-muted-foreground mb-4 text-sm">
               {st.detail.filteredByThread.replace("{id}", threadId)}
             </div>
           )}
@@ -375,268 +273,127 @@ export default function ScheduledTasksPage() {
               {st.detail.loadFailed}: {queryError.message}
             </div>
           ) : null}
-          <div className="flex flex-wrap gap-2">
-            <Button
-              variant={statusFilter === "all" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setStatusFilter("all")}
-            >
-              {st.filters.allStatuses}
-            </Button>
-            <Button
-              variant={statusFilter === "enabled" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setStatusFilter("enabled")}
-            >
-              {st.filters.enabled}
-            </Button>
-            <Button
-              variant={statusFilter === "paused" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setStatusFilter("paused")}
-            >
-              {st.filters.paused}
-            </Button>
-            <Button
-              variant={statusFilter === "completed" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setStatusFilter("completed")}
-            >
-              {st.filters.completed}
-            </Button>
-            <Button
-              variant={statusFilter === "failed" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setStatusFilter("failed")}
-            >
-              {st.filters.failed}
-            </Button>
-            <Button
-              variant={typeFilter === "all" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setTypeFilter("all")}
-            >
-              {st.filters.allTypes}
-            </Button>
-            <Button
-              variant={typeFilter === "cron" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setTypeFilter("cron")}
-            >
-              {st.filters.cron}
-            </Button>
-            <Button
-              variant={typeFilter === "once" ? "default" : "outline"}
-              size="sm"
-              onClick={() => setTypeFilter("once")}
-            >
-              {st.filters.once}
-            </Button>
-          </div>
-          <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
-            <div
-              data-testid="scheduled-task-list"
-              className="flex flex-col gap-3"
-            >
-              {filteredData.map((task) => {
-                const isSelected = selectedTask?.id === task.id;
-                return (
-                  <button
-                    type="button"
-                    key={task.id}
-                    onClick={() => setSelectedTaskId(task.id)}
-                    data-testid={`scheduled-task-item-${task.id}`}
-                    className={cn(
-                      "rounded-lg border p-4 text-left",
-                      isSelected ? "border-foreground" : "border-border",
-                    )}
+          {hasTasks ? (
+            <div className="mb-4 flex flex-wrap items-center gap-2">
+              <div className="bg-muted/40 flex items-center gap-1 rounded-lg border p-1">
+                {statusFilters.map((f) => (
+                  <FilterChip
+                    key={f.id}
+                    active={statusFilter === f.id}
+                    onClick={() =>
+                      setStatusFilter(statusFilter === f.id ? "all" : f.id)
+                    }
                   >
-                    <div className="font-medium">{task.title}</div>
-                    <div className="text-muted-foreground text-sm">
-                      {taskSummary(task)}
-                    </div>
-                  </button>
-                );
-              })}
+                    {f.label}
+                  </FilterChip>
+                ))}
+              </div>
             </div>
-            <div
-              className="rounded-lg border p-4"
-              data-testid="scheduled-task-detail"
-            >
-              {selectedTask ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="text-lg font-semibold">
-                      {selectedTask.title}
-                    </div>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setEditing((value) => !value)}
-                    >
-                      {editing ? st.actions.cancelEdit : st.actions.edit}
-                    </Button>
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.contextMode}:{" "}
-                    {contextModeLabel(selectedTask.context_mode)}
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {selectedTask.context_mode === "reuse_thread"
-                      ? `${st.detail.thread}: ${selectedTask.thread_id ?? NONE}`
-                      : `${st.detail.lastThread}: ${selectedTask.last_thread_id ?? NONE}`}
-                  </div>
-                  {selectedTask.context_mode === "reuse_thread" && (
-                    <ReuseThreadNotice
-                      title={st.context.reuseNoticeTitle}
-                      description={st.context.reuseNoticeDescription}
-                    />
-                  )}
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.schedule}:{" "}
-                    {scheduleTypeLabel(selectedTask.schedule_type)}
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.nextRun}:{" "}
-                    {formatTimestamp(selectedTask.next_run_at, locale)}
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.lastRun}:{" "}
-                    {formatTimestamp(selectedTask.last_run_at, locale)}
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.lastRunId}: {selectedTask.last_run_id ?? NONE}
-                  </div>
-                  <div className="text-muted-foreground text-sm">
-                    {st.detail.lastError}: {selectedTask.last_error ?? NONE}
-                  </div>
-                  {editing ? (
-                    <div className="flex flex-col gap-2 rounded-lg border p-3">
-                      <Input
-                        value={editTitle}
-                        onChange={(event) => setEditTitle(event.target.value)}
-                        placeholder={st.edit.titlePlaceholder}
-                      />
-                      <Textarea
-                        rows={4}
-                        value={editPrompt}
-                        onChange={(event) => setEditPrompt(event.target.value)}
-                        placeholder={st.edit.promptPlaceholder}
-                      />
-                      <ScheduledTaskScheduleInput
-                        key={selectedTask.id}
-                        initial={editSchedule}
-                        onChange={setEditSchedule}
-                        scheduleTypeLocked
-                      />
-                      <Button
-                        size="sm"
-                        onClick={() =>
-                          updateTask.mutate({
-                            title: editTitle,
-                            prompt: editPrompt,
-                            schedule_spec: editSchedule.schedule_spec,
-                            timezone: editSchedule.timezone || "UTC",
-                          })
-                        }
-                        disabled={updateTask.isPending}
-                      >
-                        {st.edit.submit}
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="text-sm">{selectedTask.prompt}</div>
-                  )}
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() =>
-                        selectedTask.status === "paused"
-                          ? resumeTask.mutate(selectedTask.id)
-                          : pauseTask.mutate(selectedTask.id)
-                      }
-                    >
-                      {selectedTask.status === "paused"
-                        ? st.actions.resume
-                        : st.actions.pause}
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => triggerTask.mutate(selectedTask.id)}
-                    >
-                      {st.actions.trigger}
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => duplicateTask(selectedTask)}
-                    >
-                      <CopyIcon />
-                      {st.actions.duplicate}
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => setDeleteOpen(true)}
-                    >
-                      {st.actions.delete}
-                    </Button>
-                  </div>
-                  <div data-testid="scheduled-task-runs">
-                    {(taskRunsQuery.data ?? []).length === 1
-                      ? st.detail.runsCountOne.replace(
-                          "{count}",
-                          String((taskRunsQuery.data ?? []).length),
-                        )
-                      : st.detail.runsCount.replace(
-                          "{count}",
-                          String((taskRunsQuery.data ?? []).length),
-                        )}
-                  </div>
-                  <div
-                    className="flex flex-col gap-2"
-                    data-testid="scheduled-task-run-list"
-                  >
-                    {(taskRunsQuery.data ?? []).length > 0 ? (
-                      (taskRunsQuery.data ?? []).map((run) => (
-                        <div
-                          key={run.id}
-                          className="rounded-md border p-3 text-sm"
-                        >
-                          <div className="font-medium">{runSummary(run)}</div>
-                          <div className="text-muted-foreground text-xs">
-                            {run.run_id ?? NONE}
-                          </div>
-                          <div className="text-muted-foreground text-xs">
-                            {formatTimestamp(run.scheduled_for, locale)}
-                          </div>
-                          {run.error && (
-                            <div className="text-destructive text-xs">
-                              {run.error}
-                            </div>
-                          )}
-                        </div>
-                      ))
-                    ) : (
-                      <div className="text-muted-foreground text-sm">
-                        {st.detail.noRuns}
-                      </div>
-                    )}
-                  </div>
+          ) : null}
+          {isLoading ? (
+            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+              {t.common.loading}
+            </div>
+          ) : filteredData.length === 0 ? (
+            queryError ? null : hasTasks ? (
+              <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
+                <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
+                  <CalendarClock className="text-muted-foreground h-7 w-7" />
                 </div>
-              ) : (
-                <div className="text-muted-foreground text-sm">
-                  {st.detail.noSelection}
+                <div>
+                  <p className="font-medium">{st.detail.noMatchesTitle}</p>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    {st.detail.noMatchesDescription}
+                  </p>
                 </div>
-              )}
+              </div>
+            ) : (
+              <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
+                <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
+                  <CalendarClock className="text-muted-foreground h-7 w-7" />
+                </div>
+                <div>
+                  <p className="font-medium">{st.detail.noTasksTitle}</p>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    {st.detail.noTasksDescription}
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  className="mt-2"
+                  onClick={() => router.push(createHref)}
+                >
+                  <Plus className="mr-1.5 h-4 w-4" />
+                  {st.create.title}
+                </Button>
+              </div>
+            )
+          ) : (
+            <div
+              data-testid="scheduled-task-list"
+              className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+            >
+              {filteredData.map((task) => (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  onClick={() => openDetail(task.id)}
+                  status={task.status}
+                  statusLabel={statusLabel}
+                  scheduleTypeLabel={scheduleTypeLabel(task.schedule_type)}
+                  nextRun={formatTimestamp(task.next_run_at, locale)}
+                />
+              ))}
             </div>
-          </div>
+          )}
         </div>
       </WorkspaceBody>
 
-      {/* Delete confirm — follows the agent-card confirm pattern. */}
+      {/* Task detail dialog */}
+      <Dialog
+        open={detailOpen}
+        onOpenChange={(open) => {
+          setDetailOpen(open);
+          if (!open) setEditing(false);
+        }}
+      >
+        <DialogContent
+          className="sm:max-w-lg"
+          data-testid="scheduled-task-detail"
+        >
+          {selectedTask ? (
+            <TaskDetail
+              task={selectedTask}
+              editing={editing}
+              setEditing={setEditing}
+              editTitle={editTitle}
+              setEditTitle={setEditTitle}
+              editPrompt={editPrompt}
+              setEditPrompt={setEditPrompt}
+              editSchedule={editSchedule}
+              setEditSchedule={setEditSchedule}
+              updateTask={updateTask}
+              pauseTask={pauseTask}
+              resumeTask={resumeTask}
+              triggerTask={triggerTask}
+              onDuplicate={duplicateSelectedTask}
+              setDeleteOpen={setDeleteOpen}
+              taskRunsQuery={taskRunsQuery}
+              st={st}
+              t={t}
+              locale={locale}
+              contextModeLabel={contextModeLabel}
+              scheduleTypeLabel={scheduleTypeLabel}
+              formatTimestamp={formatTimestamp}
+              runSummary={runSummary}
+              statusLabel={statusLabel}
+              NONE={NONE}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirm */}
       <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
         <DialogContent>
           <DialogHeader>
@@ -656,7 +413,10 @@ export default function ScheduledTasksPage() {
               onClick={() => {
                 if (selectedTask) {
                   deleteTask.mutate(selectedTask.id, {
-                    onSuccess: () => setDeleteOpen(false),
+                    onSuccess: () => {
+                      setDeleteOpen(false);
+                      setDetailOpen(false);
+                    },
                   });
                 }
               }}
@@ -670,3 +430,335 @@ export default function ScheduledTasksPage() {
     </WorkspaceContainer>
   );
 }
+
+function FilterChip({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      onClick={onClick}
+      className={cn(
+        "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+        active
+          ? "bg-primary text-primary-foreground shadow-sm"
+          : "text-muted-foreground hover:bg-secondary hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function TaskCard({
+  task,
+  onClick,
+  status,
+  statusLabel,
+  scheduleTypeLabel,
+  nextRun,
+}: {
+  task: ScheduledTask;
+  onClick: () => void;
+  status: string;
+  statusLabel: (v: string) => string;
+  scheduleTypeLabel: string;
+  nextRun: string;
+}) {
+  const dot = STATUS_DOT[task.status] ?? "bg-zinc-400";
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-testid={`scheduled-task-item-${task.id}`}
+      className="bg-card hover:bg-secondary/40 flex flex-col gap-3 rounded-lg border p-4 text-left transition-colors"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <span className="line-clamp-2 text-sm leading-snug font-semibold">
+          {task.title}
+        </span>
+        <span
+          aria-hidden
+          className={cn("mt-1 size-2 shrink-0 rounded-full", dot)}
+        />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <span className="text-muted-foreground text-xs">
+          {scheduleTypeLabel}
+        </span>
+        <span className="text-muted-foreground inline-flex items-center gap-1.5 text-xs tabular-nums">
+          <CalendarClock className="size-3.5" />
+          {nextRun}
+        </span>
+      </div>
+      <div className="border-t pt-2">
+        <StatusBadge status={status} statusLabel={statusLabel} />
+      </div>
+    </button>
+  );
+}
+
+function TaskDetail({
+  task,
+  editing,
+  setEditing,
+  editTitle,
+  setEditTitle,
+  editPrompt,
+  setEditPrompt,
+  editSchedule,
+  setEditSchedule,
+  updateTask,
+  pauseTask,
+  resumeTask,
+  triggerTask,
+  onDuplicate,
+  setDeleteOpen,
+  taskRunsQuery,
+  st,
+  t,
+  locale,
+  contextModeLabel,
+  scheduleTypeLabel,
+  formatTimestamp,
+  runSummary,
+  statusLabel,
+  NONE,
+}: {
+  task: ScheduledTask;
+  editing: boolean;
+  setEditing: (v: boolean) => void;
+  editTitle: string;
+  setEditTitle: (v: string) => void;
+  editPrompt: string;
+  setEditPrompt: (v: string) => void;
+  editSchedule: ScheduleValue;
+  setEditSchedule: (v: ScheduleValue) => void;
+  updateTask: ReturnType<typeof useUpdateScheduledTask>;
+  pauseTask: ReturnType<typeof usePauseScheduledTask>;
+  resumeTask: ReturnType<typeof useResumeScheduledTask>;
+  triggerTask: ReturnType<typeof useTriggerScheduledTask>;
+  onDuplicate: () => void;
+  setDeleteOpen: (v: boolean) => void;
+  taskRunsQuery: ReturnType<typeof useScheduledTaskRuns>;
+  st: Translations["scheduledTasks"];
+  t: Translations;
+  locale: string;
+  contextModeLabel: (v: string) => string;
+  scheduleTypeLabel: (v: string) => string;
+  formatTimestamp: (v: string | null, locale: string) => string;
+  runSummary: (run: ScheduledTaskRun) => string;
+  statusLabel: (v: string) => string;
+  NONE: string;
+}) {
+  const stDetail = st.detail;
+
+  return (
+    <>
+      <DialogHeader>
+        <div className="flex items-start justify-between gap-3 pr-8">
+          <div className="flex min-w-0 flex-col gap-2">
+            <DialogTitle className="leading-snug">
+              {editing ? editTitle || task.title : task.title}
+            </DialogTitle>
+            <StatusBadge status={task.status} statusLabel={statusLabel} />
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setEditing(!editing)}
+          >
+            {editing ? st.actions.cancelEdit : st.actions.edit}
+          </Button>
+        </div>
+      </DialogHeader>
+
+      {editing ? (
+        <div className="flex flex-col gap-3 py-2">
+          <Input
+            value={editTitle}
+            onChange={(event) => setEditTitle(event.target.value)}
+            placeholder={st.edit.titlePlaceholder}
+          />
+          <Textarea
+            rows={4}
+            value={editPrompt}
+            onChange={(event) => setEditPrompt(event.target.value)}
+            placeholder={st.edit.promptPlaceholder}
+          />
+          <ScheduledTaskScheduleInput
+            key={task.id}
+            initial={editSchedule}
+            onChange={setEditSchedule}
+            scheduleTypeLocked
+          />
+          {editSchedule.schedule_type === "once" &&
+            !editSchedule.schedule_spec.run_at && (
+              <div className="text-muted-foreground text-sm">
+                {st.edit.invalidOnce}
+              </div>
+            )}
+          <Button
+            size="sm"
+            onClick={() =>
+              updateTask.mutate({
+                title: editTitle,
+                prompt: editPrompt,
+                schedule_spec: editSchedule.schedule_spec,
+                timezone: editSchedule.timezone || "UTC",
+              })
+            }
+            disabled={
+              updateTask.isPending ||
+              (!editSchedule.schedule_spec.cron &&
+                !editSchedule.schedule_spec.run_at)
+            }
+          >
+            {updateTask.isPending ? t.common.loading : st.edit.submit}
+          </Button>
+        </div>
+      ) : (
+        <div className="text-muted-foreground py-2 text-sm leading-relaxed">
+          {task.prompt}
+        </div>
+      )}
+
+      {/* Key-value details */}
+      {task.context_mode === "reuse_thread" && (
+        <ReuseThreadNotice
+          title={st.context.reuseNoticeTitle}
+          description={st.context.reuseNoticeDescription}
+        />
+      )}
+      <div className="flex flex-col gap-px py-2">
+        {[
+          {
+            label: stDetail.contextMode,
+            value: contextModeLabel(task.context_mode),
+          },
+          {
+            label:
+              task.context_mode === "reuse_thread"
+                ? stDetail.thread
+                : stDetail.lastThread,
+            value:
+              task.context_mode === "reuse_thread"
+                ? (task.thread_id ?? NONE)
+                : (task.last_thread_id ?? NONE),
+          },
+          {
+            label: stDetail.schedule,
+            value: scheduleTypeLabel(task.schedule_type),
+          },
+          {
+            label: stDetail.nextRun,
+            value: formatTimestamp(task.next_run_at, locale),
+          },
+          {
+            label: stDetail.lastRun,
+            value: formatTimestamp(task.last_run_at, locale),
+          },
+          {
+            label: stDetail.lastError,
+            value: task.last_error ?? NONE,
+          },
+        ].map((row) => (
+          <div
+            key={row.label}
+            className="flex items-baseline justify-between gap-3 py-1 text-sm"
+          >
+            <span className="text-muted-foreground shrink-0 text-xs">
+              {row.label}
+            </span>
+            <span className="text-right font-medium tabular-nums">
+              {row.value}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Actions */}
+      <div className="flex flex-wrap gap-2 py-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            task.status === "paused"
+              ? resumeTask.mutate(task.id)
+              : pauseTask.mutate(task.id)
+          }
+        >
+          {task.status === "paused" ? st.actions.resume : st.actions.pause}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => triggerTask.mutate(task.id)}
+        >
+          {st.actions.trigger}
+        </Button>
+        <Button variant="outline" size="sm" onClick={onDuplicate}>
+          <CopyIcon />
+          {st.actions.duplicate}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="text-destructive hover:text-destructive"
+          onClick={() => setDeleteOpen(true)}
+        >
+          {st.actions.delete}
+        </Button>
+      </div>
+
+      {/* Run history */}
+      <div className="border-t pt-3" data-testid="scheduled-task-runs">
+        <div className="text-muted-foreground mb-2 text-xs font-medium">
+          {(taskRunsQuery.data ?? []).length === 1
+            ? stDetail.runsCountOne.replace(
+                "{count}",
+                String((taskRunsQuery.data ?? []).length),
+              )
+            : stDetail.runsCount.replace(
+                "{count}",
+                String((taskRunsQuery.data ?? []).length),
+              )}
+        </div>
+        <div
+          className="flex flex-col gap-1.5"
+          data-testid="scheduled-task-run-list"
+        >
+          {(taskRunsQuery.data ?? []).length > 0 ? (
+            (taskRunsQuery.data ?? []).map((run) => (
+              <div
+                key={run.id}
+                className="text-muted-foreground bg-muted/40 rounded-md px-3 py-2 text-xs"
+              >
+                <div className="text-foreground font-medium">
+                  {runSummary(run)}
+                </div>
+                <div className="mt-0.5 tabular-nums">
+                  {formatTimestamp(run.scheduled_for, locale)}
+                </div>
+                {run.error && (
+                  <div className="text-destructive mt-0.5">{run.error}</div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="text-muted-foreground text-sm">
+              {stDetail.noRuns}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/ai-elements/message.tsx b/frontend/src/components/ai-elements/message.tsx
index c260f1f9134..c4114bd9bdd 100644
--- a/frontend/src/components/ai-elements/message.tsx
+++ b/frontend/src/components/ai-elements/message.tsx
@@ -45,10 +45,11 @@ export const MessageContent = ({
 }: MessageContentProps) => (
   <div
     className={cn(
-      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
+      "flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
       "group-[.is-user]:overflow-hidden",
-      "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3",
-      "group-[.is-assistant]:text-foreground",
+      "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-tr-md group-[.is-user]:px-4 group-[.is-user]:py-3",
+      "group-[.is-assistant]:text-foreground group-[.is-assistant]:px-4 group-[.is-assistant]:py-3",
+      "group-[.is-assistant]:bg-secondary group-[.is-assistant]:rounded-2xl group-[.is-assistant]:rounded-tl-md",
       className,
     )}
     {...props}
diff --git a/frontend/src/components/workspace/chats/chat-page.tsx b/frontend/src/components/workspace/chats/chat-page.tsx
index 5c00fea25f6..115d296a6fc 100644
--- a/frontend/src/components/workspace/chats/chat-page.tsx
+++ b/frontend/src/components/workspace/chats/chat-page.tsx
@@ -280,7 +280,7 @@ export default function ChatPage() {
           <div className="relative flex size-full min-h-0 justify-between">
             <header
               className={cn(
-                "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center gap-2 px-2 sm:px-4",
+                "absolute top-0 right-0 left-0 z-40 flex h-12 shrink-0 items-center gap-2 px-2 sm:px-4",
                 isWelcomeMode
                   ? "bg-background/0 backdrop-blur-none"
                   : "bg-background/80 shadow-xs backdrop-blur",
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index 7cb8bfc6846..08579695d07 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -2173,131 +2173,132 @@ export function InputBox({
           </div>
         </div>
       )}
-      <PromptInput
-        className={cn(
-          "bg-background/85 relative z-10 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
-          polishingInput &&
-            "shadow-primary/10 ring-primary/25 shadow-lg ring-1",
-          className,
-        )}
-        disabled={composerLocked}
-        globalDrop
-        multiple
-        onSubmit={handleSubmit}
-        {...props}
-      >
-        {polishingInput && (
-          <div
-            aria-hidden="true"
-            className="border-primary/30 bg-primary/5 pointer-events-auto absolute inset-0 z-20 animate-pulse cursor-wait rounded-2xl border opacity-80"
-          />
-        )}
-        {extraHeader && (
-          <div className="absolute top-0 right-0 left-0 z-10">
-            <div className="absolute right-0 bottom-0 left-0 flex items-center justify-center">
-              {extraHeader}
-            </div>
-          </div>
-        )}
-        <PromptInputHeader className="flex-wrap px-3 pt-3 pb-0 empty:hidden">
-          <PromptInputAttachments className="contents p-0">
-            {(attachment) => (
-              <div className="max-w-60">
-                <PromptInputAttachment data={attachment} />
-              </div>
-            )}
-          </PromptInputAttachments>
+      <div className="relative">
+        <PromptInput
+          className={cn(
+            "bg-background/85 relative z-10 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
+            polishingInput &&
+              "shadow-primary/10 ring-primary/25 shadow-lg ring-1",
+            className,
+          )}
+          disabled={composerLocked}
+          globalDrop
+          multiple
+          onSubmit={handleSubmit}
+          {...props}
+        >
           {polishingInput && (
             <div
-              aria-live="polite"
-              className="text-primary bg-primary/10 border-primary/20 relative z-30 flex h-7 items-center gap-1.5 rounded-full border py-0 pr-1 pl-2.5 text-xs font-medium"
-              role="status"
-            >
-              <Loader2Icon className="size-3 animate-spin" />
-              {t.inputBox.inputPolishing}
-              <button
-                aria-label={t.inputBox.inputPolishCancel}
-                className="hover:bg-primary/20 focus-visible:ring-primary/40 -mr-0.5 ml-0.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                data-testid="cancel-polish-input-button"
-                onClick={abortInputPolishRequest}
-                type="button"
-              >
-                <XIcon className="size-3" />
-              </button>
-            </div>
-          )}
-          {sidecar && sidecar.conversationQuotes.length > 0 && (
-            <ReferenceAttachmentSummary
-              references={sidecar.conversationQuotes}
-              testId="conversation-quote-attachment"
-              onClear={() => sidecar.clearConversationQuotes()}
+              aria-hidden="true"
+              className="border-primary/30 bg-primary/5 pointer-events-auto absolute inset-0 z-20 animate-pulse cursor-wait rounded-2xl border opacity-80"
             />
           )}
-        </PromptInputHeader>
-        <div className="min-h-16 w-full min-w-0 px-3 py-3">
-          {selectedSlashSkill ? (
-            <div
-              className="max-h-48 min-h-6 w-full min-w-0 cursor-text overflow-y-auto text-base leading-6 break-all whitespace-pre-wrap md:text-sm"
-              onClick={(event) => {
-                if (event.target === event.currentTarget) {
-                  focusContentEditableEnd(inlineSkillTextRef.current);
-                }
-              }}
-            >
-              <SlashSkillChip
-                name={selectedSlashSkill.name}
-                className="mr-2 max-w-[min(11rem,45%)] align-top"
-                onRemove={clearSelectedSlashSkill}
+          {extraHeader && (
+            <div className="absolute top-0 right-0 left-0 z-10">
+              <div className="absolute right-0 bottom-0 left-0 flex items-center justify-center">
+                {extraHeader}
+              </div>
+            </div>
+          )}
+          <PromptInputHeader className="flex-wrap px-3 pt-3 pb-0 empty:hidden">
+            <PromptInputAttachments className="contents p-0">
+              {(attachment) => (
+                <div className="max-w-60">
+                  <PromptInputAttachment data={attachment} />
+                </div>
+              )}
+            </PromptInputAttachments>
+            {polishingInput && (
+              <div
+                aria-live="polite"
+                className="text-primary bg-primary/10 border-primary/20 relative z-30 flex h-7 items-center gap-1.5 rounded-full border py-0 pr-1 pl-2.5 text-xs font-medium"
+                role="status"
+              >
+                <Loader2Icon className="size-3 animate-spin" />
+                {t.inputBox.inputPolishing}
+                <button
+                  aria-label={t.inputBox.inputPolishCancel}
+                  className="hover:bg-primary/20 focus-visible:ring-primary/40 -mr-0.5 ml-0.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                  data-testid="cancel-polish-input-button"
+                  onClick={abortInputPolishRequest}
+                  type="button"
+                >
+                  <XIcon className="size-3" />
+                </button>
+              </div>
+            )}
+            {sidecar && sidecar.conversationQuotes.length > 0 && (
+              <ReferenceAttachmentSummary
+                references={sidecar.conversationQuotes}
+                testId="conversation-quote-attachment"
+                onClear={() => sidecar.clearConversationQuotes()}
               />
-              <span
-                aria-label={t.inputBox.placeholder}
-                aria-multiline="true"
-                contentEditable={!composerLocked}
-                data-empty={textInput.value.length === 0}
-                data-placeholder={t.inputBox.placeholder}
-                data-slot="input-group-control"
-                onBlur={() => setTextareaFocused(false)}
-                onCompositionEnd={() => {
-                  inlineSkillComposingRef.current = false;
-                }}
-                onCompositionStart={() => {
-                  inlineSkillComposingRef.current = true;
+            )}
+          </PromptInputHeader>
+          <div className="min-h-16 w-full min-w-0 px-3 py-3">
+            {selectedSlashSkill ? (
+              <div
+                className="max-h-48 min-h-6 w-full min-w-0 cursor-text overflow-y-auto text-base leading-6 break-all whitespace-pre-wrap md:text-sm"
+                onClick={(event) => {
+                  if (event.target === event.currentTarget) {
+                    focusContentEditableEnd(inlineSkillTextRef.current);
+                  }
                 }}
+              >
+                <SlashSkillChip
+                  name={selectedSlashSkill.name}
+                  className="mr-2 max-w-[min(11rem,45%)] align-top"
+                  onRemove={clearSelectedSlashSkill}
+                />
+                <span
+                  aria-label={t.inputBox.placeholder}
+                  aria-multiline="true"
+                  contentEditable={!composerLocked}
+                  data-empty={textInput.value.length === 0}
+                  data-placeholder={t.inputBox.placeholder}
+                  data-slot="input-group-control"
+                  onBlur={() => setTextareaFocused(false)}
+                  onCompositionEnd={() => {
+                    inlineSkillComposingRef.current = false;
+                  }}
+                  onCompositionStart={() => {
+                    inlineSkillComposingRef.current = true;
+                  }}
+                  onFocus={() => setTextareaFocused(true)}
+                  onInput={handleInlineSkillInput}
+                  onKeyDown={handleInlineSkillKeyDown}
+                  onPaste={handleInlineSkillPaste}
+                  aria-placeholder={t.inputBox.placeholder}
+                  ref={inlineSkillTextRef}
+                  role="textbox"
+                  suppressContentEditableWarning
+                  className={cn(
+                    "outline-none",
+                    "before:text-muted-foreground before:pointer-events-none",
+                    "data-[empty=true]:before:content-[attr(data-placeholder)]",
+                    composerLocked && "cursor-not-allowed opacity-50",
+                  )}
+                  tabIndex={composerLocked ? -1 : 0}
+                />
+              </div>
+            ) : (
+              <PromptInputTextarea
+                className="min-h-6! w-full min-w-0 p-0! leading-6!"
+                disabled={composerLocked}
+                placeholder={t.inputBox.placeholder}
+                autoFocus={autoFocus}
+                defaultValue={initialValue}
+                onBlur={() => setTextareaFocused(false)}
+                onChange={handlePromptTextareaChange}
                 onFocus={() => setTextareaFocused(true)}
-                onInput={handleInlineSkillInput}
-                onKeyDown={handleInlineSkillKeyDown}
-                onPaste={handleInlineSkillPaste}
-                aria-placeholder={t.inputBox.placeholder}
-                ref={inlineSkillTextRef}
-                role="textbox"
-                suppressContentEditableWarning
-                className={cn(
-                  "outline-none",
-                  "before:text-muted-foreground before:pointer-events-none",
-                  "data-[empty=true]:before:content-[attr(data-placeholder)]",
-                  composerLocked && "cursor-not-allowed opacity-50",
-                )}
-                tabIndex={composerLocked ? -1 : 0}
+                onKeyDown={handlePromptTextareaKeyDown}
+                ref={textareaRef}
               />
-            </div>
-          ) : (
-            <PromptInputTextarea
-              className="min-h-6! w-full min-w-0 p-0! leading-6!"
-              disabled={composerLocked}
-              placeholder={t.inputBox.placeholder}
-              autoFocus={autoFocus}
-              defaultValue={initialValue}
-              onBlur={() => setTextareaFocused(false)}
-              onChange={handlePromptTextareaChange}
-              onFocus={() => setTextareaFocused(true)}
-              onKeyDown={handlePromptTextareaKeyDown}
-              ref={textareaRef}
-            />
-          )}
-        </div>
-        <PromptInputFooter className="flex flex-wrap gap-2 sm:flex-nowrap">
-          <PromptInputTools className="min-w-0 flex-1 flex-wrap">
-            {/* TODO: Add more connectors here
+            )}
+          </div>
+          <PromptInputFooter className="flex flex-wrap gap-2 sm:flex-nowrap">
+            <PromptInputTools className="min-w-0 flex-1 flex-wrap">
+              {/* TODO: Add more connectors here
           <PromptInputActionMenu>
             <PromptInputActionMenuTrigger className="px-2!" />
             <PromptInputActionMenuContent>
@@ -2306,266 +2307,183 @@ export function InputBox({
               />
             </PromptInputActionMenuContent>
           </PromptInputActionMenu> */}
-            <AddAttachmentsButton
-              className="px-2!"
-              disabled={composerLocked}
-              uploadLimits={uploadLimits}
-            />
-            <VoiceInputButton
-              disabled={composerLocked}
-              listening={voiceListening}
-              supported={voiceInputSupported}
-              onToggle={toggleVoiceInput}
-            />
-            <Tooltip
-              content={
-                polishingInput
-                  ? t.inputBox.inputPolishing
-                  : inputPolishUndoAvailable
-                    ? t.inputBox.inputPolishUndo
-                    : t.inputBox.inputPolish
-              }
-            >
-              <PromptInputButton
-                aria-label={
-                  inputPolishUndoAvailable
-                    ? t.inputBox.inputPolishUndo
-                    : t.inputBox.inputPolish
-                }
+              <AddAttachmentsButton
                 className="px-2!"
-                data-testid="polish-input-button"
-                disabled={inputPolishDisabled}
-                onClick={
-                  inputPolishUndoAvailable
-                    ? handleUndoInputPolish
-                    : handlePolishInput
-                }
-              >
-                {polishingInput ? (
-                  <Loader2Icon className="size-3 animate-spin" />
-                ) : inputPolishUndoAvailable ? (
-                  <Undo2Icon className="size-3" />
-                ) : (
-                  <SparklesIcon className="size-3" />
-                )}
-              </PromptInputButton>
-            </Tooltip>
-            <PromptInputActionMenu>
-              <ModeHoverGuide
-                mode={
-                  context.mode === "flash" ||
-                  context.mode === "thinking" ||
-                  context.mode === "pro" ||
-                  context.mode === "ultra"
-                    ? context.mode
-                    : "flash"
+                disabled={composerLocked}
+                uploadLimits={uploadLimits}
+              />
+              <VoiceInputButton
+                disabled={composerLocked}
+                listening={voiceListening}
+                supported={voiceInputSupported}
+                onToggle={toggleVoiceInput}
+              />
+              <Tooltip
+                content={
+                  polishingInput
+                    ? t.inputBox.inputPolishing
+                    : inputPolishUndoAvailable
+                      ? t.inputBox.inputPolishUndo
+                      : t.inputBox.inputPolish
                 }
               >
-                <PromptInputActionMenuTrigger
-                  className="max-w-28 gap-1! px-2! sm:max-w-none"
-                  disabled={composerLocked}
+                <PromptInputButton
+                  aria-label={
+                    inputPolishUndoAvailable
+                      ? t.inputBox.inputPolishUndo
+                      : t.inputBox.inputPolish
+                  }
+                  className="px-2!"
+                  data-testid="polish-input-button"
+                  disabled={inputPolishDisabled}
+                  onClick={
+                    inputPolishUndoAvailable
+                      ? handleUndoInputPolish
+                      : handlePolishInput
+                  }
                 >
-                  <div>
-                    {context.mode === "flash" && <ZapIcon className="size-3" />}
-                    {context.mode === "thinking" && (
-                      <LightbulbIcon className="size-3" />
-                    )}
-                    {context.mode === "pro" && (
-                      <GraduationCapIcon className="size-3" />
-                    )}
-                    {context.mode === "ultra" && (
-                      <RocketIcon className="size-3 text-[#dabb5e]" />
-                    )}
-                  </div>
-                  <div
-                    className={cn(
-                      "truncate text-xs font-normal",
-                      context.mode === "ultra" ? "golden-text" : "",
-                    )}
+                  {polishingInput ? (
+                    <Loader2Icon className="size-3 animate-spin" />
+                  ) : inputPolishUndoAvailable ? (
+                    <Undo2Icon className="size-3" />
+                  ) : (
+                    <SparklesIcon className="size-3" />
+                  )}
+                </PromptInputButton>
+              </Tooltip>
+              <PromptInputActionMenu>
+                <ModeHoverGuide
+                  mode={
+                    context.mode === "flash" ||
+                    context.mode === "thinking" ||
+                    context.mode === "pro" ||
+                    context.mode === "ultra"
+                      ? context.mode
+                      : "flash"
+                  }
+                >
+                  <PromptInputActionMenuTrigger
+                    className="max-w-28 gap-1! px-2! sm:max-w-none"
+                    disabled={composerLocked}
                   >
-                    {(context.mode === "flash" && t.inputBox.flashMode) ||
-                      (context.mode === "thinking" &&
-                        t.inputBox.reasoningMode) ||
-                      (context.mode === "pro" && t.inputBox.proMode) ||
-                      (context.mode === "ultra" && t.inputBox.ultraMode)}
-                  </div>
-                </PromptInputActionMenuTrigger>
-              </ModeHoverGuide>
-              <PromptInputActionMenuContent className="w-80">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                    {t.inputBox.mode}
-                  </DropdownMenuLabel>
-                  <PromptInputActionMenu>
-                    <PromptInputActionMenuItem
+                    <div>
+                      {context.mode === "flash" && (
+                        <ZapIcon className="size-3" />
+                      )}
+                      {context.mode === "thinking" && (
+                        <LightbulbIcon className="size-3" />
+                      )}
+                      {context.mode === "pro" && (
+                        <GraduationCapIcon className="size-3" />
+                      )}
+                      {context.mode === "ultra" && (
+                        <RocketIcon className="size-3 text-[#dabb5e]" />
+                      )}
+                    </div>
+                    <div
                       className={cn(
-                        context.mode === "flash"
-                          ? "text-accent-foreground"
-                          : "text-muted-foreground/65",
+                        "truncate text-xs font-normal",
+                        context.mode === "ultra" ? "golden-text" : "",
                       )}
-                      onSelect={() => handleModeSelect("flash")}
                     >
-                      <div className="flex flex-col gap-2">
-                        <div className="flex items-center gap-1 font-bold">
-                          <ZapIcon
-                            className={cn(
-                              "mr-2 size-4",
-                              context.mode === "flash" &&
-                                "text-accent-foreground",
-                            )}
-                          />
-                          {t.inputBox.flashMode}
-                        </div>
-                        <div className="pl-7 text-xs">
-                          {t.inputBox.flashModeDescription}
-                        </div>
-                      </div>
-                      {context.mode === "flash" ? (
-                        <CheckIcon className="ml-auto size-4" />
-                      ) : (
-                        <div className="ml-auto size-4" />
-                      )}
-                    </PromptInputActionMenuItem>
-                    {supportThinking && (
+                      {(context.mode === "flash" && t.inputBox.flashMode) ||
+                        (context.mode === "thinking" &&
+                          t.inputBox.reasoningMode) ||
+                        (context.mode === "pro" && t.inputBox.proMode) ||
+                        (context.mode === "ultra" && t.inputBox.ultraMode)}
+                    </div>
+                  </PromptInputActionMenuTrigger>
+                </ModeHoverGuide>
+                <PromptInputActionMenuContent className="w-80">
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                      {t.inputBox.mode}
+                    </DropdownMenuLabel>
+                    <PromptInputActionMenu>
                       <PromptInputActionMenuItem
                         className={cn(
-                          context.mode === "thinking"
+                          context.mode === "flash"
                             ? "text-accent-foreground"
                             : "text-muted-foreground/65",
                         )}
-                        onSelect={() => handleModeSelect("thinking")}
+                        onSelect={() => handleModeSelect("flash")}
                       >
                         <div className="flex flex-col gap-2">
                           <div className="flex items-center gap-1 font-bold">
-                            <LightbulbIcon
+                            <ZapIcon
                               className={cn(
                                 "mr-2 size-4",
-                                context.mode === "thinking" &&
+                                context.mode === "flash" &&
                                   "text-accent-foreground",
                               )}
                             />
-                            {t.inputBox.reasoningMode}
+                            {t.inputBox.flashMode}
                           </div>
                           <div className="pl-7 text-xs">
-                            {t.inputBox.reasoningModeDescription}
+                            {t.inputBox.flashModeDescription}
                           </div>
                         </div>
-                        {context.mode === "thinking" ? (
+                        {context.mode === "flash" ? (
                           <CheckIcon className="ml-auto size-4" />
                         ) : (
                           <div className="ml-auto size-4" />
                         )}
                       </PromptInputActionMenuItem>
-                    )}
-                    <PromptInputActionMenuItem
-                      className={cn(
-                        context.mode === "pro"
-                          ? "text-accent-foreground"
-                          : "text-muted-foreground/65",
-                      )}
-                      onSelect={() => handleModeSelect("pro")}
-                    >
-                      <div className="flex flex-col gap-2">
-                        <div className="flex items-center gap-1 font-bold">
-                          <GraduationCapIcon
-                            className={cn(
-                              "mr-2 size-4",
-                              context.mode === "pro" &&
-                                "text-accent-foreground",
-                            )}
-                          />
-                          {t.inputBox.proMode}
-                        </div>
-                        <div className="pl-7 text-xs">
-                          {t.inputBox.proModeDescription}
-                        </div>
-                      </div>
-                      {context.mode === "pro" ? (
-                        <CheckIcon className="ml-auto size-4" />
-                      ) : (
-                        <div className="ml-auto size-4" />
-                      )}
-                    </PromptInputActionMenuItem>
-                    <PromptInputActionMenuItem
-                      className={cn(
-                        context.mode === "ultra"
-                          ? "text-accent-foreground"
-                          : "text-muted-foreground/65",
-                      )}
-                      onSelect={() => handleModeSelect("ultra")}
-                    >
-                      <div className="flex flex-col gap-2">
-                        <div className="flex items-center gap-1 font-bold">
-                          <RocketIcon
-                            className={cn(
-                              "mr-2 size-4",
-                              context.mode === "ultra" && "text-[#dabb5e]",
-                            )}
-                          />
-                          <div
-                            className={cn(
-                              context.mode === "ultra" && "golden-text",
-                            )}
-                          >
-                            {t.inputBox.ultraMode}
+                      {supportThinking && (
+                        <PromptInputActionMenuItem
+                          className={cn(
+                            context.mode === "thinking"
+                              ? "text-accent-foreground"
+                              : "text-muted-foreground/65",
+                          )}
+                          onSelect={() => handleModeSelect("thinking")}
+                        >
+                          <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-1 font-bold">
+                              <LightbulbIcon
+                                className={cn(
+                                  "mr-2 size-4",
+                                  context.mode === "thinking" &&
+                                    "text-accent-foreground",
+                                )}
+                              />
+                              {t.inputBox.reasoningMode}
+                            </div>
+                            <div className="pl-7 text-xs">
+                              {t.inputBox.reasoningModeDescription}
+                            </div>
                           </div>
-                        </div>
-                        <div className="pl-7 text-xs">
-                          {t.inputBox.ultraModeDescription}
-                        </div>
-                      </div>
-                      {context.mode === "ultra" ? (
-                        <CheckIcon className="ml-auto size-4" />
-                      ) : (
-                        <div className="ml-auto size-4" />
+                          {context.mode === "thinking" ? (
+                            <CheckIcon className="ml-auto size-4" />
+                          ) : (
+                            <div className="ml-auto size-4" />
+                          )}
+                        </PromptInputActionMenuItem>
                       )}
-                    </PromptInputActionMenuItem>
-                  </PromptInputActionMenu>
-                </DropdownMenuGroup>
-              </PromptInputActionMenuContent>
-            </PromptInputActionMenu>
-            {supportReasoningEffort && context.mode !== "flash" && (
-              <PromptInputActionMenu>
-                <PromptInputActionMenuTrigger
-                  className="hidden gap-1! px-2! sm:inline-flex"
-                  disabled={composerLocked}
-                >
-                  <div className="text-xs font-normal">
-                    {t.inputBox.reasoningEffort}:
-                    {context.reasoning_effort === "minimal" &&
-                      " " + t.inputBox.reasoningEffortMinimal}
-                    {context.reasoning_effort === "low" &&
-                      " " + t.inputBox.reasoningEffortLow}
-                    {(context.reasoning_effort === "medium" ||
-                      !context.reasoning_effort) &&
-                      " " + t.inputBox.reasoningEffortMedium}
-                    {context.reasoning_effort === "high" &&
-                      " " + t.inputBox.reasoningEffortHigh}
-                  </div>
-                </PromptInputActionMenuTrigger>
-                <PromptInputActionMenuContent className="w-70">
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel className="text-muted-foreground text-xs">
-                      {t.inputBox.reasoningEffort}
-                    </DropdownMenuLabel>
-                    <PromptInputActionMenu>
                       <PromptInputActionMenuItem
                         className={cn(
-                          context.reasoning_effort === "minimal"
+                          context.mode === "pro"
                             ? "text-accent-foreground"
                             : "text-muted-foreground/65",
                         )}
-                        onSelect={() => handleReasoningEffortSelect("minimal")}
+                        onSelect={() => handleModeSelect("pro")}
                       >
                         <div className="flex flex-col gap-2">
                           <div className="flex items-center gap-1 font-bold">
-                            {t.inputBox.reasoningEffortMinimal}
+                            <GraduationCapIcon
+                              className={cn(
+                                "mr-2 size-4",
+                                context.mode === "pro" &&
+                                  "text-accent-foreground",
+                              )}
+                            />
+                            {t.inputBox.proMode}
                           </div>
-                          <div className="pl-2 text-xs">
-                            {t.inputBox.reasoningEffortMinimalDescription}
+                          <div className="pl-7 text-xs">
+                            {t.inputBox.proModeDescription}
                           </div>
                         </div>
-                        {context.reasoning_effort === "minimal" ? (
+                        {context.mode === "pro" ? (
                           <CheckIcon className="ml-auto size-4" />
                         ) : (
                           <div className="ml-auto size-4" />
@@ -2573,153 +2491,243 @@ export function InputBox({
                       </PromptInputActionMenuItem>
                       <PromptInputActionMenuItem
                         className={cn(
-                          context.reasoning_effort === "low"
+                          context.mode === "ultra"
                             ? "text-accent-foreground"
                             : "text-muted-foreground/65",
                         )}
-                        onSelect={() => handleReasoningEffortSelect("low")}
+                        onSelect={() => handleModeSelect("ultra")}
                       >
                         <div className="flex flex-col gap-2">
                           <div className="flex items-center gap-1 font-bold">
-                            {t.inputBox.reasoningEffortLow}
+                            <RocketIcon
+                              className={cn(
+                                "mr-2 size-4",
+                                context.mode === "ultra" && "text-[#dabb5e]",
+                              )}
+                            />
+                            <div
+                              className={cn(
+                                context.mode === "ultra" && "golden-text",
+                              )}
+                            >
+                              {t.inputBox.ultraMode}
+                            </div>
                           </div>
-                          <div className="pl-2 text-xs">
-                            {t.inputBox.reasoningEffortLowDescription}
+                          <div className="pl-7 text-xs">
+                            {t.inputBox.ultraModeDescription}
                           </div>
                         </div>
-                        {context.reasoning_effort === "low" ? (
+                        {context.mode === "ultra" ? (
                           <CheckIcon className="ml-auto size-4" />
                         ) : (
                           <div className="ml-auto size-4" />
                         )}
                       </PromptInputActionMenuItem>
-                      <PromptInputActionMenuItem
-                        className={cn(
-                          context.reasoning_effort === "medium" ||
-                            !context.reasoning_effort
-                            ? "text-accent-foreground"
-                            : "text-muted-foreground/65",
-                        )}
-                        onSelect={() => handleReasoningEffortSelect("medium")}
-                      >
-                        <div className="flex flex-col gap-2">
-                          <div className="flex items-center gap-1 font-bold">
-                            {t.inputBox.reasoningEffortMedium}
+                    </PromptInputActionMenu>
+                  </DropdownMenuGroup>
+                </PromptInputActionMenuContent>
+              </PromptInputActionMenu>
+              {supportReasoningEffort && context.mode !== "flash" && (
+                <PromptInputActionMenu>
+                  <PromptInputActionMenuTrigger
+                    className="hidden gap-1! px-2! sm:inline-flex"
+                    disabled={composerLocked}
+                  >
+                    <div className="text-xs font-normal">
+                      {t.inputBox.reasoningEffort}:
+                      {context.reasoning_effort === "minimal" &&
+                        " " + t.inputBox.reasoningEffortMinimal}
+                      {context.reasoning_effort === "low" &&
+                        " " + t.inputBox.reasoningEffortLow}
+                      {(context.reasoning_effort === "medium" ||
+                        !context.reasoning_effort) &&
+                        " " + t.inputBox.reasoningEffortMedium}
+                      {context.reasoning_effort === "high" &&
+                        " " + t.inputBox.reasoningEffortHigh}
+                    </div>
+                  </PromptInputActionMenuTrigger>
+                  <PromptInputActionMenuContent className="w-70">
+                    <DropdownMenuGroup>
+                      <DropdownMenuLabel className="text-muted-foreground text-xs">
+                        {t.inputBox.reasoningEffort}
+                      </DropdownMenuLabel>
+                      <PromptInputActionMenu>
+                        <PromptInputActionMenuItem
+                          className={cn(
+                            context.reasoning_effort === "minimal"
+                              ? "text-accent-foreground"
+                              : "text-muted-foreground/65",
+                          )}
+                          onSelect={() =>
+                            handleReasoningEffortSelect("minimal")
+                          }
+                        >
+                          <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-1 font-bold">
+                              {t.inputBox.reasoningEffortMinimal}
+                            </div>
+                            <div className="pl-2 text-xs">
+                              {t.inputBox.reasoningEffortMinimalDescription}
+                            </div>
                           </div>
-                          <div className="pl-2 text-xs">
-                            {t.inputBox.reasoningEffortMediumDescription}
+                          {context.reasoning_effort === "minimal" ? (
+                            <CheckIcon className="ml-auto size-4" />
+                          ) : (
+                            <div className="ml-auto size-4" />
+                          )}
+                        </PromptInputActionMenuItem>
+                        <PromptInputActionMenuItem
+                          className={cn(
+                            context.reasoning_effort === "low"
+                              ? "text-accent-foreground"
+                              : "text-muted-foreground/65",
+                          )}
+                          onSelect={() => handleReasoningEffortSelect("low")}
+                        >
+                          <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-1 font-bold">
+                              {t.inputBox.reasoningEffortLow}
+                            </div>
+                            <div className="pl-2 text-xs">
+                              {t.inputBox.reasoningEffortLowDescription}
+                            </div>
                           </div>
-                        </div>
-                        {context.reasoning_effort === "medium" ||
-                        !context.reasoning_effort ? (
-                          <CheckIcon className="ml-auto size-4" />
-                        ) : (
-                          <div className="ml-auto size-4" />
-                        )}
-                      </PromptInputActionMenuItem>
-                      <PromptInputActionMenuItem
-                        className={cn(
-                          context.reasoning_effort === "high"
-                            ? "text-accent-foreground"
-                            : "text-muted-foreground/65",
-                        )}
-                        onSelect={() => handleReasoningEffortSelect("high")}
-                      >
-                        <div className="flex flex-col gap-2">
-                          <div className="flex items-center gap-1 font-bold">
-                            {t.inputBox.reasoningEffortHigh}
+                          {context.reasoning_effort === "low" ? (
+                            <CheckIcon className="ml-auto size-4" />
+                          ) : (
+                            <div className="ml-auto size-4" />
+                          )}
+                        </PromptInputActionMenuItem>
+                        <PromptInputActionMenuItem
+                          className={cn(
+                            context.reasoning_effort === "medium" ||
+                              !context.reasoning_effort
+                              ? "text-accent-foreground"
+                              : "text-muted-foreground/65",
+                          )}
+                          onSelect={() => handleReasoningEffortSelect("medium")}
+                        >
+                          <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-1 font-bold">
+                              {t.inputBox.reasoningEffortMedium}
+                            </div>
+                            <div className="pl-2 text-xs">
+                              {t.inputBox.reasoningEffortMediumDescription}
+                            </div>
                           </div>
-                          <div className="pl-2 text-xs">
-                            {t.inputBox.reasoningEffortHighDescription}
+                          {context.reasoning_effort === "medium" ||
+                          !context.reasoning_effort ? (
+                            <CheckIcon className="ml-auto size-4" />
+                          ) : (
+                            <div className="ml-auto size-4" />
+                          )}
+                        </PromptInputActionMenuItem>
+                        <PromptInputActionMenuItem
+                          className={cn(
+                            context.reasoning_effort === "high"
+                              ? "text-accent-foreground"
+                              : "text-muted-foreground/65",
+                          )}
+                          onSelect={() => handleReasoningEffortSelect("high")}
+                        >
+                          <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-1 font-bold">
+                              {t.inputBox.reasoningEffortHigh}
+                            </div>
+                            <div className="pl-2 text-xs">
+                              {t.inputBox.reasoningEffortHighDescription}
+                            </div>
                           </div>
+                          {context.reasoning_effort === "high" ? (
+                            <CheckIcon className="ml-auto size-4" />
+                          ) : (
+                            <div className="ml-auto size-4" />
+                          )}
+                        </PromptInputActionMenuItem>
+                      </PromptInputActionMenu>
+                    </DropdownMenuGroup>
+                  </PromptInputActionMenuContent>
+                </PromptInputActionMenu>
+              )}
+            </PromptInputTools>
+            <PromptInputTools className="min-w-0 justify-end">
+              {goalObjectiveCounter && (
+                <span
+                  aria-label={t.inputBox.goalLengthCounter
+                    .replace("{length}", () =>
+                      String(goalObjectiveCounter.length),
+                    )
+                    .replace("{max}", () => String(goalObjectiveCounter.max))}
+                  className={cn(
+                    "shrink-0 text-xs tabular-nums",
+                    goalObjectiveCounter.overLimit
+                      ? "text-destructive font-medium"
+                      : "text-muted-foreground",
+                  )}
+                  data-testid="goal-length-counter"
+                >
+                  {goalObjectiveCounter.length}/{goalObjectiveCounter.max}
+                </span>
+              )}
+              <ModelSelector
+                open={modelDialogOpen}
+                onOpenChange={setModelDialogOpen}
+              >
+                <ModelSelectorTrigger asChild>
+                  <PromptInputButton
+                    className="max-w-40 min-w-0 sm:max-w-56"
+                    disabled={composerLocked}
+                  >
+                    <div className="flex min-w-0 flex-col text-left">
+                      <ModelSelectorName className="text-xs font-normal">
+                        {selectedModel?.display_name}
+                      </ModelSelectorName>
+                    </div>
+                  </PromptInputButton>
+                </ModelSelectorTrigger>
+                <ModelSelectorContent>
+                  <ModelSelectorInput placeholder={t.inputBox.searchModels} />
+                  <ModelSelectorList>
+                    {models.map((m) => (
+                      <ModelSelectorItem
+                        key={m.name}
+                        value={m.name}
+                        onSelect={() => handleModelSelect(m.name)}
+                      >
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <ModelSelectorName>
+                            {m.display_name}
+                          </ModelSelectorName>
+                          <span className="text-muted-foreground truncate text-[10px]">
+                            {m.model}
+                          </span>
                         </div>
-                        {context.reasoning_effort === "high" ? (
+                        {m.name === context.model_name ? (
                           <CheckIcon className="ml-auto size-4" />
                         ) : (
                           <div className="ml-auto size-4" />
                         )}
-                      </PromptInputActionMenuItem>
-                    </PromptInputActionMenu>
-                  </DropdownMenuGroup>
-                </PromptInputActionMenuContent>
-              </PromptInputActionMenu>
-            )}
-          </PromptInputTools>
-          <PromptInputTools className="min-w-0 justify-end">
-            {goalObjectiveCounter && (
-              <span
-                aria-label={t.inputBox.goalLengthCounter
-                  .replace("{length}", () =>
-                    String(goalObjectiveCounter.length),
-                  )
-                  .replace("{max}", () => String(goalObjectiveCounter.max))}
-                className={cn(
-                  "shrink-0 text-xs tabular-nums",
-                  goalObjectiveCounter.overLimit
-                    ? "text-destructive font-medium"
-                    : "text-muted-foreground",
-                )}
-                data-testid="goal-length-counter"
-              >
-                {goalObjectiveCounter.length}/{goalObjectiveCounter.max}
-              </span>
-            )}
-            <ModelSelector
-              open={modelDialogOpen}
-              onOpenChange={setModelDialogOpen}
-            >
-              <ModelSelectorTrigger asChild>
-                <PromptInputButton
-                  className="max-w-40 min-w-0 sm:max-w-56"
-                  disabled={composerLocked}
-                >
-                  <div className="flex min-w-0 flex-col text-left">
-                    <ModelSelectorName className="text-xs font-normal">
-                      {selectedModel?.display_name}
-                    </ModelSelectorName>
-                  </div>
-                </PromptInputButton>
-              </ModelSelectorTrigger>
-              <ModelSelectorContent>
-                <ModelSelectorInput placeholder={t.inputBox.searchModels} />
-                <ModelSelectorList>
-                  {models.map((m) => (
-                    <ModelSelectorItem
-                      key={m.name}
-                      value={m.name}
-                      onSelect={() => handleModelSelect(m.name)}
-                    >
-                      <div className="flex min-w-0 flex-1 flex-col">
-                        <ModelSelectorName>{m.display_name}</ModelSelectorName>
-                        <span className="text-muted-foreground truncate text-[10px]">
-                          {m.model}
-                        </span>
-                      </div>
-                      {m.name === context.model_name ? (
-                        <CheckIcon className="ml-auto size-4" />
-                      ) : (
-                        <div className="ml-auto size-4" />
-                      )}
-                    </ModelSelectorItem>
-                  ))}
-                </ModelSelectorList>
-              </ModelSelectorContent>
-            </ModelSelector>
-            <PromptInputSubmit
-              className="rounded-full"
-              disabled={composerLocked}
-              variant="outline"
-              status={status}
-              onClick={(e) => {
-                if (status === "streaming") {
-                  e.preventDefault();
-                  handleStopStreaming();
-                }
-              }}
-            />
-          </PromptInputTools>
-        </PromptInputFooter>
-      </PromptInput>
+                      </ModelSelectorItem>
+                    ))}
+                  </ModelSelectorList>
+                </ModelSelectorContent>
+              </ModelSelector>
+              <PromptInputSubmit
+                className="rounded-full"
+                disabled={composerLocked}
+                variant="outline"
+                status={status}
+                onClick={(e) => {
+                  if (status === "streaming") {
+                    e.preventDefault();
+                    handleStopStreaming();
+                  }
+                }}
+              />
+            </PromptInputTools>
+          </PromptInputFooter>
+        </PromptInput>
+      </div>
       {!isWelcomeMode && (
         <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
       )}
diff --git a/frontend/src/components/workspace/scheduled-task-schedule-input.tsx b/frontend/src/components/workspace/scheduled-task-schedule-input.tsx
index 89e3e5f15fa..cc04861b22e 100644
--- a/frontend/src/components/workspace/scheduled-task-schedule-input.tsx
+++ b/frontend/src/components/workspace/scheduled-task-schedule-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,16 +13,16 @@ import {
 } from "@/components/ui/select";
 import { useI18n } from "@/core/i18n/hooks";
 import {
+  buildOnceRunAtLocal,
   describeSchedule,
   pad2,
   parseCron,
   serializeCron,
   utcToZonedLocalInput,
-  WEEKDAYS,
   zonedLocalToUtcIso,
+  WEEKDAYS,
   type CronParts,
   type CronPreset,
-  type ScheduleLocale,
   type Weekday,
 } from "@/core/scheduled-tasks/cron";
 
@@ -40,10 +40,13 @@ const PRESETS: CronPreset[] = [
   "custom",
 ];
 
-const FALLBACK_TIMEZONES = [
+const COMMON_TIMEZONES = [
   "UTC",
   "Asia/Shanghai",
+  "Asia/Hong_Kong",
+  "Asia/Taipei",
   "Asia/Tokyo",
+  "Asia/Seoul",
   "Asia/Singapore",
   "Europe/London",
   "Europe/Berlin",
@@ -52,6 +55,20 @@ const FALLBACK_TIMEZONES = [
   "America/Los_Angeles",
 ];
 
+function supportedTimeZones(): string[] {
+  const supported = (
+    Intl as unknown as {
+      supportedValuesOf?: (key: string) => string[] | undefined;
+    }
+  ).supportedValuesOf?.("timeZone");
+  if (Array.isArray(supported) && supported.length > 0) {
+    return supported;
+  }
+  return COMMON_TIMEZONES;
+}
+
+const TIMEZONE_OPTIONS = supportedTimeZones();
+
 function detectBrowserTimezone(): string {
   try {
     const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -64,19 +81,52 @@ function detectBrowserTimezone(): string {
   return "UTC";
 }
 
-function timezoneOptions(): string[] {
-  const supported = (
-    Intl as unknown as {
-      supportedValuesOf?: (key: string) => string[] | undefined;
-    }
-  ).supportedValuesOf?.("timeZone");
-  if (Array.isArray(supported) && supported.length > 0) {
-    return supported;
-  }
-  return FALLBACK_TIMEZONES;
+function parseLocal(value: string): {
+  year: string;
+  month: string;
+  day: string;
+  time: string;
+} {
+  const match = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}:\d{2}))?$/.exec(
+    value || "",
+  );
+  return match
+    ? {
+        year: match[1] ?? "",
+        month: match[2] ?? "",
+        day: match[3] ?? "",
+        time: match[4] ?? "",
+      }
+    : { year: "", month: "", day: "", time: "" };
 }
 
-const TIMEZONE_OPTIONS = timezoneOptions();
+function OncePart({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  min: number;
+  max: number;
+}) {
+  return (
+    <div className="flex flex-1 flex-col gap-1">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <Input
+        type="number"
+        min={min}
+        max={max}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        aria-label={label}
+      />
+    </div>
+  );
+}
 
 export function ScheduledTaskScheduleInput({
   initial,
@@ -88,8 +138,8 @@ export function ScheduledTaskScheduleInput({
   scheduleTypeLocked?: boolean;
 }) {
   const { t, locale } = useI18n();
-  const schedLocale: ScheduleLocale = locale.startsWith("zh") ? "zh" : "en";
   const labels = t.scheduledTasks;
+  const schedLocale = locale === "zh-CN" ? "zh" : "en";
 
   const [scheduleType, setScheduleType] = useState<"once" | "cron">(
     initial.schedule_type,
@@ -100,17 +150,23 @@ export function ScheduledTaskScheduleInput({
   const [parts, setParts] = useState<CronParts>(
     () => parseCron(initial.schedule_spec.cron ?? "0 9 * * *").parts,
   );
-  const [runAtLocal, setRunAtLocal] = useState<string>(
+  const initOnce =
     initial.schedule_type === "once" && initial.schedule_spec.run_at
-      ? utcToZonedLocalInput(
-          initial.schedule_spec.run_at,
-          initial.timezone || "UTC",
+      ? parseLocal(
+          utcToZonedLocalInput(
+            initial.schedule_spec.run_at,
+            initial.timezone || "UTC",
+          ),
         )
-      : "",
-  );
+      : { year: "", month: "", day: "", time: "" };
+  const [onceYear, setOnceYear] = useState(initOnce.year);
+  const [onceMonth, setOnceMonth] = useState(initOnce.month);
+  const [onceDay, setOnceDay] = useState(initOnce.day);
+  const [onceTime, setOnceTime] = useState(initOnce.time);
   const [timezone, setTimezone] = useState<string>(
     initial.timezone || detectBrowserTimezone(),
   );
+  const [showAllTimezones, setShowAllTimezones] = useState(false);
 
   // Hold the latest onChange in a ref so the effect below does not depend on
   // it. This avoids a re-render loop: if the parent passes an inline
@@ -121,9 +177,15 @@ export function ScheduledTaskScheduleInput({
 
   // Emit on every change including mount. On mount this syncs the parent with
   // the browser-detected timezone and the canonicalized cron, so the submitted
-  // value always matches what the user sees in the preview.
+  // value always matches what the user sees in the form.
   useEffect(() => {
     if (scheduleType === "once") {
+      const runAtLocal = buildOnceRunAtLocal(
+        onceYear,
+        onceMonth,
+        onceDay,
+        onceTime,
+      );
       const runAt = runAtLocal ? zonedLocalToUtcIso(runAtLocal, timezone) : "";
       onChangeRef.current({
         schedule_type: "once",
@@ -139,7 +201,27 @@ export function ScheduledTaskScheduleInput({
       schedule_spec: cron ? { cron } : {},
       timezone,
     });
-  }, [scheduleType, preset, parts, runAtLocal, timezone]);
+  }, [
+    scheduleType,
+    preset,
+    parts,
+    onceYear,
+    onceMonth,
+    onceDay,
+    onceTime,
+    timezone,
+  ]);
+
+  const timezoneLabel = (tz: string): string =>
+    (labels.timezone.common as unknown as Record<string, string>)[tz] ?? tz;
+
+  const timezoneOptions = useMemo(() => {
+    const pool = showAllTimezones ? TIMEZONE_OPTIONS : COMMON_TIMEZONES;
+    if (pool.includes(timezone)) {
+      return pool;
+    }
+    return [timezone, ...pool];
+  }, [showAllTimezones, timezone]);
 
   function updateParts(patch: Partial<CronParts>) {
     setParts((prev) => ({ ...prev, ...patch }));
@@ -177,11 +259,6 @@ export function ScheduledTaskScheduleInput({
     });
   }
 
-  const preview = describeSchedule(
-    { scheduleType, preset, parts, runAtLocal, timezone },
-    schedLocale,
-  );
-
   return (
     <div className="flex flex-col gap-2" data-testid="schedule-input">
       {!scheduleTypeLocked && (
@@ -301,32 +378,81 @@ export function ScheduledTaskScheduleInput({
           )}
         </>
       ) : (
-        <Input
-          type="datetime-local"
-          value={runAtLocal}
-          onChange={(e) => setRunAtLocal(e.target.value)}
-          aria-label={labels.fields.runAt}
-        />
+        <>
+          <div className="flex items-end gap-2">
+            <OncePart
+              label={labels.fields.year}
+              value={onceYear}
+              onChange={setOnceYear}
+              min={2000}
+              max={2100}
+            />
+            <OncePart
+              label={labels.fields.month}
+              value={onceMonth}
+              onChange={setOnceMonth}
+              min={1}
+              max={12}
+            />
+            <OncePart
+              label={labels.fields.day}
+              value={onceDay}
+              onChange={setOnceDay}
+              min={1}
+              max={31}
+            />
+          </div>
+          <Input
+            type="time"
+            value={onceTime}
+            onChange={(e) => setOnceTime(e.target.value)}
+            aria-label={labels.fields.time}
+          />
+        </>
       )}
 
       <Select value={timezone} onValueChange={setTimezone}>
         <SelectTrigger className="w-full" data-testid="schedule-timezone">
-          <SelectValue />
+          <SelectValue>{timezoneLabel(timezone)}</SelectValue>
         </SelectTrigger>
         <SelectContent>
-          {TIMEZONE_OPTIONS.map((tzOption) => (
-            <SelectItem key={tzOption} value={tzOption}>
-              {tzOption}
+          {timezoneOptions.map((tz) => (
+            <SelectItem key={tz} value={tz}>
+              {timezoneLabel(tz)}
             </SelectItem>
           ))}
         </SelectContent>
       </Select>
-
+      {TIMEZONE_OPTIONS.length > COMMON_TIMEZONES.length && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground hover:text-foreground justify-start px-1 text-xs"
+          onClick={() => setShowAllTimezones((prev) => !prev)}
+        >
+          {showAllTimezones ? labels.timezone.less : labels.timezone.more}
+        </Button>
+      )}
       <div
         className="text-muted-foreground text-sm"
         data-testid="schedule-preview"
       >
-        {preview}
+        {describeSchedule(
+          {
+            scheduleType,
+            preset,
+            parts,
+            runAtLocal: buildOnceRunAtLocal(
+              onceYear,
+              onceMonth,
+              onceDay,
+              onceTime,
+            ),
+            timezone,
+          },
+          schedLocale,
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/components/workspace/settings/appearance-settings-page.tsx b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
index 2e76d68e5a5..b60212c7a10 100644
--- a/frontend/src/components/workspace/settings/appearance-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
@@ -61,6 +61,20 @@ export function AppearanceSettingsPage() {
 
   return (
     <div className="space-y-8">
+      <SettingsSection
+        title={t.settings.appearance.skinTitle}
+        description={t.settings.appearance.skinDescription}
+      >
+        <div className="grid gap-3 sm:max-w-sm">
+          <SkinCard
+            name={t.skins.classic.name}
+            tagline={t.skins.classic.tagline}
+          />
+        </div>
+      </SettingsSection>
+
+      <Separator />
+
       <SettingsSection
         title={t.settings.appearance.themeTitle}
         description={t.settings.appearance.themeDescription}
@@ -75,7 +89,7 @@ export function AppearanceSettingsPage() {
               active={currentTheme === option.id}
               mode={option.id as "system" | "light" | "dark"}
               systemTheme={systemTheme}
-              onSelect={(value) => setTheme(value)}
+              onSelect={setTheme}
             />
           ))}
         </div>
@@ -194,3 +208,18 @@ function ThemePreviewCard({
     </button>
   );
 }
+
+function SkinCard({ name, tagline }: { name: string; tagline: string }) {
+  return (
+    <div className="relative flex h-full flex-col gap-3 overflow-hidden rounded-lg border p-4 text-left">
+      <div className="relative h-20 overflow-hidden rounded-md border bg-[#f6f1e7]">
+        <div className="absolute top-2 bottom-2 left-2 w-10 rounded-sm bg-[#efe6d6]" />
+        <div className="absolute top-5 right-3 h-6 w-16 rounded-sm bg-[#3a352d]" />
+      </div>
+      <div className="space-y-1">
+        <div className="text-sm font-semibold">{name}</div>
+        <p className="text-muted-foreground text-xs leading-snug">{tagline}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/settings/memory-settings-page.tsx b/frontend/src/components/workspace/settings/memory-settings-page.tsx
index 3a67eadeeee..e26bc9a5804 100644
--- a/frontend/src/components/workspace/settings/memory-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/memory-settings-page.tsx
@@ -22,8 +22,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { createMarkdownLinkComponent } from "@/components/workspace/messages/markdown-link";
 import { useI18n } from "@/core/i18n/hooks";
 import { exportMemory } from "@/core/memory/api";
 import {
@@ -39,30 +37,13 @@ import type {
   MemoryFactPatchInput,
   UserMemory,
 } from "@/core/memory/types";
-import {
-  SafeStreamdown,
-  toStreamdownComponents,
-} from "@/core/streamdown/components";
-import { streamdownPlugins } from "@/core/streamdown/plugins";
 import { pathOfThread } from "@/core/threads/utils";
 import { formatTimeAgo } from "@/core/utils/datetime";
 
 import { SettingsSection } from "./settings-section";
 
-type MemoryViewFilter = "all" | "facts" | "summaries";
 type MemoryFact = UserMemory["facts"][number];
 
-type MemorySection = {
-  title: string;
-  summary: string;
-  updatedAt?: string;
-};
-
-type MemorySectionGroup = {
-  title: string;
-  sections: MemorySection[];
-};
-
 type PendingImport = {
   fileName: string;
   memory: UserMemory;
@@ -72,6 +53,17 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
 
+function hasAnyMemorySummary(memory: UserMemory): boolean {
+  return Boolean(
+    memory.user.workContext.summary ||
+    memory.user.personalContext.summary ||
+    memory.user.topOfMind.summary ||
+    memory.history.recentMonths.summary ||
+    memory.history.earlierContext.summary ||
+    memory.history.longTermBackground.summary,
+  );
+}
+
 function isMemorySection(value: unknown): value is {
   summary: string;
   updatedAt: string;
@@ -148,119 +140,6 @@ function confidenceToLevelKey(confidence: unknown): {
   return { key: "normal", value };
 }
 
-function formatMemorySection(
-  section: MemorySection,
-  t: ReturnType<typeof useI18n>["t"],
-): string {
-  const content =
-    section.summary.trim() ||
-    `<span class="text-muted-foreground">${t.settings.memory.markdown.empty}</span>`;
-  return [
-    `### ${section.title}`,
-    content,
-    "",
-    section.updatedAt &&
-      `> ${t.settings.memory.markdown.updatedAt}: \`${formatTimeAgo(section.updatedAt)}\``,
-  ]
-    .filter(Boolean)
-    .join("\n");
-}
-
-function buildMemorySectionGroups(
-  memory: UserMemory,
-  t: ReturnType<typeof useI18n>["t"],
-): MemorySectionGroup[] {
-  return [
-    {
-      title: t.settings.memory.markdown.userContext,
-      sections: [
-        {
-          title: t.settings.memory.markdown.work,
-          summary: memory.user.workContext.summary,
-          updatedAt: memory.user.workContext.updatedAt,
-        },
-        {
-          title: t.settings.memory.markdown.personal,
-          summary: memory.user.personalContext.summary,
-          updatedAt: memory.user.personalContext.updatedAt,
-        },
-        {
-          title: t.settings.memory.markdown.topOfMind,
-          summary: memory.user.topOfMind.summary,
-          updatedAt: memory.user.topOfMind.updatedAt,
-        },
-      ],
-    },
-    {
-      title: t.settings.memory.markdown.historyBackground,
-      sections: [
-        {
-          title: t.settings.memory.markdown.recentMonths,
-          summary: memory.history.recentMonths.summary,
-          updatedAt: memory.history.recentMonths.updatedAt,
-        },
-        {
-          title: t.settings.memory.markdown.earlierContext,
-          summary: memory.history.earlierContext.summary,
-          updatedAt: memory.history.earlierContext.updatedAt,
-        },
-        {
-          title: t.settings.memory.markdown.longTermBackground,
-          summary: memory.history.longTermBackground.summary,
-          updatedAt: memory.history.longTermBackground.updatedAt,
-        },
-      ],
-    },
-  ];
-}
-
-function summariesToMarkdown(
-  memory: UserMemory,
-  sectionGroups: MemorySectionGroup[],
-  t: ReturnType<typeof useI18n>["t"],
-) {
-  const parts: string[] = [];
-
-  parts.push(`## ${t.settings.memory.markdown.overview}`);
-  parts.push(
-    `- **${t.common.lastUpdated}**: \`${formatTimeAgo(memory.lastUpdated)}\``,
-  );
-
-  for (const group of sectionGroups) {
-    parts.push(`\n## ${group.title}`);
-    for (const section of group.sections) {
-      parts.push(formatMemorySection(section, t));
-    }
-  }
-
-  const markdown = parts.join("\n\n");
-  const lines = markdown.split("\n");
-  const out: string[] = [];
-  let i = 0;
-  for (const line of lines) {
-    i++;
-    if (i !== 1 && line.startsWith("## ")) {
-      if (out.length === 0 || out[out.length - 1] !== "---") {
-        out.push("---");
-      }
-    }
-    out.push(line);
-  }
-
-  return out.join("\n");
-}
-
-function isMemorySummaryEmpty(memory: UserMemory) {
-  return (
-    memory.user.workContext.summary.trim() === "" &&
-    memory.user.personalContext.summary.trim() === "" &&
-    memory.user.topOfMind.summary.trim() === "" &&
-    memory.history.recentMonths.summary.trim() === "" &&
-    memory.history.earlierContext.summary.trim() === "" &&
-    memory.history.longTermBackground.summary.trim() === ""
-  );
-}
-
 function truncateFactPreview(content: string, maxLength = 140) {
   const normalized = content.replace(/\s+/g, " ").trim();
   if (normalized.length <= maxLength) {
@@ -294,7 +173,6 @@ export function MemorySettingsPage() {
     DEFAULT_FACT_FORM_STATE,
   );
   const [query, setQuery] = useState("");
-  const [filter, setFilter] = useState<MemoryViewFilter>("all");
   const [pendingImport, setPendingImport] = useState<PendingImport | null>(
     null,
   );
@@ -336,16 +214,12 @@ export function MemorySettingsPage() {
   const factValidationContent = t.settings.memory.factValidationContent;
   const factValidationConfidence = t.settings.memory.factValidationConfidence;
   const noFacts = t.settings.memory.noFacts ?? "No saved facts yet.";
-  const summaryReadOnly = t.settings.memory.summaryReadOnly;
   const memoryFullyEmpty =
     t.settings.memory.memoryFullyEmpty ?? "No memory saved yet.";
   const factPreviewLabel =
     t.settings.memory.factPreviewLabel ?? "Fact to delete";
   const searchPlaceholder =
     t.settings.memory.searchPlaceholder ?? "Search memory";
-  const filterAll = t.settings.memory.filterAll ?? "All";
-  const filterFacts = t.settings.memory.filterFacts ?? "Facts";
-  const filterSummaries = t.settings.memory.filterSummaries ?? "Summaries";
   const noMatches = t.settings.memory.noMatches ?? "No matching memory found";
   const exportButton = t.settings.memory.exportButton ?? t.common.export;
   const exportSuccess =
@@ -353,20 +227,6 @@ export function MemorySettingsPage() {
   const importButton = t.settings.memory.importButton ?? t.common.import;
   const importSuccess = t.settings.memory.importSuccess ?? "Memory imported";
 
-  const sectionGroups = memory ? buildMemorySectionGroups(memory, t) : [];
-  const filteredSectionGroups = sectionGroups
-    .map((group) => ({
-      ...group,
-      sections: group.sections.filter((section) =>
-        normalizedQuery
-          ? `${section.title} ${section.summary}`
-              .toLowerCase()
-              .includes(normalizedQuery)
-          : true,
-      ),
-    }))
-    .filter((group) => group.sections.length > 0);
-
   const filteredFacts = memory
     ? memory.facts.filter((fact) =>
         normalizedQuery
@@ -377,18 +237,6 @@ export function MemorySettingsPage() {
       )
     : [];
 
-  const showSummaries = filter !== "facts";
-  const showFacts = filter !== "summaries";
-  const shouldRenderSummariesBlock =
-    showSummaries && (filteredSectionGroups.length > 0 || !normalizedQuery);
-  const shouldRenderFactsBlock =
-    showFacts &&
-    (filteredFacts.length > 0 || !normalizedQuery || filter === "facts");
-  const hasMatchingVisibleContent =
-    !memory ||
-    (showSummaries && filteredSectionGroups.length > 0) ||
-    (showFacts && filteredFacts.length > 0);
-
   async function handleExportMemory() {
     try {
       setIsExporting(true);
@@ -546,54 +394,30 @@ export function MemorySettingsPage() {
             {t.common.loading}
           </div>
         ) : error ? (
-          <div>Error: {error.message}</div>
+          <div className="text-destructive text-sm">
+            {t.settings.memory.loadError}: {error.message}
+          </div>
         ) : !memory ? (
           <div className="text-muted-foreground text-sm">
             {t.settings.memory.empty}
           </div>
         ) : (
           <div className="space-y-4">
-            {isMemorySummaryEmpty(memory) && memory.facts.length === 0 ? (
+            {memory.facts.length === 0 && !hasAnyMemorySummary(memory) ? (
               <div className="text-muted-foreground rounded-lg border border-dashed p-4 text-sm">
                 {memoryFullyEmpty}
               </div>
             ) : null}
 
-            <div className="flex flex-col gap-3">
-              {/* Row 1: search + filter tabs */}
-              <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
-                <Input
-                  value={query}
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder={searchPlaceholder}
-                  className="min-w-0 flex-1 sm:max-w-md"
-                />
-                <ToggleGroup
-                  type="single"
-                  value={filter}
-                  onValueChange={(value) => {
-                    if (value) setFilter(value as MemoryViewFilter);
-                  }}
-                  variant="outline"
-                  className="shrink-0 self-start sm:ml-auto sm:self-auto"
-                >
-                  <ToggleGroupItem value="all" className="whitespace-nowrap">
-                    {filterAll}
-                  </ToggleGroupItem>
-                  <ToggleGroupItem value="facts" className="whitespace-nowrap">
-                    {filterFacts}
-                  </ToggleGroupItem>
-                  <ToggleGroupItem
-                    value="summaries"
-                    className="whitespace-nowrap"
-                  >
-                    {filterSummaries}
-                  </ToggleGroupItem>
-                </ToggleGroup>
-              </div>
-
-              {/* Row 2: actions — constructive group on the left, destructive separated to the right */}
-              <div className="flex flex-wrap items-center gap-2">
+            {/* Toolbar: search + constructive actions, destructive separated */}
+            <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={searchPlaceholder}
+                className="min-w-0 flex-1 sm:max-w-md"
+              />
+              <div className="flex flex-wrap items-center gap-2 self-start sm:ml-auto sm:self-auto">
                 <input
                   ref={fileInputRef}
                   type="file"
@@ -603,27 +427,33 @@ export function MemorySettingsPage() {
                 />
                 <Button
                   variant="outline"
+                  size="sm"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={importMemoryMutation.isPending}
                 >
-                  <UploadIcon className="mr-2 h-4 w-4" />
+                  <UploadIcon className="mr-1.5 h-4 w-4" />
                   {importButton}
                 </Button>
                 <Button
                   variant="outline"
+                  size="sm"
                   onClick={() => void handleExportMemory()}
                   disabled={isExporting}
                 >
-                  <DownloadIcon className="mr-2 h-4 w-4" />
+                  <DownloadIcon className="mr-1.5 h-4 w-4" />
                   {isExporting ? t.common.loading : exportButton}
                 </Button>
-                <Button variant="outline" onClick={openCreateFactDialog}>
-                  <PlusIcon className="mr-2 h-4 w-4" />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={openCreateFactDialog}
+                >
+                  <PlusIcon className="mr-1.5 h-4 w-4" />
                   {addFactLabel}
                 </Button>
                 <Button
                   variant="destructive"
-                  className="ml-auto"
+                  size="sm"
                   onClick={() => setClearDialogOpen(true)}
                   disabled={clearMemory.isPending}
                 >
@@ -632,130 +462,96 @@ export function MemorySettingsPage() {
               </div>
             </div>
 
-            {!hasMatchingVisibleContent && normalizedQuery ? (
-              <div className="text-muted-foreground rounded-lg border border-dashed p-4 text-sm">
-                {noMatches}
-              </div>
-            ) : null}
-
-            {shouldRenderSummariesBlock ? (
-              <div className="min-w-0 rounded-lg border p-4">
-                <div className="text-muted-foreground mb-4 text-sm">
-                  {summaryReadOnly}
-                </div>
-                <SafeStreamdown
-                  className="size-full min-w-0 [overflow-wrap:anywhere] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-                  {...streamdownPlugins}
-                  components={toStreamdownComponents({
-                    // Defense in depth on top of the rehype-sanitize step in
-                    // streamdownPlugins: memory summaries are LLM/stored
-                    // content, so never render an unsafe href (javascript:,
-                    // data:, …) as a clickable anchor.
-                    a: createMarkdownLinkComponent(),
-                  })}
-                >
-                  {summariesToMarkdown(memory, filteredSectionGroups, t)}
-                </SafeStreamdown>
-              </div>
-            ) : null}
-
-            {shouldRenderFactsBlock ? (
-              <div className="min-w-0 rounded-lg border p-4">
-                <div className="mb-4">
-                  <h3 className="text-base font-medium">
-                    {t.settings.memory.markdown.facts}
-                  </h3>
+            {/* Facts list */}
+            <div>
+              {filteredFacts.length === 0 ? (
+                <div className="text-muted-foreground text-sm">
+                  {normalizedQuery ? noMatches : noFacts}
                 </div>
-
-                {filteredFacts.length === 0 ? (
-                  <div className="text-muted-foreground text-sm">
-                    {normalizedQuery ? noMatches : noFacts}
-                  </div>
-                ) : (
-                  <div className="space-y-3">
-                    {filteredFacts.map((fact) => {
-                      const { key } = confidenceToLevelKey(fact.confidence);
-                      const confidenceText =
-                        t.settings.memory.markdown.table.confidenceLevel[key];
-
-                      return (
-                        <div
-                          key={fact.id}
-                          className="flex flex-col gap-3 rounded-md border p-3 sm:flex-row sm:items-start sm:justify-between"
-                        >
-                          <div className="min-w-0 space-y-2 [overflow-wrap:anywhere]">
-                            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
-                              <span>
-                                <span className="text-muted-foreground">
-                                  {t.settings.memory.markdown.table.category}:
-                                </span>{" "}
-                                {upperFirst(fact.category)}
-                              </span>
-                              <span>
-                                <span className="text-muted-foreground">
-                                  {t.settings.memory.markdown.table.confidence}:
-                                </span>{" "}
-                                {confidenceText}
-                              </span>
-                              <span>
-                                <span className="text-muted-foreground">
-                                  {t.settings.memory.markdown.table.createdAt}:
-                                </span>{" "}
-                                {formatTimeAgo(fact.createdAt)}
-                              </span>
-                              <span>
-                                <span className="text-muted-foreground">
-                                  {t.settings.memory.markdown.table.source}:
-                                </span>{" "}
-                                {fact.source === "manual" ? (
-                                  t.settings.memory.manualFactSource
-                                ) : (
-                                  <Link
-                                    href={pathOfThread(fact.source)}
-                                    className="text-primary underline-offset-4 hover:underline"
-                                  >
-                                    {t.settings.memory.markdown.table.view}
-                                  </Link>
-                                )}
-                              </span>
-                            </div>
-                            <p className="text-sm [overflow-wrap:anywhere]">
-                              {fact.content}
-                            </p>
+              ) : (
+                <div className="space-y-3">
+                  {filteredFacts.map((fact) => {
+                    const { key } = confidenceToLevelKey(fact.confidence);
+                    const confidenceText =
+                      t.settings.memory.markdown.table.confidenceLevel[key];
+
+                    return (
+                      <div
+                        key={fact.id}
+                        className="flex flex-col gap-3 rounded-md border p-3 sm:flex-row sm:items-start sm:justify-between"
+                      >
+                        <div className="min-w-0 space-y-2 [overflow-wrap:anywhere]">
+                          <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                            <span>
+                              <span className="text-muted-foreground">
+                                {t.settings.memory.markdown.table.category}:
+                              </span>{" "}
+                              {upperFirst(fact.category)}
+                            </span>
+                            <span>
+                              <span className="text-muted-foreground">
+                                {t.settings.memory.markdown.table.confidence}:
+                              </span>{" "}
+                              {confidenceText}
+                            </span>
+                            <span>
+                              <span className="text-muted-foreground">
+                                {t.settings.memory.markdown.table.createdAt}:
+                              </span>{" "}
+                              {formatTimeAgo(fact.createdAt)}
+                            </span>
+                            <span>
+                              <span className="text-muted-foreground">
+                                {t.settings.memory.markdown.table.source}:
+                              </span>{" "}
+                              {fact.source === "manual" ? (
+                                t.settings.memory.manualFactSource
+                              ) : (
+                                <Link
+                                  href={pathOfThread(fact.source)}
+                                  className="text-primary underline-offset-4 hover:underline"
+                                >
+                                  {t.settings.memory.markdown.table.view}
+                                </Link>
+                              )}
+                            </span>
                           </div>
+                          <p className="text-sm [overflow-wrap:anywhere]">
+                            {fact.content}
+                          </p>
+                        </div>
 
-                          <div className="flex shrink-0 items-center gap-1 self-start sm:ml-3">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="shrink-0"
-                              onClick={() => openEditFactDialog(fact)}
-                              disabled={deleteMemoryFact.isPending}
-                              title={t.common.edit}
-                              aria-label={t.common.edit}
-                            >
-                              <PenLineIcon className="h-4 w-4" />
-                            </Button>
-
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="text-destructive hover:text-destructive shrink-0"
-                              onClick={() => setFactToDelete(fact)}
-                              disabled={deleteMemoryFact.isPending}
-                              title={t.common.delete}
-                              aria-label={t.common.delete}
-                            >
-                              <Trash2Icon className="h-4 w-4" />
-                            </Button>
-                          </div>
+                        <div className="flex shrink-0 items-center gap-1 self-start sm:ml-3">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="shrink-0"
+                            onClick={() => openEditFactDialog(fact)}
+                            disabled={deleteMemoryFact.isPending}
+                            title={t.common.edit}
+                            aria-label={t.common.edit}
+                          >
+                            <PenLineIcon className="h-4 w-4" />
+                          </Button>
+
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="text-destructive hover:text-destructive shrink-0"
+                            onClick={() => setFactToDelete(fact)}
+                            disabled={deleteMemoryFact.isPending}
+                            title={t.common.delete}
+                            aria-label={t.common.delete}
+                          >
+                            <Trash2Icon className="h-4 w-4" />
+                          </Button>
                         </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            ) : null}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
           </div>
         )}
       </SettingsSection>
diff --git a/frontend/src/components/workspace/settings/settings-dialog-host.tsx b/frontend/src/components/workspace/settings/settings-dialog-host.tsx
index 33ce8bdc948..18b4acdbc18 100644
--- a/frontend/src/components/workspace/settings/settings-dialog-host.tsx
+++ b/frontend/src/components/workspace/settings/settings-dialog-host.tsx
@@ -2,22 +2,29 @@
 
 import dynamic from "next/dynamic";
 
+import { useI18n } from "@/core/i18n/hooks";
+
 import {
   setSettingsDialogOpen,
   useSettingsDialog,
 } from "./settings-dialog-store";
 
+function SettingsDialogFallback() {
+  const { t } = useI18n();
+  return (
+    <div className="bg-background/80 fixed inset-0 z-50 grid place-items-center backdrop-blur-sm">
+      <p role="status" className="text-muted-foreground text-sm">
+        {t.settings.title}…
+      </p>
+    </div>
+  );
+}
+
 const SettingsDialog = dynamic(
   () => import("./settings-dialog").then((module) => module.SettingsDialog),
   {
     ssr: false,
-    loading: () => (
-      <div className="bg-background/80 fixed inset-0 z-50 grid place-items-center backdrop-blur-sm">
-        <p role="status" className="text-muted-foreground text-sm">
-          Loading settings…
-        </p>
-      </div>
-    ),
+    loading: SettingsDialogFallback,
   },
 );
 
diff --git a/frontend/src/components/workspace/settings/settings-dialog.tsx b/frontend/src/components/workspace/settings/settings-dialog.tsx
index f0512b1c45d..996cb0393c0 100644
--- a/frontend/src/components/workspace/settings/settings-dialog.tsx
+++ b/frontend/src/components/workspace/settings/settings-dialog.tsx
@@ -26,9 +26,10 @@ import { useI18n } from "@/core/i18n/hooks";
 import { cn } from "@/lib/utils";
 
 function SettingsPageLoading() {
+  const { t } = useI18n();
   return (
     <p role="status" className="text-muted-foreground py-8 text-center text-sm">
-      Loading…
+      {t.common.loading}
     </p>
   );
 }
@@ -188,7 +189,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       onOpenChange={(open) => props.onOpenChange?.(open)}
     >
       <DialogContent
-        className="flex h-[75vh] max-h-[calc(100vh-2rem)] flex-col sm:max-w-5xl md:max-w-6xl"
+        className="flex h-[75vh] max-h-[calc(100vh-2rem)] flex-col overflow-hidden sm:max-w-5xl md:max-w-6xl"
         aria-describedby={undefined}
       >
         <DialogHeader className="gap-1">
@@ -211,7 +212,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                         "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                         active
                           ? "bg-primary text-primary-foreground shadow-sm"
-                          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                          : "text-muted-foreground hover:bg-secondary hover:text-foreground",
                       )}
                     >
                       <Icon className="size-4" />
@@ -223,7 +224,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
             </ul>
           </nav>
           <ScrollArea className="h-full min-h-0 rounded-lg border">
-            <div className="space-y-8 p-6">
+            <div className="space-y-6 p-5">
               {activeSection === "account" && <AccountSettingsPage />}
               {activeSection === "appearance" && <AppearanceSettingsPage />}
               {activeSection === "memory" && <MemorySettingsPage />}
diff --git a/frontend/src/components/workspace/settings/settings-section.tsx b/frontend/src/components/workspace/settings/settings-section.tsx
index 957ead8b720..4f57926aa8e 100644
--- a/frontend/src/components/workspace/settings/settings-section.tsx
+++ b/frontend/src/components/workspace/settings/settings-section.tsx
@@ -12,14 +12,16 @@ export function SettingsSection({
   children: React.ReactNode;
 }) {
   return (
-    <section className={cn(className)}>
-      <header className="space-y-2">
-        <div className="text-lg font-semibold">{title}</div>
+    <section className={cn("space-y-4", className)}>
+      <header className="space-y-1">
+        <div className="text-[15px] font-semibold tracking-tight">{title}</div>
         {description && (
-          <div className="text-muted-foreground text-sm">{description}</div>
+          <div className="text-muted-foreground text-[13px] leading-relaxed">
+            {description}
+          </div>
         )}
       </header>
-      <main className="mt-4">{children}</main>
+      <main>{children}</main>
     </section>
   );
 }
diff --git a/frontend/src/components/workspace/settings/skill-settings-page.tsx b/frontend/src/components/workspace/settings/skill-settings-page.tsx
index f1b21638c59..1308f959847 100644
--- a/frontend/src/components/workspace/settings/skill-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/skill-settings-page.tsx
@@ -48,7 +48,9 @@ export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
           {t.settings.skills.adminRequired}
         </div>
       ) : error ? (
-        <div>Error: {error.message}</div>
+        <div className="text-destructive text-sm">
+          {t.settings.skills.loadError}: {error.message}
+        </div>
       ) : (
         <SkillSettingsList skills={skills} onClose={onClose} />
       )}
diff --git a/frontend/src/components/workspace/settings/tool-settings-page.tsx b/frontend/src/components/workspace/settings/tool-settings-page.tsx
index 7572dfe300b..20335379972 100644
--- a/frontend/src/components/workspace/settings/tool-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/tool-settings-page.tsx
@@ -33,7 +33,9 @@ export function ToolSettingsPage() {
           {t.settings.tools.adminRequired}
         </div>
       ) : error ? (
-        <div>Error: {error.message}</div>
+        <div className="text-destructive text-sm">
+          {t.settings.tools.loadError}: {error.message}
+        </div>
       ) : (
         config && <MCPServerList servers={config.mcp_servers} />
       )}
diff --git a/frontend/src/components/workspace/welcome.tsx b/frontend/src/components/workspace/welcome.tsx
index a0a8d23ac7b..7b92a2ef3fa 100644
--- a/frontend/src/components/workspace/welcome.tsx
+++ b/frontend/src/components/workspace/welcome.tsx
@@ -40,11 +40,11 @@ export function Welcome({
   return (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-full flex-col items-center justify-center gap-2 px-4 py-4 text-center sm:px-8",
+        "mx-auto flex w-full max-w-[640px] flex-col items-center justify-center gap-6 px-4 py-4 text-center sm:px-8",
         className,
       )}
     >
-      <div className="max-w-full text-2xl font-bold">
+      <div className="max-w-full text-[2.6rem] leading-[1.15] font-bold tracking-tight">
         {searchParams.get("mode") === "skill" ? (
           `✨ ${t.welcome.createYourOwnSkill} ✨`
         ) : (
@@ -57,13 +57,17 @@ export function Welcome({
         )}
       </div>
       {searchParams.get("mode") === "skill" ? (
-        <div className="text-muted-foreground max-w-full text-sm">
+        <div className="text-muted-foreground max-w-[520px] text-[15px] leading-[1.75]">
           <WelcomeDescription>
             {t.welcome.createYourOwnSkillDescription}
           </WelcomeDescription>
         </div>
       ) : (
-        <div className="text-muted-foreground max-w-full text-sm">
+        <div
+          className={cn(
+            "text-muted-foreground max-w-[520px] text-[15px] leading-[1.75]",
+          )}
+        >
           <WelcomeDescription>{t.welcome.description}</WelcomeDescription>
         </div>
       )}
diff --git a/frontend/src/components/workspace/workspace-nav-chat-list.tsx b/frontend/src/components/workspace/workspace-nav-chat-list.tsx
index b7285d8d40b..0233a769a65 100644
--- a/frontend/src/components/workspace/workspace-nav-chat-list.tsx
+++ b/frontend/src/components/workspace/workspace-nav-chat-list.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { BotIcon, CalendarClock, MessagesSquare } from "lucide-react";
+import { BotIcon, CalendarClock } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -25,14 +25,6 @@ export function WorkspaceNavChatList() {
   return (
     <SidebarGroup className="pt-1">
       <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton isActive={pathname === "/workspace/chats"} asChild>
-            <Link className="text-muted-foreground" href="/workspace/chats">
-              <MessagesSquare />
-              <span>{t.sidebar.chats}</span>
-            </Link>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
         <SidebarMenuItem>
           {agentsEnabled ? (
             <SidebarMenuButton
diff --git a/frontend/src/components/workspace/workspace-nav-menu.tsx b/frontend/src/components/workspace/workspace-nav-menu.tsx
index 98cd2355c50..2cdc561b8b1 100644
--- a/frontend/src/components/workspace/workspace-nav-menu.tsx
+++ b/frontend/src/components/workspace/workspace-nav-menu.tsx
@@ -1,10 +1,8 @@
 "use client";
 
 import {
-  BugIcon,
   ChevronsUpDown,
   GlobeIcon,
-  InfoIcon,
   MailIcon,
   Settings2Icon,
   SettingsIcon,
@@ -106,20 +104,10 @@ export function WorkspaceNavMenu() {
                   >
                     <DropdownMenuItem>
                       <GithubIcon />
-                      {t.workspace.visitGithub}
+                      {t.workspace.github}
                     </DropdownMenuItem>
                   </a>
                   <DropdownMenuSeparator />
-                  <a
-                    href="https://github.com/bytedance/deer-flow/issues"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <DropdownMenuItem>
-                      <BugIcon />
-                      {t.workspace.reportIssue}
-                    </DropdownMenuItem>
-                  </a>
                   <a href="mailto:support@deerflow.tech">
                     <DropdownMenuItem>
                       <MailIcon />
@@ -127,15 +115,6 @@ export function WorkspaceNavMenu() {
                     </DropdownMenuItem>
                   </a>
                 </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={() => {
-                    openSettings("about");
-                  }}
-                >
-                  <InfoIcon />
-                  {t.workspace.about}
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : (
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index 4b8bf110530..fa7c17d3023 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -297,7 +297,6 @@ export const enUS: Translations = {
   // Sidebar
   sidebar: {
     newChat: "New chat",
-    chats: "Chats",
     channels: "Channels",
     recentChats: "Recent chats",
     demoChats: "Demo chats",
@@ -380,6 +379,8 @@ export const enUS: Translations = {
 
   // Scheduled tasks
   scheduledTasks: {
+    title: "Scheduled tasks",
+    description: "Manage when and how often automated tasks run.",
     scheduleType: {
       cron: "Recurring",
       once: "One-time",
@@ -395,6 +396,9 @@ export const enUS: Translations = {
     fields: {
       minute: "Minute",
       time: "Time",
+      year: "Year",
+      month: "Month",
+      day: "Day",
       weekday: "On",
       dayOfMonth: "Day of month",
       cron: "Cron expression",
@@ -402,6 +406,24 @@ export const enUS: Translations = {
       runAt: "Run at",
       timezone: "Timezone",
     },
+    timezone: {
+      more: "More timezones",
+      less: "Show common",
+      common: {
+        UTC: "UTC",
+        "Asia/Shanghai": "Shanghai (China)",
+        "Asia/Hong_Kong": "Hong Kong",
+        "Asia/Taipei": "Taipei",
+        "Asia/Tokyo": "Tokyo (Japan)",
+        "Asia/Seoul": "Seoul (South Korea)",
+        "Asia/Singapore": "Singapore",
+        "Europe/London": "London (UK)",
+        "Europe/Berlin": "Berlin (Germany)",
+        "America/New_York": "New York (US)",
+        "America/Chicago": "Chicago (US)",
+        "America/Los_Angeles": "Los Angeles (US)",
+      },
+    },
     weekdays: {
       mon: "Mon",
       tue: "Tue",
@@ -415,10 +437,12 @@ export const enUS: Translations = {
     cronHelp: "Open crontab.guru",
     create: {
       title: "Create scheduled task",
+      back: "Back to scheduled tasks",
       taskTitle: "Task title",
       prompt: "Prompt",
       submit: "Create",
-      fillRequired: "Fill all required fields",
+      invalidOnce: "Enter a valid date and time",
+      sourceMissing: "The task to duplicate could not be loaded.",
     },
     context: {
       fresh: "Fresh thread",
@@ -429,14 +453,8 @@ export const enUS: Translations = {
         "If this thread has an active run at the scheduled time, DeerFlow queues this occurrence and starts it when the thread is available. It fails if the configured queue wait limit is exceeded.",
     },
     filters: {
-      allStatuses: "All statuses",
       enabled: "Enabled",
       paused: "Paused",
-      completed: "Completed",
-      failed: "Failed",
-      allTypes: "All types",
-      cron: "Cron",
-      once: "Once",
     },
     detail: {
       contextMode: "Context mode",
@@ -445,12 +463,15 @@ export const enUS: Translations = {
       schedule: "Schedule",
       nextRun: "Next run",
       lastRun: "Last run",
-      lastRunId: "Last run id",
       lastError: "Last error",
       runsCount: "{count} runs",
       runsCountOne: "{count} run",
       noRuns: "No runs yet",
-      noSelection: "No scheduled task selected",
+      noTasksTitle: "No scheduled tasks yet",
+      noTasksDescription:
+        "Create a scheduled task to let DeerFlow run workflows on a schedule.",
+      noMatchesTitle: "No tasks match this filter",
+      noMatchesDescription: "Try switching back to view all scheduled tasks.",
       filteredByThread: "Filtered by thread: {id}",
       loadFailed: "Failed to load scheduled tasks",
     },
@@ -478,6 +499,7 @@ export const enUS: Translations = {
       titlePlaceholder: "Edit title",
       promptPlaceholder: "Edit prompt",
       submit: "Save edit",
+      invalidOnce: "Enter a valid date and time",
     },
     status: {
       enabled: "Enabled",
@@ -497,25 +519,6 @@ export const enUS: Translations = {
       skipped: "Skipped",
       interrupted: "Interrupted",
     },
-    recipes: {
-      label: "Quick create",
-      trending: {
-        title: "GitHub Trending daily",
-        desc: "Summarize today's top 10 trending repos",
-      },
-      news: {
-        title: "Daily tech news digest",
-        desc: "Collect and summarize the day's top tech news",
-      },
-      issues: {
-        title: "GitHub Issue triage",
-        desc: "Triage a repo's open issues (fill in {{repo}})",
-      },
-      weekly: {
-        title: "Weekly report",
-        desc: "Compile a weekly summary, every Monday",
-      },
-    },
   },
 
   // Agents
@@ -601,10 +604,8 @@ export const enUS: Translations = {
     officialWebsite: "DeerFlow's official website",
     githubTooltip: "DeerFlow on GitHub",
     settingsAndMore: "Settings and more",
-    visitGithub: "DeerFlow on GitHub",
-    reportIssue: "Report an issue",
+    github: "GitHub",
     contactUs: "Contact us",
-    about: "About DeerFlow",
     logout: "Log out",
     gatewayUnavailable: "Gateway is temporarily unavailable.",
     gatewayUnavailableRetrying: "Retrying in the background…",
@@ -852,6 +853,7 @@ export const enUS: Translations = {
       description:
         "DeerFlow automatically learns from your conversations in the background. These memories help DeerFlow understand you better and deliver a more personalized experience.",
       empty: "No memory data to display.",
+      loadError: "Failed to load memory data",
       rawJson: "Raw JSON",
       exportButton: "Export memory",
       exportSuccess: "Memory exported",
@@ -888,28 +890,12 @@ export const enUS: Translations = {
       factValidationContent: "Fact content cannot be empty.",
       factValidationConfidence: "Confidence must be a number between 0 and 1.",
       noFacts: "No saved facts yet.",
-      summaryReadOnly:
-        "Summary sections are read-only for now. You can currently add, edit, or delete individual facts, or clear all memory.",
       memoryFullyEmpty: "No memory saved yet.",
       factPreviewLabel: "Fact to delete",
       searchPlaceholder: "Search memory",
-      filterAll: "All",
-      filterFacts: "Facts",
-      filterSummaries: "Summaries",
       noMatches: "No matching memory found.",
       markdown: {
-        overview: "Overview",
-        userContext: "User context",
-        work: "Work",
-        personal: "Personal",
-        topOfMind: "Top of mind",
-        historyBackground: "History",
-        recentMonths: "Recent months",
-        earlierContext: "Earlier context",
-        longTermBackground: "Long-term background",
-        updatedAt: "Updated at",
         facts: "Facts",
-        empty: "(empty)",
         table: {
           category: "Category",
           confidence: "Confidence",
@@ -938,12 +924,16 @@ export const enUS: Translations = {
       darkDescription: "Dim palette that reduces glare for focus.",
       languageTitle: "Language",
       languageDescription: "Switch between languages.",
+      skinTitle: "Skin",
+      skinDescription:
+        "Choose the interface look. Light and dark can be switched separately.",
     },
     tools: {
       title: "Tools",
       description: "Manage the configuration and enabled status of MCP tools.",
       adminRequired: "Admin privileges are required to manage MCP tools.",
       empty: "No MCP tools configured.",
+      loadError: "Failed to load tool configuration",
     },
     subagents: {
       title: "Subagents",
@@ -1221,6 +1211,7 @@ export const enUS: Translations = {
       adminRequired: "Admin privileges are required to manage agent skills.",
       installAdminRequired:
         "Admin privileges are required to install agent skills.",
+      loadError: "Failed to load skills",
     },
     notification: {
       title: "Notification",
@@ -1261,6 +1252,13 @@ export const enUS: Translations = {
       emptyDescription: "Credits and acknowledgements will show here.",
     },
   },
+
+  skins: {
+    classic: {
+      name: "Classic",
+      tagline: "The current DeerFlow look.",
+    },
+  },
   login: {
     signInTitle: "Sign in to your account",
     createAccountTitle: "Create a new account",
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index 59404abb89e..33256d1f171 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -223,7 +223,6 @@ export interface Translations {
   sidebar: {
     recentChats: string;
     newChat: string;
-    chats: string;
     demoChats: string;
     agents: string;
     scheduledTasks: string;
@@ -301,6 +300,8 @@ export interface Translations {
 
   // Scheduled tasks
   scheduledTasks: {
+    title: string;
+    description: string;
     scheduleType: { cron: string; once: string };
     preset: {
       label: string;
@@ -313,6 +314,9 @@ export interface Translations {
     fields: {
       minute: string;
       time: string;
+      year: string;
+      month: string;
+      day: string;
       weekday: string;
       dayOfMonth: string;
       cron: string;
@@ -320,6 +324,24 @@ export interface Translations {
       runAt: string;
       timezone: string;
     };
+    timezone: {
+      more: string;
+      less: string;
+      common: {
+        UTC: string;
+        "Asia/Shanghai": string;
+        "Asia/Hong_Kong": string;
+        "Asia/Taipei": string;
+        "Asia/Tokyo": string;
+        "Asia/Seoul": string;
+        "Asia/Singapore": string;
+        "Europe/London": string;
+        "Europe/Berlin": string;
+        "America/New_York": string;
+        "America/Chicago": string;
+        "America/Los_Angeles": string;
+      };
+    };
     weekdays: {
       mon: string;
       tue: string;
@@ -333,10 +355,12 @@ export interface Translations {
     cronHelp: string;
     create: {
       title: string;
+      back: string;
       taskTitle: string;
       prompt: string;
       submit: string;
-      fillRequired: string;
+      invalidOnce: string;
+      sourceMissing: string;
     };
     context: {
       fresh: string;
@@ -346,14 +370,8 @@ export interface Translations {
       reuseNoticeDescription: string;
     };
     filters: {
-      allStatuses: string;
       enabled: string;
       paused: string;
-      completed: string;
-      failed: string;
-      allTypes: string;
-      cron: string;
-      once: string;
     };
     detail: {
       contextMode: string;
@@ -362,12 +380,14 @@ export interface Translations {
       schedule: string;
       nextRun: string;
       lastRun: string;
-      lastRunId: string;
       lastError: string;
       runsCount: string;
       runsCountOne: string;
       noRuns: string;
-      noSelection: string;
+      noTasksTitle: string;
+      noTasksDescription: string;
+      noMatchesTitle: string;
+      noMatchesDescription: string;
       filteredByThread: string;
       loadFailed: string;
     };
@@ -394,6 +414,7 @@ export interface Translations {
       titlePlaceholder: string;
       promptPlaceholder: string;
       submit: string;
+      invalidOnce: string;
     };
     status: {
       enabled: string;
@@ -413,13 +434,6 @@ export interface Translations {
       skipped: string;
       interrupted: string;
     };
-    recipes: {
-      label: string;
-      trending: { title: string; desc: string };
-      news: { title: string; desc: string };
-      issues: { title: string; desc: string };
-      weekly: { title: string; desc: string };
-    };
   };
 
   // Agents
@@ -489,10 +503,8 @@ export interface Translations {
     officialWebsite: string;
     githubTooltip: string;
     settingsAndMore: string;
-    visitGithub: string;
-    reportIssue: string;
+    github: string;
     contactUs: string;
-    about: string;
     logout: string;
     gatewayUnavailable: string;
     gatewayUnavailableRetrying: string;
@@ -720,6 +732,7 @@ export interface Translations {
       title: string;
       description: string;
       empty: string;
+      loadError: string;
       rawJson: string;
       exportButton: string;
       exportSuccess: string;
@@ -752,27 +765,12 @@ export interface Translations {
       factValidationContent: string;
       factValidationConfidence: string;
       noFacts: string;
-      summaryReadOnly: string;
       memoryFullyEmpty: string;
       factPreviewLabel: string;
       searchPlaceholder: string;
-      filterAll: string;
-      filterFacts: string;
-      filterSummaries: string;
       noMatches: string;
       markdown: {
-        overview: string;
-        userContext: string;
-        work: string;
-        personal: string;
-        topOfMind: string;
-        historyBackground: string;
-        recentMonths: string;
-        earlierContext: string;
-        longTermBackground: string;
-        updatedAt: string;
         facts: string;
-        empty: string;
         table: {
           category: string;
           confidence: string;
@@ -800,12 +798,15 @@ export interface Translations {
       darkDescription: string;
       languageTitle: string;
       languageDescription: string;
+      skinTitle: string;
+      skinDescription: string;
     };
     tools: {
       title: string;
       description: string;
       adminRequired: string;
       empty: string;
+      loadError: string;
     };
     subagents: {
       title: string;
@@ -972,6 +973,7 @@ export interface Translations {
       emptyButton: string;
       adminRequired: string;
       installAdminRequired: string;
+      loadError: string;
     };
     notification: {
       title: string;
@@ -1010,6 +1012,13 @@ export interface Translations {
     };
   };
 
+  skins: {
+    classic: {
+      name: string;
+      tagline: string;
+    };
+  };
+
   // Login / Auth
   login: {
     signInTitle: string;
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index b955e1ee00e..ce37aca0e3c 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -281,7 +281,6 @@ export const zhCN: Translations = {
   // Sidebar
   sidebar: {
     newChat: "新对话",
-    chats: "对话",
     channels: "渠道",
     recentChats: "最近的对话",
     demoChats: "演示对话",
@@ -362,6 +361,8 @@ export const zhCN: Translations = {
 
   // 定时任务
   scheduledTasks: {
+    title: "定时任务",
+    description: "配置和管理自动化任务，让 DeerFlow 按计划执行工作流。",
     scheduleType: {
       cron: "重复",
       once: "单次",
@@ -377,6 +378,9 @@ export const zhCN: Translations = {
     fields: {
       minute: "分钟",
       time: "时间",
+      year: "年",
+      month: "月",
+      day: "日",
       weekday: "在",
       dayOfMonth: "几号",
       cron: "cron 表达式",
@@ -384,6 +388,24 @@ export const zhCN: Translations = {
       runAt: "运行时间",
       timezone: "时区",
     },
+    timezone: {
+      more: "更多时区",
+      less: "收起",
+      common: {
+        UTC: "UTC（协调世界时）",
+        "Asia/Shanghai": "上海（中国）",
+        "Asia/Hong_Kong": "香港",
+        "Asia/Taipei": "台北",
+        "Asia/Tokyo": "东京（日本）",
+        "Asia/Seoul": "首尔（韩国）",
+        "Asia/Singapore": "新加坡",
+        "Europe/London": "伦敦（英国）",
+        "Europe/Berlin": "柏林（德国）",
+        "America/New_York": "纽约（美国）",
+        "America/Chicago": "芝加哥（美国）",
+        "America/Los_Angeles": "洛杉矶（美国）",
+      },
+    },
     weekdays: {
       mon: "周一",
       tue: "周二",
@@ -396,11 +418,13 @@ export const zhCN: Translations = {
     preview: "预览",
     cronHelp: "打开 crontab.guru",
     create: {
-      title: "创建定时任务",
+      title: "新建定时任务",
+      back: "返回定时任务",
       taskTitle: "任务标题",
       prompt: "提示词",
-      submit: "创建",
-      fillRequired: "请填写所有必填项",
+      submit: "新建",
+      invalidOnce: "请输入有效的日期和时间",
+      sourceMissing: "无法加载要复制的任务。",
     },
     context: {
       fresh: "新线程",
@@ -411,14 +435,8 @@ export const zhCN: Translations = {
         "如果触发时该线程正在运行，DeerFlow 会将本次执行排队，并在线程空闲后启动；超过配置的最长等待时间后会标记为失败。",
     },
     filters: {
-      allStatuses: "全部状态",
       enabled: "已启用",
       paused: "已暂停",
-      completed: "已完成",
-      failed: "已失败",
-      allTypes: "全部类型",
-      cron: "定时",
-      once: "单次",
     },
     detail: {
       contextMode: "上下文模式",
@@ -427,12 +445,14 @@ export const zhCN: Translations = {
       schedule: "调度",
       nextRun: "下次运行",
       lastRun: "上次运行",
-      lastRunId: "上次运行 ID",
       lastError: "上次错误",
       runsCount: "{count} 次运行",
       runsCountOne: "{count} 次运行",
       noRuns: "暂无运行",
-      noSelection: "未选择定时任务",
+      noTasksTitle: "还没有定时任务",
+      noTasksDescription: "创建一个定时任务，让 DeerFlow 按计划自动执行。",
+      noMatchesTitle: "没有符合该筛选条件的任务",
+      noMatchesDescription: "切换筛选条件以查看全部定时任务。",
       filteredByThread: "按线程筛选：{id}",
       loadFailed: "加载定时任务失败",
     },
@@ -448,7 +468,7 @@ export const zhCN: Translations = {
     },
     deleteConfirm: "确定要删除该定时任务吗？此操作不可撤销。",
     errors: {
-      create: "创建定时任务失败",
+      create: "新建定时任务失败",
       update: "更新定时任务失败",
       pause: "暂停定时任务失败",
       resume: "恢复定时任务失败",
@@ -459,6 +479,7 @@ export const zhCN: Translations = {
       titlePlaceholder: "编辑标题",
       promptPlaceholder: "编辑提示词",
       submit: "保存编辑",
+      invalidOnce: "请输入有效的日期和时间",
     },
     status: {
       enabled: "已启用",
@@ -478,25 +499,6 @@ export const zhCN: Translations = {
       skipped: "跳过",
       interrupted: "已中断",
     },
-    recipes: {
-      label: "快速创建",
-      trending: {
-        title: "GitHub Trending 日榜",
-        desc: "总结今日 Trending 前十仓库",
-      },
-      news: {
-        title: "每日科技新闻摘要",
-        desc: "收集并总结当日科技要闻",
-      },
-      issues: {
-        title: "GitHub Issue 分诊",
-        desc: "分诊某仓库的 open issues（填入 {{repo}}）",
-      },
-      weekly: {
-        title: "每周周报",
-        desc: "每周一汇总一周工作",
-      },
-    },
   },
 
   // Agents
@@ -574,10 +576,8 @@ export const zhCN: Translations = {
     officialWebsite: "访问 DeerFlow 官方网站",
     githubTooltip: "访问 DeerFlow 的 GitHub 仓库",
     settingsAndMore: "设置和更多",
-    visitGithub: "在 GitHub 上查看 DeerFlow",
-    reportIssue: "报告问题",
+    github: "GitHub",
     contactUs: "联系我们",
-    about: "关于 DeerFlow",
     logout: "退出登录",
     gatewayUnavailable: "网关暂时不可用。",
     gatewayUnavailableRetrying: "正在后台重试…",
@@ -819,6 +819,7 @@ export const zhCN: Translations = {
       description:
         "DeerFlow 会在后台不断从你的对话中自动学习。这些记忆能帮助 DeerFlow 更好地理解你，并提供更个性化的体验。",
       empty: "暂无可展示的记忆数据。",
+      loadError: "加载记忆数据失败",
       rawJson: "原始 JSON",
       exportButton: "导出记忆",
       exportSuccess: "记忆已导出",
@@ -853,28 +854,12 @@ export const zhCN: Translations = {
       factValidationContent: "事实内容不能为空。",
       factValidationConfidence: "置信度必须是 0 到 1 之间的数字。",
       noFacts: "还没有保存的事实。",
-      summaryReadOnly:
-        "摘要分区当前仍为只读。现在你可以清空全部记忆或删除单条事实。",
       memoryFullyEmpty: "还没有保存任何记忆。",
       factPreviewLabel: "即将删除的事实",
       searchPlaceholder: "搜索记忆",
-      filterAll: "全部",
-      filterFacts: "事实",
-      filterSummaries: "摘要",
       noMatches: "没有找到匹配的记忆。",
       markdown: {
-        overview: "概览",
-        userContext: "用户上下文",
-        work: "工作",
-        personal: "个人",
-        topOfMind: "近期关注（Top of mind）",
-        historyBackground: "历史背景",
-        recentMonths: "近几个月",
-        earlierContext: "更早上下文",
-        longTermBackground: "长期背景",
-        updatedAt: "更新于",
         facts: "事实",
-        empty: "（空）",
         table: {
           category: "类别",
           confidence: "置信度",
@@ -902,12 +887,15 @@ export const zhCN: Translations = {
       darkDescription: "更暗的配色，减少眩光方便专注。",
       languageTitle: "语言",
       languageDescription: "在不同语言之间切换。",
+      skinTitle: "皮肤",
+      skinDescription: "选择界面外观。",
     },
     tools: {
       title: "工具",
       description: "管理 MCP 工具的配置和启用状态。",
       adminRequired: "需要管理员权限才能管理 MCP 工具。",
       empty: "暂无 MCP 工具。",
+      loadError: "加载工具配置失败",
     },
     subagents: {
       title: "子智能体",
@@ -1165,6 +1153,7 @@ export const zhCN: Translations = {
         "将你的 Agent Skill 文件夹放在 DeerFlow 根目录下的 `/skills/custom` 文件夹中。",
       emptyButton: "创建你的第一个技能",
       adminRequired: "需要管理员权限才能管理 Agent Skill。",
+      loadError: "加载技能失败",
       installAdminRequired: "需要管理员权限才能安装 Agent Skill。",
     },
     notification: {
@@ -1206,6 +1195,13 @@ export const zhCN: Translations = {
       emptyDescription: "相关的致谢信息会展示在这里。",
     },
   },
+
+  skins: {
+    classic: {
+      name: "经典",
+      tagline: "当前 DeerFlow 默认外观。",
+    },
+  },
   login: {
     signInTitle: "登录你的账号",
     createAccountTitle: "创建新账号",
diff --git a/frontend/src/core/scheduled-tasks/cron.ts b/frontend/src/core/scheduled-tasks/cron.ts
index 3802154e443..0d8430126ac 100644
--- a/frontend/src/core/scheduled-tasks/cron.ts
+++ b/frontend/src/core/scheduled-tasks/cron.ts
@@ -23,7 +23,6 @@ export type ScheduleFormState = {
   scheduleType: "once" | "cron";
   preset?: CronPreset;
   parts?: CronParts;
-  /** datetime-local wall value "YYYY-MM-DDTHH:mm", interpreted in `timezone`. */
   runAtLocal?: string;
   timezone: string;
 };
@@ -50,17 +49,6 @@ const WEEKDAY_TO_CRON: Record<Weekday, string> = {
   sun: "0",
 };
 
-const CRON_TO_WEEKDAY: Record<string, Weekday> = {
-  "0": "sun",
-  "1": "mon",
-  "2": "tue",
-  "3": "wed",
-  "4": "thu",
-  "5": "fri",
-  "6": "sat",
-  "7": "sun",
-};
-
 const EN_WEEKDAY: Record<Weekday, string> = {
   mon: "Mon",
   tue: "Tue",
@@ -81,6 +69,17 @@ const ZH_WEEKDAY: Record<Weekday, string> = {
   sun: "周日",
 };
 
+const CRON_TO_WEEKDAY: Record<string, Weekday> = {
+  "0": "sun",
+  "1": "mon",
+  "2": "tue",
+  "3": "wed",
+  "4": "thu",
+  "5": "fri",
+  "6": "sat",
+  "7": "sun",
+};
+
 function clamp(
   value: number | undefined,
   min: number,
@@ -96,6 +95,39 @@ export function pad2(n: number): string {
   return String(Math.trunc(Number.isFinite(n) ? n : 0)).padStart(2, "0");
 }
 
+/**
+ * Build a "YYYY-MM-DDTHH:mm" wall-time string for a one-time run from the
+ * individual year/month/day/time fields, or "" when the inputs do not form a
+ * valid date. Mirrors the bounds checks the form previously inlined: integer
+ * fields, year >= 1970, month 1-12, day 1-31, and a day that actually exists
+ * in the month (rejects e.g. Feb 30 via the Date.UTC rollover check).
+ */
+export function buildOnceRunAtLocal(
+  year: string,
+  month: string,
+  day: string,
+  time: string,
+): string {
+  const y = Number(year);
+  const mo = Number(month);
+  const d = Number(day);
+  const valid =
+    year !== "" &&
+    month !== "" &&
+    day !== "" &&
+    time !== "" &&
+    Number.isInteger(y) &&
+    Number.isInteger(mo) &&
+    Number.isInteger(d) &&
+    y >= 1970 &&
+    mo >= 1 &&
+    mo <= 12 &&
+    d >= 1 &&
+    d <= 31 &&
+    new Date(Date.UTC(y, mo - 1, d)).getUTCDate() === d;
+  return valid ? `${year}-${pad2(mo)}-${pad2(d)}T${time}` : "";
+}
+
 function orderedWeekdays(days: Weekday[] | undefined): Weekday[] {
   const set = new Set(days ?? []);
   return WEEKDAYS.filter((w) => set.has(w));
@@ -245,7 +277,6 @@ export function describeSchedule(
         ? `自定义: ${parts.raw ?? ""} (${tz})`
         : `Custom: ${parts.raw ?? ""} (${tz})`;
   }
-  // Unreachable — switch is exhaustive over CronPreset.
   return zh ? `自定义 (${tz})` : `Custom (${tz})`;
 }
 
diff --git a/frontend/src/core/scheduled-tasks/duplicate-draft.ts b/frontend/src/core/scheduled-tasks/duplicate-draft.ts
new file mode 100644
index 00000000000..8f8d45c03ab
--- /dev/null
+++ b/frontend/src/core/scheduled-tasks/duplicate-draft.ts
@@ -0,0 +1,145 @@
+import type { ScheduledTask } from "./types";
+
+export const DUPLICATE_DRAFT_VERSION = 1;
+export const DUPLICATE_DRAFT_PREFIX = "deerflow:scheduled-task-duplicate:v1";
+
+export type DuplicateDraft = {
+  title: string;
+  prompt: string;
+  context_mode: "fresh_thread_per_run" | "reuse_thread";
+  thread_id: string | null;
+  schedule_type: "once" | "cron";
+  schedule_spec: Record<string, unknown>;
+  timezone: string;
+};
+
+export type DuplicateDraftStorage = Pick<
+  Storage,
+  "getItem" | "setItem" | "removeItem"
+>;
+
+export function getSessionDuplicateDraftStorage(): DuplicateDraftStorage | null {
+  try {
+    if (typeof window === "undefined") {
+      return null;
+    }
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function buildDuplicateDraftKey(taskId: string) {
+  return `${DUPLICATE_DRAFT_PREFIX}:${encodeURIComponent(taskId)}`;
+}
+
+export function resolveCreateContextMode({
+  contextModeParam,
+  threadIdParam,
+}: {
+  contextModeParam: string | null;
+  threadIdParam: string | null;
+}): "fresh_thread_per_run" | "reuse_thread" {
+  if (
+    contextModeParam === "reuse_thread" ||
+    contextModeParam === "fresh_thread_per_run"
+  ) {
+    return contextModeParam;
+  }
+  return threadIdParam ? "reuse_thread" : "fresh_thread_per_run";
+}
+
+export function draftFromScheduledTask(
+  task: ScheduledTask,
+  titleSuffix: string,
+): DuplicateDraft {
+  return {
+    title: `${task.title}${titleSuffix}`,
+    prompt: task.prompt,
+    context_mode: task.context_mode,
+    thread_id: task.thread_id,
+    schedule_type: task.schedule_type,
+    schedule_spec: task.schedule_spec,
+    timezone: task.timezone,
+  };
+}
+
+export function readDuplicateDraft(
+  storage: DuplicateDraftStorage | null | undefined,
+  taskId: string,
+): DuplicateDraft | null {
+  try {
+    if (!storage) {
+      return null;
+    }
+    const raw = storage.getItem(buildDuplicateDraftKey(taskId));
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as {
+      version?: unknown;
+      title?: unknown;
+      prompt?: unknown;
+      context_mode?: unknown;
+      thread_id?: unknown;
+      schedule_type?: unknown;
+      schedule_spec?: unknown;
+      timezone?: unknown;
+    };
+    if (
+      parsed.version !== DUPLICATE_DRAFT_VERSION ||
+      typeof parsed.title !== "string" ||
+      typeof parsed.prompt !== "string" ||
+      (parsed.context_mode !== "fresh_thread_per_run" &&
+        parsed.context_mode !== "reuse_thread") ||
+      !(parsed.thread_id === null || typeof parsed.thread_id === "string") ||
+      (parsed.schedule_type !== "once" && parsed.schedule_type !== "cron") ||
+      typeof parsed.schedule_spec !== "object" ||
+      parsed.schedule_spec === null ||
+      typeof parsed.timezone !== "string"
+    ) {
+      return null;
+    }
+    return {
+      title: parsed.title,
+      prompt: parsed.prompt,
+      context_mode: parsed.context_mode,
+      thread_id: parsed.thread_id,
+      schedule_type: parsed.schedule_type,
+      schedule_spec: parsed.schedule_spec as Record<string, unknown>,
+      timezone: parsed.timezone,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function writeDuplicateDraft(
+  storage: DuplicateDraftStorage | null | undefined,
+  taskId: string,
+  draft: DuplicateDraft,
+) {
+  try {
+    if (!storage) {
+      return;
+    }
+    storage.setItem(
+      buildDuplicateDraftKey(taskId),
+      JSON.stringify({ version: DUPLICATE_DRAFT_VERSION, ...draft }),
+    );
+  } catch {
+    // Ignore quota / private-mode failures; the create page can still load
+    // the source task from the scheduled-tasks list.
+  }
+}
+
+export function clearDuplicateDraft(
+  storage: DuplicateDraftStorage | null | undefined,
+  taskId: string,
+) {
+  try {
+    storage?.removeItem(buildDuplicateDraftKey(taskId));
+  } catch {
+    // Ignore storage failures.
+  }
+}
diff --git a/frontend/src/core/scheduled-tasks/recipes.ts b/frontend/src/core/scheduled-tasks/recipes.ts
deleted file mode 100644
index 2f021ab659f..00000000000
--- a/frontend/src/core/scheduled-tasks/recipes.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { ScheduleValue } from "@/components/workspace/scheduled-task-schedule-input";
-
-export type RecipeTitleKey = "trending" | "news" | "issues" | "weekly";
-
-export type Recipe = {
-  id: string;
-  icon: string;
-  titleKey: RecipeTitleKey;
-  prompt: string;
-  schedule: ScheduleValue;
-};
-
-// Front-end-only starter recipes. The schedule's timezone is left empty so the
-// ScheduleInput falls back to the browser-detected timezone when applied.
-// `{{repo}}` style placeholders are intentional — the user fills them in the
-// prompt field after applying the recipe.
-export const RECIPES: Recipe[] = [
-  {
-    id: "trending",
-    icon: "🔥",
-    titleKey: "trending",
-    prompt:
-      "Use web_search to open today's GitHub Trending page, then summarize the top 10 repositories. For each: name, primary language, today's star delta, and a one-line description of what it is and why it's trending. Output as a markdown list.",
-    schedule: {
-      schedule_type: "cron",
-      schedule_spec: { cron: "0 9 * * *" },
-      timezone: "",
-    },
-  },
-  {
-    id: "news",
-    icon: "📰",
-    titleKey: "news",
-    prompt:
-      "Use web_search to collect today's top tech news across AI, developer tools, infrastructure, and security. Summarize the 5 most important items: headline, source, and a one-line takeaway each. Output as a markdown list.",
-    schedule: {
-      schedule_type: "cron",
-      schedule_spec: { cron: "0 9 * * *" },
-      timezone: "",
-    },
-  },
-  {
-    id: "issues",
-    icon: "🏷️",
-    titleKey: "issues",
-    prompt:
-      "Triage the open issues in {{repo}}: list the 10 most recent, label each as bug / feature / question, flag any that look stale or high-priority, and suggest 2 that are good first issues. Replace {{repo}} with the target repository (owner/name). Output as a markdown table.",
-    schedule: {
-      schedule_type: "cron",
-      schedule_spec: { cron: "0 9 * * *" },
-      timezone: "",
-    },
-  },
-  {
-    id: "weekly",
-    icon: "📅",
-    titleKey: "weekly",
-    prompt:
-      "Compile a weekly report: what was accomplished this week, what is currently blocked, and the top 3 priorities for next week. Keep it concise and skimmable.",
-    schedule: {
-      schedule_type: "cron",
-      schedule_spec: { cron: "0 9 * * 1" },
-      timezone: "",
-    },
-  },
-];
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index d7686577aa5..1d2a162f015 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -245,38 +245,50 @@
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(0.9855 0.0098 87.47);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0.0098 87.47);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0.0098 87.47);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.9455 0.0098 87.47);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0.0098 87.47);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.94 0.0098 87.47);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0.0098 87.47);
-  --input: oklch(0.88 0.0098 87.47);
-  --ring: oklch(0.58 0.18 255);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.965 0.0098 87.47);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0.0098 87.47);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.925 0.0098 87.47);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0.0098 87.47);
-  --sidebar-ring: oklch(0.708 0 0);
+  --radius: 0.75rem;
+  --bg: oklch(0.9855 0.0098 87.47);
+  --bg2: oklch(0.97 0.0098 87.47);
+  --bg3: oklch(0.9455 0.0098 87.47);
+  --bg4: oklch(0.922 0.0098 87.47);
+  --ink: #3a352d;
+  --ink2: #5c544a;
+  --muted-ink: oklch(0.55 0.005 87.47);
+  --muted2: oklch(0.65 0.005 87.47);
+  --rule: oklch(0.922 0.006 87.47);
+  --brand: #3a352d;
+  --red: #b42318;
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --card: oklch(1 0.006 87.47);
+  --card-foreground: var(--ink);
+  --popover: oklch(1 0.006 87.47);
+  --popover-foreground: var(--ink);
+  --primary: var(--brand);
+  --primary-foreground: #ffffff;
+  --secondary: var(--bg3);
+  --secondary-foreground: var(--ink2);
+  --muted: var(--bg2);
+  --muted-foreground: var(--muted-ink);
+  --accent: var(--bg3);
+  --accent-foreground: var(--ink);
+  --destructive: var(--red);
+  --destructive-foreground: #ffffff;
+  --border: var(--rule);
+  --input: var(--rule);
+  --ring: var(--brand);
+  --chart-1: var(--bg4);
+  --chart-2: var(--muted2);
+  --chart-3: var(--muted-ink);
+  --chart-4: var(--ink2);
+  --chart-5: var(--ink);
+  --sidebar: var(--bg2);
+  --sidebar-foreground: var(--ink);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--bg3);
+  --sidebar-accent-foreground: var(--ink);
+  --sidebar-border: var(--rule);
+  --sidebar-ring: var(--brand);
 }
 
 html.dark .shiki span {
@@ -284,38 +296,49 @@ html.dark .shiki span {
 }
 
 .dark {
-  --background: oklch(0.24 0.0036 106.64);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.238 0.0036 106.64);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0.0036 106.64);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.3 0.0036 106.64);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0.0036 106.64);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.32 0.0036 106.64);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.74 0.16 255);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.245 0.0036 106.64);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.29 0.0036 106.64);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  font-weight: 300;
+  --bg: oklch(0.18 0.005 87.47);
+  --bg2: oklch(0.22 0.005 87.47);
+  --bg3: oklch(0.26 0.006 87.47);
+  --bg4: oklch(0.3 0.006 87.47);
+  --ink: oklch(0.93 0.005 87.47);
+  --ink2: oklch(0.82 0.005 87.47);
+  --muted-ink: oklch(0.65 0.005 87.47);
+  --muted2: oklch(0.5 0.005 87.47);
+  --rule: oklch(0.3 0.006 87.47);
+  --brand: #ffffff;
+  --red: #f97066;
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --card: var(--bg2);
+  --card-foreground: var(--ink);
+  --popover: var(--bg2);
+  --popover-foreground: var(--ink);
+  --primary: var(--brand);
+  --primary-foreground: #111111;
+  --secondary: var(--bg3);
+  --secondary-foreground: var(--ink2);
+  --muted: var(--bg3);
+  --muted-foreground: var(--muted-ink);
+  --accent: var(--bg3);
+  --accent-foreground: var(--ink);
+  --destructive: var(--red);
+  --destructive-foreground: #ffffff;
+  --border: var(--rule);
+  --input: var(--rule);
+  --ring: var(--brand);
+  --chart-1: var(--bg4);
+  --chart-2: var(--muted2);
+  --chart-3: var(--muted-ink);
+  --chart-4: var(--ink2);
+  --chart-5: var(--ink);
+  --sidebar: var(--bg2);
+  --sidebar-foreground: var(--ink);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: #111111;
+  --sidebar-accent: var(--bg3);
+  --sidebar-accent-foreground: var(--ink);
+  --sidebar-border: var(--rule);
+  --sidebar-ring: var(--brand);
 }
 
 @layer base {
diff --git a/frontend/tests/e2e/scheduled-tasks.spec.ts b/frontend/tests/e2e/scheduled-tasks.spec.ts
index 113e580cdbf..aa5621780f0 100644
--- a/frontend/tests/e2e/scheduled-tasks.spec.ts
+++ b/frontend/tests/e2e/scheduled-tasks.spec.ts
@@ -4,29 +4,28 @@ import { MOCK_THREAD_ID, mockLangGraphAPI } from "./utils/mock-api";
 
 test.describe.configure({ mode: "serial" });
 
+const TASK = {
+  id: "task-1",
+  thread_id: "thread-1",
+  context_mode: "fresh_thread_per_run" as const,
+  last_thread_id: null,
+  title: "Daily summary",
+  prompt: "Summarize thread",
+  schedule_type: "cron" as const,
+  schedule_spec: { cron: "0 9 * * *" },
+  timezone: "UTC",
+  status: "enabled" as const,
+  next_run_at: "2026-07-02T01:00:00+00:00",
+  last_run_at: null,
+  last_run_id: null,
+  last_error: null,
+  run_count: 0,
+  created_at: "2026-07-01T00:00:00+00:00",
+  updated_at: "2026-07-01T00:00:00+00:00",
+};
+
 test("scheduled tasks page is reachable from sidebar", async ({ page }) => {
-  mockLangGraphAPI(page, {
-    threads: [],
-    scheduledTasks: [
-      {
-        id: "task-1",
-        thread_id: "thread-1",
-        title: "Daily summary",
-        prompt: "Summarize thread",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 9 * * *" },
-        timezone: "UTC",
-        status: "enabled",
-        next_run_at: "2026-07-02T01:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
-      },
-    ],
-  });
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [TASK] });
 
   await page.goto("/workspace/chats/new");
   await page.getByRole("link", { name: /scheduled tasks/i }).click();
@@ -35,6 +34,8 @@ test("scheduled tasks page is reachable from sidebar", async ({ page }) => {
   await expect(
     page.getByRole("button", { name: /Daily summary/i }),
   ).toBeVisible();
+
+  await page.getByTestId("scheduled-task-item-task-1").click();
   await expect(page.getByTestId("scheduled-task-runs")).toContainText("0 runs");
 });
 
@@ -48,49 +49,139 @@ test("thread page links to filtered scheduled tasks", async ({ page }) => {
       },
     ],
     scheduledTasks: [
-      {
-        id: "task-1",
-        thread_id: MOCK_THREAD_ID,
-        title: "Thread task",
-        prompt: "Summarize thread",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 9 * * *" },
-        timezone: "UTC",
-        status: "enabled",
-        next_run_at: "2026-07-02T01:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
-      },
+      { ...TASK, thread_id: MOCK_THREAD_ID, title: "Thread task" },
     ],
   });
 
   await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
-  await page
-    .locator("header")
-    .getByRole("link", { name: /scheduled tasks/i })
-    .click();
+  // The header link carries the thread_id filter (unlike the sidebar link),
+  // so target it via its aria-label to avoid a strict-mode ambiguity.
+  await page.getByLabel("Scheduled tasks", { exact: true }).click();
   await page.waitForURL(new RegExp(`thread_id=${MOCK_THREAD_ID}`));
 });
 
-test("user can create a scheduled task from the page", async ({ page }) => {
+test("user can create a scheduled task from the create page", async ({
+  page,
+}) => {
   mockLangGraphAPI(page, { threads: [], scheduledTasks: [] });
 
   await page.goto("/workspace/scheduled-tasks");
-  const createForm = page.getByTestId("scheduled-task-create-form");
-  await createForm.getByRole("button", { name: "One-time" }).click();
-  await createForm.getByLabel("Run at").fill("2026-07-02T09:00");
-  await createForm.getByPlaceholder("Task title").fill("Created from UI");
-  await createForm.getByPlaceholder("Prompt").fill("Summarize thread");
-  await createForm.getByRole("button", { name: "Create" }).click();
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL("**/workspace/scheduled-tasks/new");
+  await expect(page).toHaveURL(/workspace\/scheduled-tasks\/new/);
+
+  await page.getByPlaceholder("Task title").fill("Created from UI");
+  await page.getByPlaceholder("Prompt").fill("Summarize thread");
+  await page.getByRole("button", { name: "Create", exact: true }).click();
+
   await expect(
     page.getByRole("button", { name: /Created from UI/i }),
   ).toBeVisible();
+});
+
+test("creating a task from a thread filter returns to the filtered list", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [] });
+
+  await page.goto("/workspace/scheduled-tasks?thread_id=thread-from-link");
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL(
+    "**/workspace/scheduled-tasks/new?thread_id=thread-from-link",
+  );
+
+  await expect(page.getByPlaceholder("Thread ID")).toHaveValue(
+    "thread-from-link",
+  );
+  await page.getByPlaceholder("Task title").fill("Filtered create");
+  await page.getByPlaceholder("Prompt").fill("Keep thread filter");
+  await page.getByRole("button", { name: "Create", exact: true }).click();
+
+  await page.waitForURL(
+    "**/workspace/scheduled-tasks?thread_id=thread-from-link",
+  );
+  await expect(
+    page.getByRole("button", { name: /Filtered create/i }),
+  ).toBeVisible();
+});
+
+test("creating a fresh task from a thread filter returns to the global list", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [] });
+
+  await page.goto("/workspace/scheduled-tasks?thread_id=thread-from-link");
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL(
+    "**/workspace/scheduled-tasks/new?thread_id=thread-from-link",
+  );
+
+  await page.getByRole("button", { name: "Fresh thread" }).click();
+  await page.getByPlaceholder("Task title").fill("Fresh from filter");
+  await page.getByPlaceholder("Prompt").fill("No thread filter");
+  await page.getByRole("button", { name: "Create", exact: true }).click();
+
+  await page.waitForURL((url) => {
+    return (
+      url.pathname.endsWith("/workspace/scheduled-tasks") &&
+      !url.searchParams.has("thread_id")
+    );
+  });
+  await expect(
+    page.getByRole("button", { name: /Fresh from filter/i }),
+  ).toBeVisible();
+});
+
+test("creating a reuse-thread task follows the submitted thread id", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [] });
+
+  await page.goto("/workspace/scheduled-tasks?thread_id=thread-from-link");
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL(
+    "**/workspace/scheduled-tasks/new?thread_id=thread-from-link",
+  );
+
+  await page.getByPlaceholder("Thread ID").fill("thread-other");
+  await page.getByPlaceholder("Task title").fill("Reuse other thread");
+  await page.getByPlaceholder("Prompt").fill("Different target");
+  await page.getByRole("button", { name: "Create", exact: true }).click();
+
+  await page.waitForURL("**/workspace/scheduled-tasks?thread_id=thread-other");
   await expect(
-    page.getByTestId("scheduled-task-detail").getByText("Summarize thread"),
+    page.getByRole("button", { name: /Reuse other thread/i }),
+  ).toBeVisible();
+});
+
+test("user can create a one-time scheduled task from the create page", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [] });
+
+  await page.goto("/workspace/scheduled-tasks");
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL("**/workspace/scheduled-tasks/new");
+
+  await page.getByPlaceholder("Task title").fill("One-time from UI");
+  await page.getByPlaceholder("Prompt").fill("Run once");
+  await page.getByRole("button", { name: "One-time", exact: true }).click();
+
+  await expect(page.getByText("Enter a valid date and time")).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Create", exact: true }),
+  ).toBeDisabled();
+
+  await page.getByLabel("Year").fill("2027");
+  await page.getByLabel("Month").fill("8");
+  await page.getByLabel("Day").fill("15");
+  await page.getByLabel("Time").fill("09:30");
+
+  await expect(page.getByText("Enter a valid date and time")).toHaveCount(0);
+  await page.getByRole("button", { name: "Create", exact: true }).click();
+
+  await expect(
+    page.getByRole("button", { name: /One-time from UI/i }),
   ).toBeVisible();
 });
 
@@ -132,10 +223,14 @@ test("duplicate fills the create form without creating a task", async ({
   });
 
   await page.goto("/workspace/scheduled-tasks");
+  await page.getByTestId("scheduled-task-item-task-copy-source").click();
   await page
     .getByTestId("scheduled-task-detail")
     .getByRole("button", { name: "Duplicate" })
     .click();
+  await page.waitForURL("**/workspace/scheduled-tasks/new**");
+  await expect(page).toHaveURL(/[?&]from=task-copy-source/);
+  expect(new URL(page.url()).searchParams.has("prompt")).toBe(false);
 
   const createForm = page.getByTestId("scheduled-task-create-form");
   await expect(createForm.getByPlaceholder("Task title")).toHaveValue(
@@ -154,6 +249,55 @@ test("duplicate fills the create form without creating a task", async ({
   expect(createRequests).toBe(0);
 });
 
+test("duplicating a fresh-thread task keeps isolated runs", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, {
+    threads: [],
+    scheduledTasks: [
+      {
+        id: "task-fresh-copy",
+        thread_id: "thread-last-run",
+        context_mode: "fresh_thread_per_run",
+        title: "Nightly digest",
+        prompt: "Write a digest",
+        schedule_type: "cron",
+        schedule_spec: { cron: "0 9 * * *" },
+        timezone: "UTC",
+        status: "enabled",
+        next_run_at: "2026-08-28T09:00:00Z",
+        last_run_at: null,
+        last_run_id: null,
+        last_thread_id: "thread-last-run",
+        last_error: null,
+        run_count: 1,
+        created_at: "2026-08-01T00:00:00Z",
+        updated_at: "2026-08-01T00:00:00Z",
+      },
+    ],
+  });
+
+  await page.goto("/workspace/scheduled-tasks");
+  await page.getByTestId("scheduled-task-item-task-fresh-copy").click();
+  await page
+    .getByTestId("scheduled-task-detail")
+    .getByRole("button", { name: "Duplicate" })
+    .click();
+  await page.waitForURL("**/workspace/scheduled-tasks/new**");
+
+  const createForm = page.getByTestId("scheduled-task-create-form");
+  await expect(createForm.getByPlaceholder("Task title")).toHaveValue(
+    "Nightly digest (Copy)",
+  );
+  await expect(createForm.getByPlaceholder("Prompt")).toHaveValue(
+    "Write a digest",
+  );
+  await expect(
+    createForm.getByRole("button", { name: "Fresh thread" }),
+  ).toHaveAttribute("data-variant", "default");
+  await expect(createForm.getByPlaceholder("Thread ID")).toHaveCount(0);
+});
+
 test("reuse-thread tasks explain their context and busy-thread queue behavior", async ({
   page,
 }) => {
@@ -182,6 +326,7 @@ test("reuse-thread tasks explain their context and busy-thread queue behavior",
   });
 
   await page.goto("/workspace/scheduled-tasks");
+  await page.getByTestId("scheduled-task-item-task-reuse").click();
 
   const detailNotice = page
     .getByTestId("scheduled-task-detail")
@@ -193,6 +338,11 @@ test("reuse-thread tasks explain their context and busy-thread queue behavior",
     "queues this occurrence and starts it when the thread is available",
   );
 
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("dialog")).not.toBeVisible();
+  await page.getByTestId("scheduled-task-create-toggle").click();
+  await page.waitForURL("**/workspace/scheduled-tasks/new");
+
   const createForm = page.getByTestId("scheduled-task-create-form");
   await expect(createForm.getByRole("alert")).toHaveCount(0);
   await createForm.getByRole("button", { name: "Reuse thread" }).click();
@@ -209,131 +359,63 @@ test("reuse-thread tasks explain their context and busy-thread queue behavior",
   await expect(createForm.getByRole("alert")).toHaveCount(0);
 });
 
-test("user can pause a scheduled task from the detail pane", async ({
+test("user can pause a scheduled task from the detail dialog", async ({
   page,
 }) => {
-  mockLangGraphAPI(page, {
-    threads: [],
-    scheduledTasks: [
-      {
-        id: "task-1",
-        thread_id: "thread-1",
-        title: "Pausable task",
-        prompt: "Summarize thread",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 9 * * *" },
-        timezone: "UTC",
-        status: "enabled",
-        next_run_at: "2026-07-02T01:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
-      },
-    ],
-  });
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [TASK] });
 
   await page.goto("/workspace/scheduled-tasks");
-  const detail = page.getByTestId("scheduled-task-detail");
-  await detail.getByRole("button", { name: "Pause" }).click();
-  await expect(page.getByTestId("scheduled-task-item-task-1")).toBeVisible();
+  await page.getByTestId("scheduled-task-item-task-1").click();
+  await expect(page.getByRole("dialog")).toBeVisible();
   await expect(
-    page.getByTestId("scheduled-task-item-task-1").getByText(/paused/i),
+    page.getByRole("dialog").getByText("Daily summary"),
   ).toBeVisible();
+
+  await page.getByRole("button", { name: "Pause" }).click();
+  await expect(page.getByRole("button", { name: "Resume" })).toBeVisible();
 });
 
-test("trigger shows a run entry in the detail pane", async ({ page }) => {
-  mockLangGraphAPI(page, {
-    threads: [],
-    scheduledTasks: [
-      {
-        id: "task-1",
-        thread_id: "thread-1",
-        title: "Triggerable task",
-        prompt: "Summarize thread",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 9 * * *" },
-        timezone: "UTC",
-        status: "enabled",
-        next_run_at: "2026-07-02T01:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
-      },
-    ],
-  });
+test("trigger shows a run entry in the detail dialog", async ({ page }) => {
+  mockLangGraphAPI(page, { threads: [], scheduledTasks: [TASK] });
 
   await page.goto("/workspace/scheduled-tasks");
+  await page.getByTestId("scheduled-task-item-task-1").click();
   await page.getByRole("button", { name: "Trigger now" }).click();
+
   await expect(page.getByTestId("scheduled-task-runs")).toContainText("1 run");
   await expect(
     page.getByTestId("scheduled-task-run-list").getByText(/Manual · Success/i),
   ).toBeVisible();
 });
 
-test("detail pane falls back to a visible task after filters hide the selected task", async ({
-  page,
-}) => {
+test("filtering hides tasks and closes the detail dialog", async ({ page }) => {
   mockLangGraphAPI(page, {
     threads: [],
     scheduledTasks: [
+      { ...TASK, id: "task-enabled", title: "Enabled task", status: "enabled" },
       {
-        id: "task-enabled",
-        thread_id: "thread-1",
-        title: "Enabled task",
-        prompt: "Enabled prompt",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 9 * * *" },
-        timezone: "UTC",
-        status: "enabled",
-        next_run_at: "2026-07-02T01:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
-      },
-      {
+        ...TASK,
         id: "task-paused",
         thread_id: "thread-2",
         title: "Paused task",
-        prompt: "Paused prompt",
-        schedule_type: "cron",
-        schedule_spec: { cron: "0 10 * * *" },
-        timezone: "UTC",
         status: "paused",
-        next_run_at: "2026-07-02T02:00:00+00:00",
-        last_run_at: null,
-        last_run_id: null,
-        last_error: null,
-        run_count: 0,
-        created_at: "2026-07-01T00:00:00+00:00",
-        updated_at: "2026-07-01T00:00:00+00:00",
+        schedule_spec: { cron: "0 10 * * *" },
       },
     ],
   });
 
   await page.goto("/workspace/scheduled-tasks");
   await page.getByTestId("scheduled-task-item-task-paused").click();
-  await expect(
-    page.getByTestId("scheduled-task-detail").getByText("Paused task"),
-  ).toBeVisible();
+  await expect(page.getByRole("dialog").getByText("Paused task")).toBeVisible();
 
+  await page.keyboard.press("Escape");
   await page.getByRole("button", { name: "Enabled", exact: true }).click();
 
-  await expect(
-    page.getByTestId("scheduled-task-detail").getByText("Enabled task"),
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("scheduled-task-item-task-enabled"),
-  ).toBeVisible();
   await expect(page.getByTestId("scheduled-task-item-task-paused")).toHaveCount(
     0,
   );
+  await expect(
+    page.getByTestId("scheduled-task-item-task-enabled"),
+  ).toBeVisible();
+  await expect(page.getByRole("dialog")).not.toBeVisible();
 });
diff --git a/frontend/tests/e2e/sidebar.spec.ts b/frontend/tests/e2e/sidebar.spec.ts
index 15a8c19b8c9..a648254a49b 100644
--- a/frontend/tests/e2e/sidebar.spec.ts
+++ b/frontend/tests/e2e/sidebar.spec.ts
@@ -3,14 +3,18 @@ import { expect, test } from "@playwright/test";
 import { mockLangGraphAPI } from "./utils/mock-api";
 
 test.describe("Sidebar navigation", () => {
-  test("sidebar contains Chats and Agents nav links", async ({ page }) => {
+  test("sidebar contains Scheduled Tasks and Agents nav links", async ({
+    page,
+  }) => {
     mockLangGraphAPI(page);
 
     await page.goto("/workspace/chats/new");
 
     // Sidebar uses data-sidebar="menu-button" with asChild rendering on <Link>
     const sidebar = page.locator("[data-sidebar='sidebar']");
-    await expect(sidebar.locator("a[href='/workspace/chats']")).toBeVisible({
+    await expect(
+      sidebar.locator("a[href='/workspace/scheduled-tasks']"),
+    ).toBeVisible({
       timeout: 15_000,
     });
     await expect(sidebar.locator("a[href='/workspace/agents']")).toBeVisible();
@@ -45,8 +49,10 @@ test.describe("Sidebar navigation", () => {
     await page.goto("/workspace/chats/new");
 
     const sidebar = page.locator("[data-sidebar='sidebar']");
-    // Chats remains a real link; Agents is no longer a navigable link.
-    await expect(sidebar.locator("a[href='/workspace/chats']")).toBeVisible({
+    // Scheduled Tasks remains a real link; Agents is no longer a navigable link.
+    await expect(
+      sidebar.locator("a[href='/workspace/scheduled-tasks']"),
+    ).toBeVisible({
       timeout: 15_000,
     });
     await expect(sidebar.locator("a[href='/workspace/agents']")).toHaveCount(0);
@@ -93,7 +99,9 @@ test.describe("Sidebar navigation", () => {
       expect(box!.x + box!.width).toBeLessThanOrEqual(viewportWidth + 1);
     };
 
-    await expectInsideViewport(page.getByText(/Welcome to|欢迎使用/).first());
+    await expectInsideViewport(
+      page.getByText(/Hello, again|你好，欢迎回来/).first(),
+    );
     await expectInsideViewport(page.getByRole("textbox").first());
     await expectInsideViewport(page.locator("[data-slot='suggestions-list']"));
 
@@ -108,7 +116,7 @@ test.describe("Sidebar navigation", () => {
     );
     await expect(mobileSidebar).toBeVisible();
     await expect(
-      mobileSidebar.locator("a[href='/workspace/chats']"),
+      mobileSidebar.locator("a[href='/workspace/scheduled-tasks']"),
     ).toBeVisible();
     await expect(
       mobileSidebar.locator("a[href='/workspace/agents']"),
diff --git a/frontend/tests/e2e/utils/mock-api.ts b/frontend/tests/e2e/utils/mock-api.ts
index f75f3bb41c6..e2b782298eb 100644
--- a/frontend/tests/e2e/utils/mock-api.ts
+++ b/frontend/tests/e2e/utils/mock-api.ts
@@ -995,6 +995,33 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
     return route.fallback();
   });
 
+  // Workspace-changes is unused by most tests; return 404 so the
+  // fetcher's 401 login redirect never fires when the backend is absent.
+  void page.route("**/api/threads/*/runs/*/workspace-changes", (route) => {
+    if (route.request().method() === "GET") {
+      return route.fulfill({
+        status: 404,
+        contentType: "application/json",
+        body: JSON.stringify({ detail: "Workspace changes not enabled" }),
+      });
+    }
+    return route.fallback();
+  });
+
+  // Token usage is disabled in tests; returning 404 keeps
+  // fetchThreadTokenUsage from throwing and avoids the fetcher's 401 login
+  // redirect when the real backend is unavailable.
+  void page.route("**/api/threads/*/token-usage", (route) => {
+    if (route.request().method() === "GET") {
+      return route.fulfill({
+        status: 404,
+        contentType: "application/json",
+        body: JSON.stringify({ detail: "Token usage not enabled" }),
+      });
+    }
+    return route.fallback();
+  });
+
   void page.route("**/api/threads/*/uploads/limits", (route) => {
     if (route.request().method() === "GET") {
       return route.fulfill({
diff --git a/frontend/tests/unit/core/scheduled-tasks/cron.test.ts b/frontend/tests/unit/core/scheduled-tasks/cron.test.ts
index eb5574be00a..9182d3dbf2f 100644
--- a/frontend/tests/unit/core/scheduled-tasks/cron.test.ts
+++ b/frontend/tests/unit/core/scheduled-tasks/cron.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test } from "@rstest/core";
 
 import {
+  buildOnceRunAtLocal,
   describeSchedule,
   parseCron,
   serializeCron,
@@ -261,6 +262,48 @@ describe("describeSchedule", () => {
   });
 });
 
+describe("buildOnceRunAtLocal", () => {
+  test("valid date + time", () => {
+    expect(buildOnceRunAtLocal("2026", "2", "28", "09:00")).toBe(
+      "2026-02-28T09:00",
+    );
+  });
+
+  test("leap year Feb 29 is valid", () => {
+    expect(buildOnceRunAtLocal("2024", "2", "29", "09:00")).toBe(
+      "2024-02-29T09:00",
+    );
+  });
+
+  test("rejects Feb 30 via rollover", () => {
+    expect(buildOnceRunAtLocal("2026", "2", "30", "09:00")).toBe("");
+  });
+
+  test("rejects Feb 29 in a non-leap year", () => {
+    expect(buildOnceRunAtLocal("2026", "2", "29", "09:00")).toBe("");
+  });
+
+  test("rejects month 0 and month 13", () => {
+    expect(buildOnceRunAtLocal("2026", "0", "15", "09:00")).toBe("");
+    expect(buildOnceRunAtLocal("2026", "13", "15", "09:00")).toBe("");
+  });
+
+  test("rejects empty time", () => {
+    expect(buildOnceRunAtLocal("2026", "2", "28", "")).toBe("");
+  });
+
+  test("rejects pre-1970 year", () => {
+    expect(buildOnceRunAtLocal("1969", "1", "1", "09:00")).toBe("");
+  });
+
+  test("round-trips with zonedLocalToUtcIso", () => {
+    const local = buildOnceRunAtLocal("2026", "7", "2", "09:00");
+    expect(zonedLocalToUtcIso(local, "Asia/Shanghai")).toBe(
+      "2026-07-02T01:00:00+00:00",
+    );
+  });
+});
+
 describe("zonedLocalToUtcIso", () => {
   test("Asia/Shanghai is UTC-8 (wall 09:00 -> 01:00Z)", () => {
     expect(zonedLocalToUtcIso("2026-07-02T09:00", "Asia/Shanghai")).toBe(
diff --git a/frontend/tests/unit/core/scheduled-tasks/duplicate-draft.test.ts b/frontend/tests/unit/core/scheduled-tasks/duplicate-draft.test.ts
new file mode 100644
index 00000000000..953377e2e8d
--- /dev/null
+++ b/frontend/tests/unit/core/scheduled-tasks/duplicate-draft.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "@rstest/core";
+
+import {
+  clearDuplicateDraft,
+  draftFromScheduledTask,
+  readDuplicateDraft,
+  resolveCreateContextMode,
+  writeDuplicateDraft,
+} from "@/core/scheduled-tasks/duplicate-draft";
+import type { ScheduledTask } from "@/core/scheduled-tasks/types";
+
+function memoryStorage() {
+  const data = new Map<string, string>();
+  return {
+    getItem: (key: string) => data.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      data.set(key, value);
+    },
+    removeItem: (key: string) => {
+      data.delete(key);
+    },
+  };
+}
+
+const TASK: ScheduledTask = {
+  id: "task-1",
+  thread_id: "thread-1",
+  context_mode: "fresh_thread_per_run",
+  title: "Daily summary",
+  prompt: "Summarize thread",
+  schedule_type: "cron",
+  schedule_spec: { cron: "0 9 * * *" },
+  timezone: "UTC",
+  status: "enabled",
+  next_run_at: null,
+  last_run_at: null,
+  last_run_id: null,
+  last_thread_id: null,
+  last_error: null,
+  run_count: 0,
+  created_at: "2026-07-01T00:00:00+00:00",
+  updated_at: "2026-07-01T00:00:00+00:00",
+};
+
+describe("resolveCreateContextMode", () => {
+  it("gives an explicit context_mode precedence over thread_id", () => {
+    expect(
+      resolveCreateContextMode({
+        contextModeParam: "fresh_thread_per_run",
+        threadIdParam: "thread-1",
+      }),
+    ).toBe("fresh_thread_per_run");
+    expect(
+      resolveCreateContextMode({
+        contextModeParam: "reuse_thread",
+        threadIdParam: null,
+      }),
+    ).toBe("reuse_thread");
+  });
+
+  it("infers reuse from thread_id only when context_mode is absent", () => {
+    expect(
+      resolveCreateContextMode({
+        contextModeParam: null,
+        threadIdParam: "thread-1",
+      }),
+    ).toBe("reuse_thread");
+    expect(
+      resolveCreateContextMode({
+        contextModeParam: null,
+        threadIdParam: null,
+      }),
+    ).toBe("fresh_thread_per_run");
+  });
+});
+
+describe("duplicate draft storage", () => {
+  it("round-trips a source task without putting the prompt in a URL", () => {
+    const storage = memoryStorage();
+    const draft = draftFromScheduledTask(TASK, " (Copy)");
+    writeDuplicateDraft(storage, TASK.id, draft);
+    expect(readDuplicateDraft(storage, TASK.id)).toEqual(draft);
+    clearDuplicateDraft(storage, TASK.id);
+    expect(readDuplicateDraft(storage, TASK.id)).toBeNull();
+  });
+});