diff --git a/backend/src/features/task-decompose/task-calendar.service.ts b/backend/src/features/task-decompose/task-calendar.service.ts
index e4f5d81..736b1b5 100644
--- a/backend/src/features/task-decompose/task-calendar.service.ts
+++ b/backend/src/features/task-decompose/task-calendar.service.ts
@@ -3,6 +3,7 @@ import type {
   TaskDecomposeRequest,
   TaskDecomposeResult,
 } from "./task-decompose.types";
+import { normalizeTaskTimezone } from "./task-timezone";
 import type {
   CalendarCreatedEvent,
   CalendarSyncResult,
@@ -51,6 +52,23 @@ function buildEventSummary(
   return `[${index + 1}/${totalCount}] ${normalizedSubtask} | ${normalizedOverall}`;
 }
 
+function toOverallTaskName(
+  requestTask: string,
+  breakdown: TaskDecomposeResult,
+): string {
+  const summary = toSingleLine(breakdown.summary ?? "");
+  if (summary.length > 0) {
+    return summary;
+  }
+
+  const goal = toSingleLine(breakdown.goal ?? "");
+  if (goal.length > 0) {
+    return goal;
+  }
+
+  return toSingleLine(requestTask);
+}
+
 function safeDate(value: string, fallback: Date): Date {
   const parsed = new Date(value);
   if (Number.isNaN(parsed.getTime())) {
@@ -279,8 +297,12 @@ export async function createCalendarEvents(
   input: CreateCalendarEventsInput,
 ): Promise<CalendarSyncResult> {
   const accessToken = await getGoogleAccessToken(env, input.userId);
-  const timezone = input.request.timezone ?? "UTC";
+  const timezone = normalizeTaskTimezone(input.request.timezone);
   const calendarId = PRIMARY_CALENDAR_ID;
+  const overallTaskName = toOverallTaskName(
+    input.request.task,
+    input.breakdown,
+  );
 
   const createdEvents: CalendarCreatedEvent[] = [];
   const totalCount = Math.max(input.breakdown.subtasks.length, 1);
@@ -296,7 +318,7 @@ export async function createCalendarEvents(
     const eventId = await createStableEventId(input.workflowId, index);
     const summary = buildEventSummary(
       subtask.title,
-      input.request.task,
+      overallTaskName,
       index,
       totalCount,
     );
diff --git a/backend/src/features/task-decompose/task-decompose.service.ts b/backend/src/features/task-decompose/task-decompose.service.ts
index 98f7ade..1d97d2c 100644
--- a/backend/src/features/task-decompose/task-decompose.service.ts
+++ b/backend/src/features/task-decompose/task-decompose.service.ts
@@ -3,13 +3,13 @@ import type {
   TaskDecomposeResult,
   TaskSubtask,
 } from "./task-decompose.types";
+import { normalizeTaskTimezone } from "./task-timezone";
 
 const AI_MODEL = "@cf/meta/llama-3.1-8b-instruct-fp8";
 const DEFAULT_MAX_STEPS = 6;
 const MIN_DURATION_MINUTES = 15;
 const MAX_DURATION_MINUTES = 240;
 const DEFAULT_INFERRED_DEADLINE_DAYS = 7;
-const DEFAULT_PLANNING_TIMEZONE = "Asia/Tokyo";
 
 function asStringArray(value: unknown): string[] {
   if (!Array.isArray(value)) {
@@ -76,14 +76,6 @@ function fallbackSummary(task: string): string {
   return `"${task}" を実行可能な単位へ分解した計画です。`;
 }
 
-function normalizeTimezone(timezone: string | undefined): string {
-  if (!timezone || timezone.trim().length === 0) {
-    return DEFAULT_PLANNING_TIMEZONE;
-  }
-
-  return timezone.trim();
-}
-
 function formatPromptDateInTimezone(date: Date, timezone: string): string {
   try {
     return new Intl.DateTimeFormat("en-CA", {
@@ -260,7 +252,7 @@ function normalizeResult(
 
 function createPrompt(payload: TaskDecomposeRequest): string {
   const maxSteps = payload.maxSteps ?? DEFAULT_MAX_STEPS;
-  const planningTimezone = normalizeTimezone(payload.timezone);
+  const planningTimezone = normalizeTaskTimezone(payload.timezone);
   const now = new Date();
 
   const deadlineGuidance = payload.deadline
diff --git a/backend/src/features/task-decompose/task-decompose.types.ts b/backend/src/features/task-decompose/task-decompose.types.ts
index a50231f..6a44d82 100644
--- a/backend/src/features/task-decompose/task-decompose.types.ts
+++ b/backend/src/features/task-decompose/task-decompose.types.ts
@@ -7,6 +7,13 @@ export type TaskDecomposeRequest = {
   maxSteps?: number;
 };
 
+export type ValidatedTaskDecomposeRequest = Omit<
+  TaskDecomposeRequest,
+  "timezone"
+> & {
+  timezone: string;
+};
+
 export type TaskSubtask = {
   title: string;
   description: string;
diff --git a/backend/src/features/task-decompose/task-decompose.validation.ts b/backend/src/features/task-decompose/task-decompose.validation.ts
index 39a1ef7..d565ed0 100644
--- a/backend/src/features/task-decompose/task-decompose.validation.ts
+++ b/backend/src/features/task-decompose/task-decompose.validation.ts
@@ -1,4 +1,5 @@
-import type { TaskDecomposeRequest } from "./task-decompose.types";
+import type { ValidatedTaskDecomposeRequest } from "./task-decompose.types";
+import { normalizeTaskTimezone } from "./task-timezone";
 
 const MAX_STEPS_LIMIT = 12;
 
@@ -20,17 +21,12 @@ function parseDeadline(value: unknown): string | undefined {
   return parsed.toISOString();
 }
 
-function parseTimezone(value: unknown): string | undefined {
+function parseTimezone(value: unknown): string {
   if (typeof value !== "string") {
-    return undefined;
-  }
-
-  const trimmed = value.trim();
-  if (trimmed.length === 0) {
-    return undefined;
+    return normalizeTaskTimezone(undefined);
   }
 
-  return trimmed;
+  return normalizeTaskTimezone(value);
 }
 
 function parseMaxSteps(value: unknown): number | undefined {
@@ -46,7 +42,9 @@ function parseMaxSteps(value: unknown): number | undefined {
   return Math.min(rounded, MAX_STEPS_LIMIT);
 }
 
-export function toRequestPayload(input: unknown): TaskDecomposeRequest | null {
+export function toRequestPayload(
+  input: unknown,
+): ValidatedTaskDecomposeRequest | null {
   if (!input || typeof input !== "object") {
     return null;
   }
diff --git a/backend/src/features/task-decompose/task-timezone.ts b/backend/src/features/task-decompose/task-timezone.ts
new file mode 100644
index 0000000..349ad2b
--- /dev/null
+++ b/backend/src/features/task-decompose/task-timezone.ts
@@ -0,0 +1,18 @@
+const DEFAULT_TASK_TIMEZONE = "Asia/Tokyo";
+
+export function normalizeTaskTimezone(
+  value: string | null | undefined,
+): string {
+  if (!value || value.trim().length === 0) {
+    return DEFAULT_TASK_TIMEZONE;
+  }
+
+  const candidate = value.trim();
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      timeZone: candidate,
+    }).resolvedOptions().timeZone;
+  } catch {
+    return DEFAULT_TASK_TIMEZONE;
+  }
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a3d333a..f94eff5 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,1021 +1,44 @@
 "use client";
 
 import {
-  Avatar,
   Badge,
   Box,
   Button,
   Card,
   Container,
-  Field,
+  Grid,
   Heading,
   HStack,
-  Input,
   List,
-  ProgressCircle,
   Stack,
-  Tabs,
   Text,
-  Textarea,
 } from "@chakra-ui/react";
-import type { FormEvent } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AuthPanel } from "@/components/auth/auth-panel";
-import {
-  AuthApiError,
-  getSession,
-  type SessionResponse,
-  signInWithGoogle,
-  signOut,
-} from "@/lib/auth-api";
-import {
-  getTaskWorkflowHistory,
-  getTaskWorkflowStatus,
-  startTaskWorkflow,
-  TaskWorkflowApiError,
-  type WorkflowRecord,
-  type WorkflowRuntimeStatus,
-} from "@/lib/task-workflow-api";
-
-type RunPhase = "idle" | "starting" | "waiting" | "completed" | "failed";
-type ErrorAction = "start" | "status" | "history" | "session" | "signOut";
-type ViewMode = "auth" | "compose" | "running" | "result";
-type TransitionDirection = "forward" | "backward";
-
-type StepItem = {
-  label: string;
-};
-
-const CALENDAR_REAUTH_MARKER = "REAUTH_REQUIRED_CALENDAR_SCOPE:";
-const DEFAULT_USER_TIMEZONE = "Asia/Tokyo";
-const STEP_ITEMS: StepItem[] = [
-  { label: "認証" },
-  { label: "入力" },
-  { label: "実行" },
-  { label: "結果" },
-];
-
-function viewIndex(view: ViewMode): number {
-  if (view === "auth") {
-    return 0;
-  }
-  if (view === "compose") {
-    return 1;
-  }
-  if (view === "running") {
-    return 2;
-  }
-  return 3;
-}
-
-function fallbackErrorMessage(action: ErrorAction): string {
-  if (action === "start") {
-    return "Workflow の開始に失敗しました。";
-  }
-  if (action === "status") {
-    return "Workflow の状態取得に失敗しました。";
-  }
-  if (action === "history") {
-    return "履歴の取得に失敗しました。";
-  }
-  if (action === "signOut") {
-    return "ログアウトに失敗しました。時間をおいて再試行してください。";
-  }
-  return "セッション状態の取得に失敗しました。";
-}
-
-function toErrorMessage(error: unknown, action: ErrorAction): string {
-  if (error instanceof TypeError) {
-    return "ネットワーク接続に失敗しました。通信環境を確認してください。";
-  }
-
-  if (error instanceof TaskWorkflowApiError || error instanceof AuthApiError) {
-    if (error.status === 401) {
-      return "ログインが必要です。Google でログインしてください。";
-    }
-    if (error.status >= 500) {
-      return "サーバー側でエラーが発生しました。時間をおいて再試行してください。";
-    }
-  }
-
-  return fallbackErrorMessage(action);
-}
-
-function needsCalendarReauth(rawMessage: string | null): boolean {
-  return Boolean(rawMessage?.includes(CALENDAR_REAUTH_MARKER));
-}
-
-function toDisplayErrorMessage(rawMessage: string | null): string | null {
-  if (!rawMessage) {
-    return null;
-  }
-
-  if (!needsCalendarReauth(rawMessage)) {
-    return rawMessage;
-  }
-
-  const message = rawMessage.replace(CALENDAR_REAUTH_MARKER, "").trim();
-  if (message.length > 0) {
-    return message;
-  }
-
-  return "Google Calendar の権限再許可が必要です。";
-}
-
-function formatDateTime(
-  value: string | null | undefined,
-  timezone?: string | null,
-): string {
-  if (!value) {
-    return "-";
-  }
-
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) {
-    return value;
-  }
-
-  return parsed.toLocaleString("ja-JP", {
-    timeZone: timezone ?? DEFAULT_USER_TIMEZONE,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-function toStatusLabel(
-  phase: RunPhase,
-  workflowStatus: WorkflowRuntimeStatus | null,
-  record: WorkflowRecord | null,
-): string {
-  if (phase === "starting") {
-    return "開始中";
-  }
-
-  if (record?.status) {
-    return toStatusLabelFromRecord(record.status);
-  }
-
-  if (workflowStatus) {
-    if (workflowStatus.status === "running") {
-      return "実行中";
-    }
-    if (workflowStatus.status === "complete") {
-      return "完了";
-    }
-    if (
-      workflowStatus.status === "errored" ||
-      workflowStatus.status === "terminated"
-    ) {
-      return "失敗";
-    }
-  }
-
-  if (phase === "waiting") {
-    return "待機中";
-  }
-
-  return "未実行";
-}
-
-function toStatusLabelFromRecord(status: WorkflowRecord["status"]): string {
-  if (status === "queued") {
-    return "キュー待ち";
-  }
-  if (status === "running") {
-    return "細分化中";
-  }
-  if (status === "calendar_syncing") {
-    return "カレンダー反映中";
-  }
-  if (status === "completed") {
-    return "完了";
-  }
-  return "失敗";
-}
-
-function toHistoryTitle(record: WorkflowRecord): string {
-  const goal = record.llmOutput?.goal?.trim();
-  if (goal && goal.length > 0) {
-    return goal;
-  }
-
-  const summary = record.llmOutput?.summary?.trim();
-  if (summary && summary.length > 0) {
-    return summary;
-  }
-
-  return record.taskInput;
-}
-
-function toWorkflowProgress(
-  phase: RunPhase,
-  record: WorkflowRecord | null,
-  workflowStatus: WorkflowRuntimeStatus | null,
-): number {
-  if (phase === "starting") {
-    return 15;
-  }
-
-  if (record?.status) {
-    if (record.status === "queued") {
-      return 25;
-    }
-    if (record.status === "running") {
-      return 58;
-    }
-    if (record.status === "calendar_syncing") {
-      return 84;
-    }
-    return 100;
-  }
-
-  if (workflowStatus?.status === "complete") {
-    return 100;
-  }
-  if (
-    workflowStatus?.status === "errored" ||
-    workflowStatus?.status === "terminated"
-  ) {
-    return 100;
-  }
-  if (phase === "waiting") {
-    return 45;
-  }
-
-  return 0;
-}
-
-function toDeadlineIso(value: string): string | undefined {
-  const trimmed = value.trim();
-  if (trimmed.length === 0) {
-    return undefined;
-  }
-
-  const parsed = new Date(trimmed);
-  if (Number.isNaN(parsed.getTime())) {
-    return undefined;
-  }
-
-  return parsed.toISOString();
-}
-
-function toInitials(name: string | null | undefined): string {
-  if (!name || name.trim().length === 0) {
-    return "GU";
-  }
-
-  const letters = name
-    .trim()
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part.charAt(0).toUpperCase())
-    .filter((part) => part.length > 0)
-    .join("");
-
-  return letters.length > 0 ? letters : "GU";
-}
-
-export default function Home() {
-  const [session, setSession] = useState<SessionResponse>(null);
-  const [isSessionLoading, setIsSessionLoading] = useState(true);
-
-  const [task, setTask] = useState("");
-  const [context, setContext] = useState("");
-  const [deadline, setDeadline] = useState("");
-  const [maxSteps, setMaxSteps] = useState("6");
-
-  const [phase, setPhase] = useState<RunPhase>("idle");
-  const [workflowId, setWorkflowId] = useState<string | null>(null);
-  const [workflowStatus, setWorkflowStatus] =
-    useState<WorkflowRuntimeStatus | null>(null);
-  const [record, setRecord] = useState<WorkflowRecord | null>(null);
-  const [history, setHistory] = useState<WorkflowRecord[]>([]);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [isReauthRunning, setIsReauthRunning] = useState(false);
-  const [isSignOutRunning, setIsSignOutRunning] = useState(false);
-  const [dotTick, setDotTick] = useState(0);
-
-  const [resultTab, setResultTab] = useState<"result" | "history">("result");
-  const [viewMode, setViewMode] = useState<ViewMode>("auth");
-  const [transitionDirection, setTransitionDirection] =
-    useState<TransitionDirection>("forward");
-
-  const viewModeRef = useRef<ViewMode>("auth");
-
-  const signedInUser = useMemo(() => session?.user ?? null, [session]);
-  const statusLabel = useMemo(
-    () => toStatusLabel(phase, workflowStatus, record),
-    [phase, workflowStatus, record],
-  );
-  const workflowProgress = useMemo(
-    () => toWorkflowProgress(phase, record, workflowStatus),
-    [phase, record, workflowStatus],
-  );
-  const requiresCalendarReauth = useMemo(
-    () => needsCalendarReauth(errorMessage),
-    [errorMessage],
-  );
-  const displayErrorMessage = useMemo(
-    () => toDisplayErrorMessage(errorMessage),
-    [errorMessage],
-  );
-
-  const setView = useCallback((nextView: ViewMode) => {
-    const previous = viewModeRef.current;
-    if (previous === nextView) {
-      return;
-    }
-
-    setTransitionDirection(
-      viewIndex(nextView) > viewIndex(previous) ? "forward" : "backward",
-    );
-    viewModeRef.current = nextView;
-    setViewMode(nextView);
-  }, []);
-
-  const refreshSession = useCallback(async () => {
-    setIsSessionLoading(true);
-    try {
-      const nextSession = await getSession();
-      setSession(nextSession);
-    } catch (error) {
-      setErrorMessage(toErrorMessage(error, "session"));
-      setSession(null);
-    } finally {
-      setIsSessionLoading(false);
-    }
-  }, []);
-
-  const refreshHistory = useCallback(async () => {
-    if (!signedInUser) {
-      setHistory([]);
-      return;
-    }
-
-    try {
-      const response = await getTaskWorkflowHistory(8);
-      setHistory(response.items);
-    } catch (error) {
-      setErrorMessage(toErrorMessage(error, "history"));
-    }
-  }, [signedInUser]);
-
-  useEffect(() => {
-    void refreshSession();
-  }, [refreshSession]);
-
-  useEffect(() => {
-    void refreshHistory();
-  }, [refreshHistory]);
-
-  useEffect(() => {
-    if (phase !== "waiting") {
-      setDotTick(0);
-      return;
-    }
-
-    const timer = window.setInterval(() => {
-      setDotTick((prev) => (prev + 1) % 3);
-    }, 420);
-
-    return () => {
-      window.clearInterval(timer);
-    };
-  }, [phase]);
-
-  useEffect(() => {
-    if (!workflowId || phase !== "waiting") {
-      return;
-    }
-
-    let active = true;
-    let inFlight = false;
-
-    const poll = async () => {
-      if (inFlight) {
-        return;
-      }
-
-      inFlight = true;
-      try {
-        const response = await getTaskWorkflowStatus(workflowId);
-        if (!active) {
-          return;
-        }
-
-        setWorkflowStatus(response.workflowStatus);
-        setRecord(response.record);
-
-        if (response.record?.status === "completed") {
-          setPhase("completed");
-          setErrorMessage(null);
-          void refreshHistory();
-          return;
-        }
-
-        if (response.record?.status === "failed") {
-          setPhase("failed");
-          setErrorMessage(
-            response.record.errorMessage ?? "Workflow が失敗しました。",
-          );
-          void refreshHistory();
-          return;
-        }
-
-        if (
-          response.workflowStatus.status === "errored" ||
-          response.workflowStatus.status === "terminated"
-        ) {
-          setPhase("failed");
-          setErrorMessage(
-            response.workflowStatus.error?.message ??
-              "Workflow が異常終了しました。",
-          );
-        }
-      } catch (error) {
-        if (!active) {
-          return;
-        }
-
-        setErrorMessage(toErrorMessage(error, "status"));
-        if (error instanceof TaskWorkflowApiError && error.status === 401) {
-          setPhase("failed");
-        }
-      } finally {
-        inFlight = false;
-      }
-    };
-
-    void poll();
-    const pollIntervalMs =
-      record?.status === "running" || record?.status === "calendar_syncing"
-        ? 5000
-        : 3000;
-    const timer = window.setInterval(() => {
-      void poll();
-    }, pollIntervalMs);
-
-    return () => {
-      active = false;
-      window.clearInterval(timer);
-    };
-  }, [workflowId, phase, record?.status, refreshHistory]);
-
-  useEffect(() => {
-    let nextView: ViewMode;
-
-    if (!signedInUser) {
-      nextView = "auth";
-    } else if (phase === "starting" || phase === "waiting") {
-      nextView = "running";
-    } else if (
-      phase === "completed" ||
-      phase === "failed" ||
-      record?.status === "completed" ||
-      record?.status === "failed"
-    ) {
-      nextView = "result";
-    } else {
-      nextView = "compose";
-    }
-
-    setView(nextView);
-  }, [phase, record?.status, setView, signedInUser]);
-
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!signedInUser) {
-      setErrorMessage(
-        "実行にはログインが必要です。Google でログインしてください。",
-      );
-      return;
-    }
-
-    const trimmedTask = task.trim();
-    if (trimmedTask.length === 0) {
-      setErrorMessage("タスク入力は必須です。");
-      return;
-    }
-
-    const deadlineIso = toDeadlineIso(deadline);
-    if (deadline.trim().length > 0 && !deadlineIso) {
-      setErrorMessage("最終期限の形式が正しくありません。");
-      return;
-    }
-
-    const parsedMaxSteps = Number(maxSteps);
-    const safeMaxSteps = Number.isFinite(parsedMaxSteps)
-      ? Math.min(Math.max(Math.trunc(parsedMaxSteps), 1), 12)
-      : 6;
-    const timezone =
-      Intl.DateTimeFormat().resolvedOptions().timeZone ?? DEFAULT_USER_TIMEZONE;
-
-    setPhase("starting");
-    setErrorMessage(null);
-
-    try {
-      const response = await startTaskWorkflow({
-        task: trimmedTask,
-        context: context.trim().length > 0 ? context.trim() : undefined,
-        deadline: deadlineIso,
-        timezone,
-        maxSteps: safeMaxSteps,
-      });
-
-      setWorkflowId(response.id);
-      setWorkflowStatus(response.workflowStatus);
-      setRecord(response.record);
-
-      if (response.record?.status === "completed") {
-        setPhase("completed");
-      } else if (response.record?.status === "failed") {
-        setPhase("failed");
-        setErrorMessage(
-          response.record.errorMessage ?? "Workflow が失敗しました。",
-        );
-      } else {
-        setPhase("waiting");
-      }
-
-      await refreshHistory();
-    } catch (error) {
-      setPhase("failed");
-      setErrorMessage(toErrorMessage(error, "start"));
-    }
-  };
-
-  const handleSelectHistory = (item: WorkflowRecord) => {
-    setWorkflowId(item.workflowId);
-    setRecord(item);
-    setWorkflowStatus(null);
-    setErrorMessage(null);
-    setResultTab("result");
-
-    if (item.status === "completed") {
-      setPhase("completed");
-      return;
-    }
-
-    if (item.status === "failed") {
-      setPhase("failed");
-      setErrorMessage(item.errorMessage ?? "Workflow が失敗しました。");
-      return;
-    }
-
-    setPhase("waiting");
-  };
-
-  const handleStartNewTask = () => {
-    setPhase("idle");
-    setWorkflowId(null);
-    setWorkflowStatus(null);
-    setRecord(null);
-    setErrorMessage(null);
-    setResultTab("result");
-  };
-
-  const handleSignOut = async () => {
-    setIsSignOutRunning(true);
-    try {
-      await signOut();
-      setSession(null);
-      setHistory([]);
-      setTask("");
-      setContext("");
-      setDeadline("");
-      setMaxSteps("6");
-      handleStartNewTask();
-    } catch (error) {
-      setErrorMessage(toErrorMessage(error, "signOut"));
-    } finally {
-      setIsSignOutRunning(false);
-    }
-  };
-
-  const handleCalendarReauth = async () => {
-    setIsReauthRunning(true);
-    try {
-      await signInWithGoogle(window.location.href);
-    } catch (error) {
-      setErrorMessage(toErrorMessage(error, "session"));
-      setIsReauthRunning(false);
-      return;
-    }
-
-    setIsReauthRunning(false);
-  };
-
-  const handleAuthPanelSessionChanged = useCallback(
-    (nextSession: SessionResponse) => {
-      setSession(nextSession);
-      setIsSessionLoading(false);
-    },
-    [],
-  );
-
-  const currentStepIndex = viewIndex(viewMode);
-  const waitingDots = ".".repeat(dotTick + 1);
-  const breakdown = record?.llmOutput;
-  const calendarResult = record?.calendarOutput;
-
-  const screenBody = (() => {
-    if (viewMode === "auth") {
-      return (
-        <Stack gap={5}>
-          <Text color="fg.muted" fontSize="sm">
-            まずGoogleでログインし、カレンダー連携権限を許可してください。
-            認証後はタスク入力画面に進みます。
-          </Text>
-          <AuthPanel onSessionChanged={handleAuthPanelSessionChanged} />
-        </Stack>
-      );
-    }
-
-    if (viewMode === "compose") {
-      return (
-        <Stack gap={5}>
-          <form onSubmit={handleSubmit}>
-            <Stack gap={4}>
-              <Field.Root required>
-                <Field.Label>細分化したいタスク</Field.Label>
-                <Textarea
-                  value={task}
-                  onChange={(event) => setTask(event.target.value)}
-                  placeholder="例: ハッカソン発表までに、プロトタイプを提出可能な状態にする"
-                  minH="140px"
-                />
-              </Field.Root>
-
-              <Field.Root>
-                <Field.Label>補足コンテキスト（任意）</Field.Label>
-                <Textarea
-                  value={context}
-                  onChange={(event) => setContext(event.target.value)}
-                  placeholder="例: 3人チーム、担当はフロント中心、毎日21時以降に作業"
-                  minH="96px"
-                />
-              </Field.Root>
-
-              <HStack align="start" gap={4} flexWrap="wrap">
-                <Field.Root flex="1" minW={{ base: "100%", md: "260px" }}>
-                  <Field.Label>最終期限（任意）</Field.Label>
-                  <Input
-                    type="datetime-local"
-                    value={deadline}
-                    onChange={(event) => setDeadline(event.target.value)}
-                  />
-                  <Field.HelperText>
-                    未入力でも、本文と文脈から期限を推測して分解します。
-                  </Field.HelperText>
-                </Field.Root>
-
-                <Field.Root w={{ base: "100%", md: "160px" }}>
-                  <Field.Label>最大ステップ数</Field.Label>
-                  <Input
-                    type="number"
-                    min={1}
-                    max={12}
-                    value={maxSteps}
-                    onChange={(event) => setMaxSteps(event.target.value)}
-                  />
-                </Field.Root>
-              </HStack>
-
-              {displayErrorMessage ? (
-                <Text fontSize="sm" color="red.500">
-                  {displayErrorMessage}
-                </Text>
-              ) : null}
-
-              {requiresCalendarReauth ? (
-                <HStack gap={3} flexWrap="wrap">
-                  <Button
-                    size="sm"
-                    colorPalette="orange"
-                    variant="outline"
-                    onClick={() => void handleCalendarReauth()}
-                    loading={isReauthRunning}
-                  >
-                    Google権限を再認可
-                  </Button>
-                  <Text fontSize="xs" color="fg.muted">
-                    権限許可後に同じタスクを再実行してください。
-                  </Text>
-                </HStack>
-              ) : null}
-
-              <HStack justify="end">
-                <Button
-                  colorPalette="teal"
-                  type="submit"
-                  loading={phase === "starting"}
-                  disabled={phase === "waiting" || isSessionLoading}
-                >
-                  細分化を開始
-                </Button>
-              </HStack>
-            </Stack>
-          </form>
-
-          {history.length > 0 ? (
-            <Card.Root variant="outline" bg="var(--app-surface-soft)">
-              <Card.Header pb={2}>
-                <Card.Title fontSize="md">最近の履歴</Card.Title>
-              </Card.Header>
-              <Card.Body>
-                <List.Root gap={2}>
-                  {history.slice(0, 3).map((item) => (
-                    <List.Item key={item.workflowId}>
-                      <HStack justify="space-between" align="start" gap={3}>
-                        <Stack gap={0.5}>
-                          <Text fontSize="sm" lineClamp={2}>
-                            {toHistoryTitle(item)}
-                          </Text>
-                          <Text fontSize="xs" color="fg.muted">
-                            {formatDateTime(item.createdAt, item.timezone)} /{" "}
-                            {toStatusLabelFromRecord(item.status)}
-                          </Text>
-                        </Stack>
-                        <Button
-                          size="xs"
-                          variant="outline"
-                          onClick={() => handleSelectHistory(item)}
-                        >
-                          表示
-                        </Button>
-                      </HStack>
-                    </List.Item>
-                  ))}
-                </List.Root>
-              </Card.Body>
-            </Card.Root>
-          ) : null}
-        </Stack>
-      );
-    }
-
-    if (viewMode === "running") {
-      return (
-        <Stack
-          align="center"
-          textAlign="center"
-          gap={5}
-          py={{ base: 4, md: 8 }}
-        >
-          <ProgressCircle.Root
-            value={workflowProgress}
-            size="xl"
-            colorPalette={phase === "failed" ? "red" : "teal"}
-          >
-            <ProgressCircle.Circle>
-              <ProgressCircle.Track />
-              <ProgressCircle.Range />
-            </ProgressCircle.Circle>
-            <ProgressCircle.ValueText>
-              {workflowProgress}%
-            </ProgressCircle.ValueText>
-          </ProgressCircle.Root>
-
-          <Stack gap={1}>
-            <Heading size="md">ワークフロー実行中{waitingDots}</Heading>
-            <Text color="fg.muted" fontSize="sm">
-              完了したら自動で結果画面へ切り替わります。
-            </Text>
-          </Stack>
-
-          <Badge colorPalette={phase === "failed" ? "red" : "teal"}>
-            {statusLabel}
-          </Badge>
-
-          {displayErrorMessage ? (
-            <Text fontSize="sm" color="red.500">
-              {displayErrorMessage}
-            </Text>
-          ) : null}
-
-          {requiresCalendarReauth ? (
-            <Button
-              size="sm"
-              colorPalette="orange"
-              variant="outline"
-              onClick={() => void handleCalendarReauth()}
-              loading={isReauthRunning}
-            >
-              Google権限を再認可
-            </Button>
-          ) : null}
-        </Stack>
-      );
-    }
-
-    return (
-      <Stack gap={5}>
-        <HStack justify="space-between" flexWrap="wrap" gap={3}>
-          <Badge colorPalette={phase === "failed" ? "red" : "green"}>
-            {statusLabel}
-          </Badge>
-          <Button variant="outline" onClick={handleStartNewTask}>
-            新しいタスクを入力
-          </Button>
-        </HStack>
-
-        <Tabs.Root
-          value={resultTab}
-          onValueChange={(details) => {
-            if (details.value === "result" || details.value === "history") {
-              setResultTab(details.value);
-            }
-          }}
-        >
-          <Tabs.List>
-            <Tabs.Trigger value="result">分解結果</Tabs.Trigger>
-            <Tabs.Trigger value="history">実行履歴</Tabs.Trigger>
-          </Tabs.List>
-
-          <Tabs.Content value="result" pt={4}>
-            {breakdown ? (
-              <Stack gap={4}>
-                <Card.Root variant="outline" bg="var(--app-surface-soft)">
-                  <Card.Body>
-                    <Stack gap={2}>
-                      <Text fontWeight="semibold">目標</Text>
-                      <Text color="fg.muted">{breakdown.goal}</Text>
-                      <Text fontWeight="semibold" pt={2}>
-                        要約
-                      </Text>
-                      <Text color="fg.muted">{breakdown.summary}</Text>
-                    </Stack>
-                  </Card.Body>
-                </Card.Root>
-
-                <Card.Root variant="outline" bg="var(--app-surface-soft)">
-                  <Card.Header pb={2}>
-                    <Card.Title fontSize="md">サブタスク</Card.Title>
-                  </Card.Header>
-                  <Card.Body>
-                    <List.Root gap={3}>
-                      {breakdown.subtasks.map((subtask, index) => (
-                        <List.Item key={`${index}-${subtask.title}`}>
-                          <Stack gap={1}>
-                            <Text fontWeight="medium">{subtask.title}</Text>
-                            <Text fontSize="sm" color="fg.muted">
-                              {subtask.description}
-                            </Text>
-                            <HStack gap={2} flexWrap="wrap">
-                              <Badge colorPalette="blue" variant="subtle">
-                                期限:{" "}
-                                {formatDateTime(
-                                  subtask.dueAt,
-                                  record?.timezone,
-                                )}
-                              </Badge>
-                              <Badge colorPalette="teal" variant="subtle">
-                                {subtask.durationMinutes} 分
-                              </Badge>
-                            </HStack>
-                          </Stack>
-                        </List.Item>
-                      ))}
-                    </List.Root>
-                  </Card.Body>
-                </Card.Root>
-
-                {calendarResult ? (
-                  <Card.Root variant="outline" bg="var(--app-surface-soft)">
-                    <Card.Header pb={2}>
-                      <Card.Title fontSize="md">
-                        Google Calendar 反映結果
-                      </Card.Title>
-                    </Card.Header>
-                    <Card.Body>
-                      <List.Root gap={2}>
-                        {calendarResult.createdEvents.map((eventItem) => (
-                          <List.Item key={eventItem.id}>
-                            <HStack
-                              justify="space-between"
-                              align="start"
-                              gap={3}
-                            >
-                              <Stack gap={1}>
-                                <Text fontWeight="medium">
-                                  {eventItem.summary}
-                                </Text>
-                                <Text fontSize="sm" color="fg.muted">
-                                  {formatDateTime(
-                                    eventItem.startAt,
-                                    calendarResult.timezone,
-                                  )}{" "}
-                                  -{" "}
-                                  {formatDateTime(
-                                    eventItem.endAt,
-                                    calendarResult.timezone,
-                                  )}
-                                </Text>
-                              </Stack>
-                              {eventItem.htmlLink ? (
-                                <Button
-                                  size="sm"
-                                  variant="outline"
-                                  onClick={() => {
-                                    if (!eventItem.htmlLink) {
-                                      return;
-                                    }
-                                    window.open(
-                                      eventItem.htmlLink,
-                                      "_blank",
-                                      "noopener,noreferrer",
-                                    );
-                                  }}
-                                >
-                                  開く
-                                </Button>
-                              ) : (
-                                <Badge colorPalette="gray">リンクなし</Badge>
-                              )}
-                            </HStack>
-                          </List.Item>
-                        ))}
-                      </List.Root>
-                    </Card.Body>
-                  </Card.Root>
-                ) : null}
-
-                {breakdown.assumptions.length > 0 ? (
-                  <Card.Root variant="outline" bg="var(--app-surface-soft)">
-                    <Card.Header pb={2}>
-                      <Card.Title fontSize="md">前提 / メモ</Card.Title>
-                    </Card.Header>
-                    <Card.Body>
-                      <List.Root gap={1}>
-                        {breakdown.assumptions.map((item) => (
-                          <List.Item key={item}>{item}</List.Item>
-                        ))}
-                      </List.Root>
-                    </Card.Body>
-                  </Card.Root>
-                ) : null}
-              </Stack>
-            ) : (
-              <Card.Root variant="outline" bg="var(--app-surface-soft)">
-                <Card.Body>
-                  <Text fontSize="sm" color="fg.muted">
-                    結果がありません。失敗した場合は履歴から詳細を確認してください。
-                  </Text>
-                  {displayErrorMessage ? (
-                    <Text fontSize="sm" color="red.500" mt={2}>
-                      {displayErrorMessage}
-                    </Text>
-                  ) : null}
-                </Card.Body>
-              </Card.Root>
-            )}
-          </Tabs.Content>
-
-          <Tabs.Content value="history" pt={4}>
-            <Card.Root variant="outline" bg="var(--app-surface-soft)">
-              <Card.Body>
-                {history.length === 0 ? (
-                  <Text fontSize="sm" color="fg.muted">
-                    まだ履歴はありません。
-                  </Text>
-                ) : (
-                  <List.Root gap={3}>
-                    {history.map((item) => (
-                      <List.Item key={item.workflowId}>
-                        <HStack justify="space-between" align="start" gap={3}>
-                          <Stack gap={0.5}>
-                            <Text fontWeight="medium">
-                              {toHistoryTitle(item)}
-                            </Text>
-                            <Text fontSize="xs" color="fg.muted">
-                              {formatDateTime(item.createdAt, item.timezone)} /{" "}
-                              {toStatusLabelFromRecord(item.status)}
-                            </Text>
-                          </Stack>
-                          <Button
-                            size="xs"
-                            variant="outline"
-                            onClick={() => handleSelectHistory(item)}
-                          >
-                            表示
-                          </Button>
-                        </HStack>
-                      </List.Item>
-                    ))}
-                  </List.Root>
-                )}
-              </Card.Body>
-            </Card.Root>
-          </Tabs.Content>
-        </Tabs.Root>
-      </Stack>
-    );
-  })();
-
+import NextLink from "next/link";
+
+const modeItems = [
+  {
+    title: "設計モード",
+    subtitle: "夜に目標を行動へ変換",
+    description:
+      "大きな目標をサブタスクへ細分化し、期限と所要時間を付与してカレンダーまで反映します。",
+    href: "/task-decomp",
+    actionLabel: "タスクを分解する",
+    badge: "Step 1",
+    color: "teal",
+  },
+  {
+    title: "運用モード",
+    subtitle: "朝に現実へ再接続",
+    description:
+      "今日の予定と進捗を見ながら、次にやることを迷わず決められる状態へ整えます。",
+    href: "/dashboard",
+    actionLabel: "今日の実行を見る",
+    badge: "Step 2",
+    color: "blue",
+  },
+] as const;
+
+export default function HomePage() {
   return (
     <Box
       minH="100dvh"
@@ -1028,83 +51,90 @@ export default function Home() {
       <Box className="app-orb app-orb--one" aria-hidden="true" />
       <Box className="app-orb app-orb--two" aria-hidden="true" />
 
-      <Container maxW="5xl" position="relative" zIndex={1}>
-        <Stack gap={6}>
-          <HStack gap={3} flexWrap="wrap">
-            <Badge colorPalette="teal" size="md">
-              Task Workflow
-            </Badge>
-            <Badge colorPalette="blue" size="md">
-              Google Calendar
-            </Badge>
-            <Badge colorPalette="green" size="md">
-              Workers AI
-            </Badge>
-          </HStack>
-
-          <Stack gap={2}>
-            <Heading size="2xl" lineHeight="1.15">
-              タスク細分化ワークフロー
+      <Container maxW="6xl" position="relative" zIndex={1}>
+        <Stack gap={{ base: 7, md: 10 }}>
+          <Stack gap={4}>
+            <HStack gap={3} flexWrap="wrap">
+              <Badge colorPalette="teal" size="md">
+                Execution OS
+              </Badge>
+              <Badge colorPalette="blue" size="md">
+                Plan to Action
+              </Badge>
+            </HStack>
+            <Heading size="2xl" lineHeight="1.1">
+              計画と実行の断絶を埋める
             </Heading>
-            <Text fontSize="lg" color="fg.muted">
-              必要な情報だけに絞った4画面フローで、入力から結果確認まで進めます。
+            <Text fontSize="lg" color="fg.muted" maxW="4xl">
+              このプロダクトが解くのは「将来の目標を、今日の行動に変換し続けられない問題」です。
+              必要なのは完璧な計画ではなく、状況が崩れても次の一歩が出る状態です。
             </Text>
           </Stack>
 
-          {viewMode !== "auth" ? (
-            <HStack justify="space-between" flexWrap="wrap" gap={3}>
-              <Badge colorPalette="teal" variant="subtle">
-                {STEP_ITEMS[currentStepIndex].label}
-              </Badge>
-
-              <HStack gap={2}>
-                <Avatar.Root size="xs">
-                  {signedInUser?.image ? (
-                    <Avatar.Image
-                      src={signedInUser.image}
-                      alt={signedInUser.name}
-                    />
-                  ) : null}
-                  <Avatar.Fallback>
-                    {toInitials(signedInUser?.name)}
-                  </Avatar.Fallback>
-                </Avatar.Root>
-                <Text fontSize="sm" color="fg.muted">
-                  {signedInUser?.email ?? "未ログイン"}
-                </Text>
-                <Button
-                  size="xs"
-                  variant="outline"
-                  onClick={() => void handleSignOut()}
-                  loading={isSignOutRunning}
-                >
-                  ログアウト
-                </Button>
-              </HStack>
-            </HStack>
-          ) : null}
-
-          <HStack gap={2} flexWrap="wrap">
-            {STEP_ITEMS.map((item, index) => (
-              <Badge
-                key={item.label}
-                variant={index <= currentStepIndex ? "solid" : "outline"}
-                colorPalette={index <= currentStepIndex ? "teal" : "gray"}
-              >
-                {index + 1}. {item.label}
-              </Badge>
-            ))}
-          </HStack>
-
           <Card.Root
             bg="var(--app-surface)"
             borderColor="var(--app-border)"
             borderWidth="1px"
             borderRadius="2xl"
-            className={`flow-card flow-card--${transitionDirection}`}
+            className="flow-card"
           >
-            <Card.Body>{screenBody}</Card.Body>
+            <Card.Body>
+              <Stack gap={3}>
+                <Text fontWeight="semibold">共通課題</Text>
+                <Text color="fg.muted">
+                  タスクが多いこと自体ではなく、毎日の予定変化のたびに優先順位を再判断する認知負荷が大きいこと。
+                </Text>
+                <List.Root gap={1} ps={4}>
+                  <List.Item color="fg.muted">
+                    目標はあるが、今日やることに落ちない
+                  </List.Item>
+                  <List.Item color="fg.muted">
+                    予定変更で計画が崩れると、再構築に時間を使う
+                  </List.Item>
+                  <List.Item color="fg.muted">
+                    結果として着手が遅れ、継続しづらくなる
+                  </List.Item>
+                </List.Root>
+              </Stack>
+            </Card.Body>
           </Card.Root>
+
+          <Grid templateColumns={{ base: "1fr", md: "1fr 1fr" }} gap={6}>
+            {modeItems.map((item) => (
+              <Card.Root
+                key={item.href}
+                bg="var(--app-surface)"
+                borderColor="var(--app-border)"
+                borderWidth="1px"
+                borderRadius="2xl"
+                className="flow-card"
+              >
+                <Card.Header pb={2}>
+                  <Stack gap={2}>
+                    <Badge
+                      colorPalette={item.color}
+                      variant="subtle"
+                      w="fit-content"
+                    >
+                      {item.badge}
+                    </Badge>
+                    <Heading size="md">{item.title}</Heading>
+                    <Text fontSize="sm" color="fg.muted">
+                      {item.subtitle}
+                    </Text>
+                  </Stack>
+                </Card.Header>
+                <Card.Body pt={0}>
+                  <Stack gap={4}>
+                    <Text color="fg.muted">{item.description}</Text>
+                    <Button asChild colorPalette={item.color} alignSelf="start">
+                      <NextLink href={item.href}>{item.actionLabel}</NextLink>
+                    </Button>
+                  </Stack>
+                </Card.Body>
+              </Card.Root>
+            ))}
+          </Grid>
         </Stack>
       </Container>
     </Box>
diff --git a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
new file mode 100644
index 0000000..7a34952
--- /dev/null
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -0,0 +1,502 @@
+"use client";
+
+import {
+  Badge,
+  Box,
+  Button,
+  Field,
+  Heading,
+  HStack,
+  Input,
+  List,
+  ProgressCircle,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import type { FormEvent } from "react";
+import { AuthPanel } from "@/components/auth/auth-panel";
+import type { SessionResponse } from "@/lib/auth-api";
+import type { WorkflowRecord } from "@/lib/task-workflow-api";
+import { formatDateTime } from "../helpers";
+import type { RunPhase } from "../types";
+
+type AuthStepProps = {
+  onSessionChanged: (nextSession: SessionResponse) => void;
+};
+
+type ComposeStepProps = {
+  task: string;
+  context: string;
+  deadline: string;
+  maxSteps: string;
+  onTaskChange: (value: string) => void;
+  onContextChange: (value: string) => void;
+  onDeadlineChange: (value: string) => void;
+  onMaxStepsChange: (value: string) => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  displayErrorMessage: string | null;
+  requiresCalendarReauth: boolean;
+  onCalendarReauth: () => void;
+  isReauthRunning: boolean;
+  phase: RunPhase;
+  isSessionLoading: boolean;
+};
+
+type RunningStepProps = {
+  workflowProgress: number;
+  phase: RunPhase;
+  waitingDots: string;
+  statusLabel: string;
+  displayErrorMessage: string | null;
+  requiresCalendarReauth: boolean;
+  onCalendarReauth: () => void;
+  isReauthRunning: boolean;
+};
+
+type ResultStepProps = {
+  phase: RunPhase;
+  statusLabel: string;
+  record: WorkflowRecord | null;
+  userTimezone: string;
+  displayErrorMessage: string | null;
+  onStartNewTask: () => void;
+};
+
+type StatusCardProps = {
+  phase: RunPhase;
+  statusLabel: string;
+};
+
+function toStatusCardTone(phase: RunPhase): {
+  symbol: string;
+  caption: string;
+  dotColor: string;
+} {
+  if (phase === "failed") {
+    return {
+      symbol: "!",
+      caption: "実行エラー",
+      dotColor: "red.400",
+    };
+  }
+
+  if (phase === "completed") {
+    return {
+      symbol: "✓",
+      caption: "実行完了",
+      dotColor: "green.400",
+    };
+  }
+
+  if (phase === "starting") {
+    return {
+      symbol: "◔",
+      caption: "開始中",
+      dotColor: "teal.400",
+    };
+  }
+
+  if (phase === "waiting") {
+    return {
+      symbol: "◕",
+      caption: "実行中",
+      dotColor: "teal.400",
+    };
+  }
+
+  return {
+    symbol: "•",
+    caption: "待機中",
+    dotColor: "gray.400",
+  };
+}
+
+function StatusCard({ phase, statusLabel }: StatusCardProps) {
+  const tone = toStatusCardTone(phase);
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor="var(--app-border)"
+      bg="var(--app-surface-soft)"
+      borderRadius="lg"
+      px={{ base: 3, md: 3.5 }}
+      py={{ base: 2, md: 2.5 }}
+      w="fit-content"
+      maxW="100%"
+      title={statusLabel}
+      aria-label={`${tone.caption} (${statusLabel})`}
+    >
+      <HStack gap={1.5}>
+        <Box w={2} h={2} borderRadius="full" bg={tone.dotColor} />
+        <Text fontSize="xs" color="fg.muted">
+          {tone.symbol}
+        </Text>
+        <Text fontSize="xs" color="fg.muted">
+          {tone.caption}
+        </Text>
+      </HStack>
+    </Box>
+  );
+}
+
+export function AuthStep({ onSessionChanged }: AuthStepProps) {
+  return (
+    <Stack gap={5}>
+      <Text color="fg.muted" fontSize="sm">
+        まずGoogleでログインし、カレンダー連携権限を許可してください。
+        認証後はタスク入力画面に進みます。
+      </Text>
+      <AuthPanel onSessionChanged={onSessionChanged} />
+    </Stack>
+  );
+}
+
+export function ComposeStep({
+  task,
+  context,
+  deadline,
+  maxSteps,
+  onTaskChange,
+  onContextChange,
+  onDeadlineChange,
+  onMaxStepsChange,
+  onSubmit,
+  displayErrorMessage,
+  requiresCalendarReauth,
+  onCalendarReauth,
+  isReauthRunning,
+  phase,
+  isSessionLoading,
+}: ComposeStepProps) {
+  return (
+    <Stack gap={5}>
+      <Box
+        borderWidth="1px"
+        borderColor="var(--app-border)"
+        bg="var(--app-surface-soft)"
+        borderRadius="xl"
+        p={3}
+      >
+        <Stack gap={2}>
+          <Text fontSize="sm" fontWeight="semibold">
+            この画面で実行される処理
+          </Text>
+          <List.Root gap={1} ps={4}>
+            <List.Item fontSize="sm" color="fg.muted">
+              入力タスクを Workers AI で細分化します
+            </List.Item>
+            <List.Item fontSize="sm" color="fg.muted">
+              細分化結果を Google Calendar へ予定として追加します
+            </List.Item>
+            <List.Item fontSize="sm" color="fg.muted">
+              実行結果を D1 に保存し、画面へ反映します
+            </List.Item>
+          </List.Root>
+          <Text fontSize="xs" color="fg.muted">
+            Google Calendar は連携済みです。権限エラーが出た場合は
+            「Google権限を再認可」から再ログインしてください。
+          </Text>
+        </Stack>
+      </Box>
+
+      <form onSubmit={onSubmit}>
+        <Stack gap={4}>
+          <Field.Root required>
+            <Field.Label>細分化したいタスク</Field.Label>
+            <Textarea
+              value={task}
+              onChange={(event) => onTaskChange(event.target.value)}
+              placeholder="例: ハッカソン発表までに、プロトタイプを提出可能な状態にする"
+              minH="140px"
+              bg="var(--app-surface-soft)"
+              borderColor="var(--app-border)"
+            />
+          </Field.Root>
+
+          <Field.Root>
+            <Field.Label>補足コンテキスト（任意）</Field.Label>
+            <Textarea
+              value={context}
+              onChange={(event) => onContextChange(event.target.value)}
+              placeholder="例: 3人チーム、担当はフロント中心、毎日21時以降に作業"
+              minH="96px"
+              bg="var(--app-surface-soft)"
+              borderColor="var(--app-border)"
+            />
+          </Field.Root>
+
+          <HStack align="start" gap={4} flexWrap="wrap">
+            <Field.Root flex="1" minW={{ base: "100%", md: "260px" }}>
+              <Field.Label>最終期限（任意）</Field.Label>
+              <Input
+                type="datetime-local"
+                value={deadline}
+                onChange={(event) => onDeadlineChange(event.target.value)}
+                bg="var(--app-surface-soft)"
+                borderColor="var(--app-border)"
+              />
+              <Field.HelperText>
+                未入力でも、本文と文脈から期限を推測して分解します。
+              </Field.HelperText>
+            </Field.Root>
+
+            <Field.Root w={{ base: "100%", md: "160px" }}>
+              <Field.Label>最大ステップ数</Field.Label>
+              <Input
+                type="number"
+                min={1}
+                max={12}
+                value={maxSteps}
+                onChange={(event) => onMaxStepsChange(event.target.value)}
+                bg="var(--app-surface-soft)"
+                borderColor="var(--app-border)"
+              />
+            </Field.Root>
+          </HStack>
+
+          {displayErrorMessage ? (
+            <Text fontSize="sm" color="red.500">
+              {displayErrorMessage}
+            </Text>
+          ) : null}
+
+          {requiresCalendarReauth ? (
+            <HStack gap={3} flexWrap="wrap">
+              <Button
+                size="sm"
+                colorPalette="orange"
+                variant="outline"
+                onClick={onCalendarReauth}
+                loading={isReauthRunning}
+              >
+                Google権限を再認可
+              </Button>
+              <Text fontSize="xs" color="fg.muted">
+                権限許可後に同じタスクを再実行してください。
+              </Text>
+            </HStack>
+          ) : null}
+
+          <HStack justify="end">
+            <Button
+              colorPalette="teal"
+              type="submit"
+              loading={phase === "starting"}
+              disabled={phase === "waiting" || isSessionLoading}
+            >
+              細分化を開始
+            </Button>
+          </HStack>
+        </Stack>
+      </form>
+    </Stack>
+  );
+}
+
+export function RunningStep({
+  workflowProgress,
+  phase,
+  waitingDots,
+  statusLabel,
+  displayErrorMessage,
+  requiresCalendarReauth,
+  onCalendarReauth,
+  isReauthRunning,
+}: RunningStepProps) {
+  return (
+    <Stack align="center" textAlign="center" gap={5} py={{ base: 4, md: 8 }}>
+      <ProgressCircle.Root
+        value={workflowProgress}
+        size="xl"
+        colorPalette={phase === "failed" ? "red" : "teal"}
+      >
+        <ProgressCircle.Circle>
+          <ProgressCircle.Track />
+          <ProgressCircle.Range />
+        </ProgressCircle.Circle>
+        <ProgressCircle.ValueText>{workflowProgress}%</ProgressCircle.ValueText>
+      </ProgressCircle.Root>
+
+      <Stack gap={1}>
+        <Heading size="md">ワークフロー実行中{waitingDots}</Heading>
+        <Text color="fg.muted" fontSize="sm">
+          完了したら自動で結果画面へ切り替わります。
+        </Text>
+      </Stack>
+
+      <StatusCard phase={phase} statusLabel={statusLabel} />
+
+      {displayErrorMessage ? (
+        <Text fontSize="sm" color="red.500">
+          {displayErrorMessage}
+        </Text>
+      ) : null}
+
+      {requiresCalendarReauth ? (
+        <Button
+          size="sm"
+          colorPalette="orange"
+          variant="outline"
+          onClick={onCalendarReauth}
+          loading={isReauthRunning}
+        >
+          Google権限を再認可
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}
+
+export function ResultStep({
+  phase,
+  statusLabel,
+  record,
+  userTimezone,
+  displayErrorMessage,
+  onStartNewTask,
+}: ResultStepProps) {
+  const breakdown = record?.llmOutput;
+  const calendarResult = record?.calendarOutput;
+  const displayTimezone = record?.timezone ?? userTimezone;
+
+  return (
+    <Stack gap={5}>
+      <HStack justify="space-between" align="start" flexWrap="wrap" gap={3}>
+        <StatusCard phase={phase} statusLabel={statusLabel} />
+        <Button variant="outline" onClick={onStartNewTask}>
+          新しいタスクを入力
+        </Button>
+      </HStack>
+
+      {breakdown ? (
+        <Stack gap={5}>
+          <Stack gap={2}>
+            <Text fontSize="xs" color="fg.muted" fontWeight="semibold">
+              目標
+            </Text>
+            <Text>{breakdown.goal}</Text>
+            <Text fontSize="xs" color="fg.muted" fontWeight="semibold" pt={2}>
+              要約
+            </Text>
+            <Text color="fg.muted">{breakdown.summary}</Text>
+          </Stack>
+
+          <Stack gap={3}>
+            <HStack justify="space-between" flexWrap="wrap">
+              <Text fontWeight="semibold">サブタスク</Text>
+              <Badge colorPalette="teal" variant="subtle">
+                {breakdown.subtasks.length} 件
+              </Badge>
+            </HStack>
+            <List.Root gap={3}>
+              {breakdown.subtasks.map((subtask, index) => (
+                <List.Item key={`${index}-${subtask.title}`}>
+                  <Box borderWidth="1px" borderRadius="xl" p={3}>
+                    <Stack gap={1}>
+                      <Text fontWeight="medium">{subtask.title}</Text>
+                      <Text fontSize="sm" color="fg.muted">
+                        {subtask.description}
+                      </Text>
+                      <HStack gap={2} flexWrap="wrap">
+                        <Badge colorPalette="blue" variant="subtle">
+                          期限: {formatDateTime(subtask.dueAt, displayTimezone)}
+                        </Badge>
+                        <Badge colorPalette="teal" variant="subtle">
+                          {subtask.durationMinutes} 分
+                        </Badge>
+                      </HStack>
+                    </Stack>
+                  </Box>
+                </List.Item>
+              ))}
+            </List.Root>
+          </Stack>
+
+          {calendarResult ? (
+            <Stack gap={3}>
+              <HStack justify="space-between" flexWrap="wrap">
+                <Text fontWeight="semibold">Google Calendar 反映結果</Text>
+                <Badge colorPalette="blue" variant="subtle">
+                  {calendarResult.createdEvents.length} 件
+                </Badge>
+              </HStack>
+
+              {calendarResult.createdEvents.length === 0 ? (
+                <Text fontSize="sm" color="fg.muted">
+                  作成された予定はありません。
+                </Text>
+              ) : (
+                <List.Root gap={2}>
+                  {calendarResult.createdEvents.map((eventItem) => (
+                    <List.Item key={eventItem.id}>
+                      <HStack justify="space-between" align="start" gap={3}>
+                        <Stack gap={1}>
+                          <Text fontWeight="medium">{eventItem.summary}</Text>
+                          <Text fontSize="sm" color="fg.muted">
+                            {formatDateTime(
+                              eventItem.startAt,
+                              calendarResult.timezone ?? displayTimezone,
+                            )}{" "}
+                            -{" "}
+                            {formatDateTime(
+                              eventItem.endAt,
+                              calendarResult.timezone ?? displayTimezone,
+                            )}
+                          </Text>
+                        </Stack>
+                        {eventItem.htmlLink ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (!eventItem.htmlLink) {
+                                return;
+                              }
+                              window.open(
+                                eventItem.htmlLink,
+                                "_blank",
+                                "noopener,noreferrer",
+                              );
+                            }}
+                          >
+                            開く
+                          </Button>
+                        ) : (
+                          <Badge colorPalette="gray">リンクなし</Badge>
+                        )}
+                      </HStack>
+                    </List.Item>
+                  ))}
+                </List.Root>
+              )}
+            </Stack>
+          ) : null}
+
+          {breakdown.assumptions.length > 0 ? (
+            <Stack gap={2}>
+              <Text fontWeight="semibold">前提 / メモ</Text>
+              <List.Root gap={1}>
+                {breakdown.assumptions.map((item, index) => (
+                  <List.Item key={`${index}-${item}`}>{item}</List.Item>
+                ))}
+              </List.Root>
+            </Stack>
+          ) : null}
+        </Stack>
+      ) : (
+        <Stack gap={2}>
+          <Text fontSize="sm" color="fg.muted">
+            結果がありません。失敗した場合は履歴から詳細を確認してください。
+          </Text>
+          {displayErrorMessage ? (
+            <Text fontSize="sm" color="red.500">
+              {displayErrorMessage}
+            </Text>
+          ) : null}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/frontend/src/app/task-decomp/constants.ts b/frontend/src/app/task-decomp/constants.ts
new file mode 100644
index 0000000..94e4b8c
--- /dev/null
+++ b/frontend/src/app/task-decomp/constants.ts
@@ -0,0 +1,13 @@
+export type StepItem = {
+  label: string;
+};
+
+export const CALENDAR_REAUTH_MARKER = "REAUTH_REQUIRED_CALENDAR_SCOPE:";
+export const DEFAULT_USER_TIMEZONE = "Asia/Tokyo";
+
+export const STEP_ITEMS: StepItem[] = [
+  { label: "認証" },
+  { label: "入力" },
+  { label: "実行" },
+  { label: "結果" },
+];
diff --git a/frontend/src/app/task-decomp/helpers.ts b/frontend/src/app/task-decomp/helpers.ts
new file mode 100644
index 0000000..f40ce85
--- /dev/null
+++ b/frontend/src/app/task-decomp/helpers.ts
@@ -0,0 +1,269 @@
+import { AuthApiError } from "@/lib/auth-api";
+import {
+  TaskWorkflowApiError,
+  type WorkflowRecord,
+  type WorkflowRuntimeStatus,
+} from "@/lib/task-workflow-api";
+import { CALENDAR_REAUTH_MARKER, DEFAULT_USER_TIMEZONE } from "./constants";
+import type { ErrorAction, RunPhase, ViewMode } from "./types";
+
+export function viewIndex(view: ViewMode): number {
+  if (view === "auth") {
+    return 0;
+  }
+  if (view === "compose") {
+    return 1;
+  }
+  if (view === "running") {
+    return 2;
+  }
+  return 3;
+}
+
+function fallbackErrorMessage(action: ErrorAction): string {
+  if (action === "start") {
+    return "Workflow の開始に失敗しました。";
+  }
+  if (action === "status") {
+    return "Workflow の状態取得に失敗しました。";
+  }
+  if (action === "history") {
+    return "履歴の取得に失敗しました。";
+  }
+  if (action === "signOut") {
+    return "ログアウトに失敗しました。時間をおいて再試行してください。";
+  }
+  return "セッション状態の取得に失敗しました。";
+}
+
+export function toErrorMessage(error: unknown, action: ErrorAction): string {
+  if (error instanceof TypeError) {
+    return "ネットワーク接続に失敗しました。通信環境を確認してください。";
+  }
+
+  if (error instanceof TaskWorkflowApiError || error instanceof AuthApiError) {
+    if (error.status === 401) {
+      return "ログインが必要です。Google でログインしてください。";
+    }
+    if (error.status >= 500) {
+      return "サーバー側でエラーが発生しました。時間をおいて再試行してください。";
+    }
+  }
+
+  return fallbackErrorMessage(action);
+}
+
+export function needsCalendarReauth(rawMessage: string | null): boolean {
+  return Boolean(rawMessage?.includes(CALENDAR_REAUTH_MARKER));
+}
+
+export function toDisplayErrorMessage(
+  rawMessage: string | null,
+): string | null {
+  if (!rawMessage) {
+    return null;
+  }
+
+  if (!needsCalendarReauth(rawMessage)) {
+    return rawMessage;
+  }
+
+  const message = rawMessage.replace(CALENDAR_REAUTH_MARKER, "").trim();
+  if (message.length > 0) {
+    return message;
+  }
+
+  return "Google Calendar の権限再許可が必要です。";
+}
+
+export function formatDateTime(
+  value: string | null | undefined,
+  timezone?: string | null,
+): string {
+  if (!value) {
+    return "-";
+  }
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  const safeTimezone = normalizeTimezone(timezone);
+  try {
+    return parsed.toLocaleString("ja-JP", {
+      timeZone: safeTimezone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return parsed.toLocaleString("ja-JP", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+}
+
+export function normalizeTimezone(timezone: string | null | undefined): string {
+  if (!timezone || timezone.trim().length === 0) {
+    return DEFAULT_USER_TIMEZONE;
+  }
+
+  const candidate = timezone.trim();
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      timeZone: candidate,
+    }).resolvedOptions().timeZone;
+  } catch {
+    return DEFAULT_USER_TIMEZONE;
+  }
+}
+
+export function detectBrowserTimezone(): string {
+  if (typeof window === "undefined") {
+    return DEFAULT_USER_TIMEZONE;
+  }
+
+  return normalizeTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+}
+
+export function toStatusLabel(
+  phase: RunPhase,
+  workflowStatus: WorkflowRuntimeStatus | null,
+  record: WorkflowRecord | null,
+): string {
+  if (phase === "starting") {
+    return "開始中";
+  }
+
+  if (record?.status) {
+    return toStatusLabelFromRecord(record.status);
+  }
+
+  if (workflowStatus) {
+    if (workflowStatus.status === "running") {
+      return "実行中";
+    }
+    if (workflowStatus.status === "complete") {
+      return "完了";
+    }
+    if (
+      workflowStatus.status === "errored" ||
+      workflowStatus.status === "terminated"
+    ) {
+      return "失敗";
+    }
+  }
+
+  if (phase === "waiting") {
+    return "待機中";
+  }
+
+  return "未実行";
+}
+
+export function toStatusLabelFromRecord(
+  status: WorkflowRecord["status"],
+): string {
+  if (status === "queued") {
+    return "キュー待ち";
+  }
+  if (status === "running") {
+    return "細分化中";
+  }
+  if (status === "calendar_syncing") {
+    return "カレンダー反映中";
+  }
+  if (status === "completed") {
+    return "完了";
+  }
+  return "失敗";
+}
+
+export function toHistoryTitle(record: WorkflowRecord): string {
+  const summary = record.llmOutput?.summary?.trim();
+  if (summary && summary.length > 0) {
+    return summary;
+  }
+
+  const goal = record.llmOutput?.goal?.trim();
+  if (goal && goal.length > 0) {
+    return goal;
+  }
+
+  return record.taskInput;
+}
+
+export function toWorkflowProgress(
+  phase: RunPhase,
+  record: WorkflowRecord | null,
+  workflowStatus: WorkflowRuntimeStatus | null,
+): number {
+  if (phase === "starting") {
+    return 15;
+  }
+
+  if (record?.status) {
+    if (record.status === "queued") {
+      return 25;
+    }
+    if (record.status === "running") {
+      return 58;
+    }
+    if (record.status === "calendar_syncing") {
+      return 84;
+    }
+    return 100;
+  }
+
+  if (workflowStatus?.status === "complete") {
+    return 100;
+  }
+  if (
+    workflowStatus?.status === "errored" ||
+    workflowStatus?.status === "terminated"
+  ) {
+    return 100;
+  }
+  if (phase === "waiting") {
+    return 45;
+  }
+
+  return 0;
+}
+
+export function toDeadlineIso(value: string): string | undefined {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return undefined;
+  }
+
+  const parsed = new Date(trimmed);
+  if (Number.isNaN(parsed.getTime())) {
+    return undefined;
+  }
+
+  return parsed.toISOString();
+}
+
+export function toInitials(name: string | null | undefined): string {
+  if (!name || name.trim().length === 0) {
+    return "GU";
+  }
+
+  const letters = name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .filter((part) => part.length > 0)
+    .join("");
+
+  return letters.length > 0 ? letters : "GU";
+}
diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
new file mode 100644
index 0000000..5bb61c7
--- /dev/null
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+import {
+  Avatar,
+  Box,
+  Button,
+  Container,
+  Drawer,
+  Heading,
+  HStack,
+  List,
+  Portal,
+  Stack,
+  Steps,
+  Text,
+} from "@chakra-ui/react";
+import NextLink from "next/link";
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  getSession,
+  type SessionResponse,
+  signInWithGoogle,
+  signOut,
+} from "@/lib/auth-api";
+import {
+  getTaskWorkflowHistory,
+  getTaskWorkflowStatus,
+  startTaskWorkflow,
+  TaskWorkflowApiError,
+  type WorkflowRecord,
+  type WorkflowRuntimeStatus,
+} from "@/lib/task-workflow-api";
+import {
+  AuthStep,
+  ComposeStep,
+  ResultStep,
+  RunningStep,
+} from "./components/task-decomp-steps";
+import { STEP_ITEMS } from "./constants";
+import {
+  detectBrowserTimezone,
+  formatDateTime,
+  needsCalendarReauth,
+  toDeadlineIso,
+  toDisplayErrorMessage,
+  toErrorMessage,
+  toHistoryTitle,
+  toInitials,
+  toStatusLabel,
+  toStatusLabelFromRecord,
+  toWorkflowProgress,
+  viewIndex,
+} from "./helpers";
+import type { RunPhase, TransitionDirection, ViewMode } from "./types";
+
+type TaskDraft = {
+  task: string;
+  context: string;
+  deadline: string;
+  maxSteps: string;
+};
+
+const DEFAULT_MAX_STEPS = "6";
+const TASK_DRAFT_STORAGE_PREFIX = "task-decomp:draft:";
+
+function taskDraftStorageKey(userId: string): string {
+  return `${TASK_DRAFT_STORAGE_PREFIX}${userId}`;
+}
+
+function isEmptyTaskDraft(draft: TaskDraft): boolean {
+  return (
+    draft.task.trim().length === 0 &&
+    draft.context.trim().length === 0 &&
+    draft.deadline.trim().length === 0 &&
+    draft.maxSteps.trim() === DEFAULT_MAX_STEPS
+  );
+}
+
+export default function TaskDecompPage() {
+  const [session, setSession] = useState<SessionResponse>(null);
+  const [isSessionLoading, setIsSessionLoading] = useState(true);
+
+  const [task, setTask] = useState("");
+  const [context, setContext] = useState("");
+  const [deadline, setDeadline] = useState("");
+  const [maxSteps, setMaxSteps] = useState(DEFAULT_MAX_STEPS);
+
+  const [phase, setPhase] = useState<RunPhase>("idle");
+  const [workflowId, setWorkflowId] = useState<string | null>(null);
+  const [workflowStatus, setWorkflowStatus] =
+    useState<WorkflowRuntimeStatus | null>(null);
+  const [record, setRecord] = useState<WorkflowRecord | null>(null);
+  const [history, setHistory] = useState<WorkflowRecord[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isReauthRunning, setIsReauthRunning] = useState(false);
+  const [isSignOutRunning, setIsSignOutRunning] = useState(false);
+  const [isHistoryDrawerOpen, setIsHistoryDrawerOpen] = useState(false);
+  const [dotTick, setDotTick] = useState(0);
+
+  const [viewMode, setViewMode] = useState<ViewMode>("auth");
+  const [transitionDirection, setTransitionDirection] =
+    useState<TransitionDirection>("forward");
+
+  const viewModeRef = useRef<ViewMode>("auth");
+  const loadedDraftUserIdRef = useRef<string | null>(null);
+
+  const signedInUser = useMemo(() => session?.user ?? null, [session]);
+  const userTimezone = useMemo(() => detectBrowserTimezone(), []);
+  const statusLabel = useMemo(
+    () => toStatusLabel(phase, workflowStatus, record),
+    [phase, workflowStatus, record],
+  );
+  const workflowProgress = useMemo(
+    () => toWorkflowProgress(phase, record, workflowStatus),
+    [phase, record, workflowStatus],
+  );
+  const requiresCalendarReauth = useMemo(
+    () => needsCalendarReauth(errorMessage),
+    [errorMessage],
+  );
+  const displayErrorMessage = useMemo(
+    () => toDisplayErrorMessage(errorMessage),
+    [errorMessage],
+  );
+
+  const setView = useCallback((nextView: ViewMode) => {
+    const previous = viewModeRef.current;
+    if (previous === nextView) {
+      return;
+    }
+
+    setTransitionDirection(
+      viewIndex(nextView) > viewIndex(previous) ? "forward" : "backward",
+    );
+    viewModeRef.current = nextView;
+    setViewMode(nextView);
+  }, []);
+
+  const refreshSession = useCallback(async () => {
+    setIsSessionLoading(true);
+    try {
+      const nextSession = await getSession();
+      setSession(nextSession);
+    } catch (error) {
+      setErrorMessage(toErrorMessage(error, "session"));
+      setSession(null);
+    } finally {
+      setIsSessionLoading(false);
+    }
+  }, []);
+
+  const refreshHistory = useCallback(async () => {
+    if (!signedInUser) {
+      setHistory([]);
+      return;
+    }
+
+    try {
+      const response = await getTaskWorkflowHistory(8);
+      setHistory(response.items);
+    } catch (error) {
+      setErrorMessage(toErrorMessage(error, "history"));
+    }
+  }, [signedInUser]);
+
+  useEffect(() => {
+    void refreshSession();
+  }, [refreshSession]);
+
+  useEffect(() => {
+    void refreshHistory();
+  }, [refreshHistory]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const userId = signedInUser?.id ?? null;
+    if (!userId) {
+      loadedDraftUserIdRef.current = null;
+      return;
+    }
+
+    if (loadedDraftUserIdRef.current === userId) {
+      return;
+    }
+
+    loadedDraftUserIdRef.current = userId;
+    const rawDraft = window.localStorage.getItem(taskDraftStorageKey(userId));
+    if (!rawDraft) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(rawDraft) as Partial<TaskDraft>;
+      setTask(typeof parsed.task === "string" ? parsed.task : "");
+      setContext(typeof parsed.context === "string" ? parsed.context : "");
+      setDeadline(typeof parsed.deadline === "string" ? parsed.deadline : "");
+      setMaxSteps(
+        typeof parsed.maxSteps === "string"
+          ? parsed.maxSteps
+          : DEFAULT_MAX_STEPS,
+      );
+    } catch {
+      window.localStorage.removeItem(taskDraftStorageKey(userId));
+    }
+  }, [signedInUser?.id]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const userId = signedInUser?.id;
+    if (!userId) {
+      return;
+    }
+
+    const draft: TaskDraft = {
+      task,
+      context,
+      deadline,
+      maxSteps,
+    };
+    const storageKey = taskDraftStorageKey(userId);
+    if (isEmptyTaskDraft(draft)) {
+      window.localStorage.removeItem(storageKey);
+      return;
+    }
+
+    window.localStorage.setItem(storageKey, JSON.stringify(draft));
+  }, [signedInUser?.id, task, context, deadline, maxSteps]);
+
+  useEffect(() => {
+    if (phase !== "waiting") {
+      setDotTick(0);
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      setDotTick((prev) => (prev + 1) % 3);
+    }, 420);
+
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [phase]);
+
+  useEffect(() => {
+    if (!workflowId || phase !== "waiting") {
+      return;
+    }
+
+    let active = true;
+    let inFlight = false;
+
+    const poll = async () => {
+      if (inFlight) {
+        return;
+      }
+
+      inFlight = true;
+      try {
+        const response = await getTaskWorkflowStatus(workflowId);
+        if (!active) {
+          return;
+        }
+
+        setWorkflowStatus(response.workflowStatus);
+        setRecord(response.record);
+
+        if (response.record?.status === "completed") {
+          setPhase("completed");
+          setErrorMessage(null);
+          void refreshHistory();
+          return;
+        }
+
+        if (response.record?.status === "failed") {
+          setPhase("failed");
+          setErrorMessage(
+            response.record.errorMessage ?? "Workflow が失敗しました。",
+          );
+          void refreshHistory();
+          return;
+        }
+
+        if (
+          response.workflowStatus.status === "errored" ||
+          response.workflowStatus.status === "terminated"
+        ) {
+          setPhase("failed");
+          setErrorMessage(
+            response.workflowStatus.error?.message ??
+              "Workflow が異常終了しました。",
+          );
+        }
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        setErrorMessage(toErrorMessage(error, "status"));
+        if (error instanceof TaskWorkflowApiError && error.status === 401) {
+          setPhase("failed");
+        }
+      } finally {
+        inFlight = false;
+      }
+    };
+
+    void poll();
+    const pollIntervalMs =
+      record?.status === "running" || record?.status === "calendar_syncing"
+        ? 5000
+        : 3000;
+    const timer = window.setInterval(() => {
+      void poll();
+    }, pollIntervalMs);
+
+    return () => {
+      active = false;
+      window.clearInterval(timer);
+    };
+  }, [workflowId, phase, record?.status, refreshHistory]);
+
+  useEffect(() => {
+    let nextView: ViewMode;
+
+    if (!signedInUser) {
+      nextView = "auth";
+    } else if (phase === "starting" || phase === "waiting") {
+      nextView = "running";
+    } else if (
+      phase === "completed" ||
+      phase === "failed" ||
+      record?.status === "completed" ||
+      record?.status === "failed"
+    ) {
+      nextView = "result";
+    } else {
+      nextView = "compose";
+    }
+
+    setView(nextView);
+  }, [phase, record?.status, setView, signedInUser]);
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!signedInUser) {
+      setErrorMessage(
+        "実行にはログインが必要です。Google でログインしてください。",
+      );
+      return;
+    }
+
+    const trimmedTask = task.trim();
+    if (trimmedTask.length === 0) {
+      setErrorMessage("タスク入力は必須です。");
+      return;
+    }
+
+    const deadlineIso = toDeadlineIso(deadline);
+    if (deadline.trim().length > 0 && !deadlineIso) {
+      setErrorMessage("最終期限の形式が正しくありません。");
+      return;
+    }
+
+    const parsedMaxSteps = Number(maxSteps);
+    const safeMaxSteps = Number.isFinite(parsedMaxSteps)
+      ? Math.min(Math.max(Math.trunc(parsedMaxSteps), 1), 12)
+      : 6;
+    const timezone = userTimezone;
+
+    setPhase("starting");
+    setErrorMessage(null);
+
+    try {
+      const response = await startTaskWorkflow({
+        task: trimmedTask,
+        context: context.trim().length > 0 ? context.trim() : undefined,
+        deadline: deadlineIso,
+        timezone,
+        maxSteps: safeMaxSteps,
+      });
+
+      setWorkflowId(response.id);
+      setWorkflowStatus(response.workflowStatus);
+      setRecord(response.record);
+
+      if (response.record?.status === "completed") {
+        setPhase("completed");
+      } else if (response.record?.status === "failed") {
+        setPhase("failed");
+        setErrorMessage(
+          response.record.errorMessage ?? "Workflow が失敗しました。",
+        );
+      } else {
+        setPhase("waiting");
+      }
+
+      await refreshHistory();
+    } catch (error) {
+      setPhase("failed");
+      setErrorMessage(toErrorMessage(error, "start"));
+    }
+  };
+
+  const handleSelectHistory = (item: WorkflowRecord) => {
+    setWorkflowId(item.workflowId);
+    setRecord(item);
+    setWorkflowStatus(null);
+    setErrorMessage(null);
+
+    if (item.status === "completed") {
+      setPhase("completed");
+      return;
+    }
+
+    if (item.status === "failed") {
+      setPhase("failed");
+      setErrorMessage(item.errorMessage ?? "Workflow が失敗しました。");
+      return;
+    }
+
+    setPhase("waiting");
+  };
+
+  const handleStartNewTask = () => {
+    setPhase("idle");
+    setWorkflowId(null);
+    setWorkflowStatus(null);
+    setRecord(null);
+    setErrorMessage(null);
+  };
+
+  const handleSignOut = async () => {
+    const currentUserId = signedInUser?.id ?? null;
+    setIsSignOutRunning(true);
+    try {
+      await signOut();
+      if (typeof window !== "undefined" && currentUserId) {
+        window.localStorage.removeItem(taskDraftStorageKey(currentUserId));
+      }
+      setSession(null);
+      setIsHistoryDrawerOpen(false);
+      setHistory([]);
+      loadedDraftUserIdRef.current = null;
+      setTask("");
+      setContext("");
+      setDeadline("");
+      setMaxSteps(DEFAULT_MAX_STEPS);
+      handleStartNewTask();
+    } catch (error) {
+      setErrorMessage(toErrorMessage(error, "signOut"));
+    } finally {
+      setIsSignOutRunning(false);
+    }
+  };
+
+  const handleCalendarReauth = async () => {
+    setIsReauthRunning(true);
+    try {
+      await signInWithGoogle(window.location.href);
+    } catch (error) {
+      setErrorMessage(toErrorMessage(error, "session"));
+      setIsReauthRunning(false);
+      return;
+    }
+
+    setIsReauthRunning(false);
+  };
+
+  const handleAuthPanelSessionChanged = useCallback(
+    (nextSession: SessionResponse) => {
+      setSession(nextSession);
+      setIsSessionLoading(false);
+    },
+    [],
+  );
+
+  const currentStepIndex = viewIndex(viewMode);
+  const waitingDots = ".".repeat(dotTick + 1);
+  const handleOpenHistoryDrawer = () => {
+    void refreshHistory();
+    setIsHistoryDrawerOpen(true);
+  };
+  const handleSelectHistoryFromDrawer = (item: WorkflowRecord) => {
+    setIsHistoryDrawerOpen(false);
+    handleSelectHistory(item);
+  };
+
+  const screenBody = (() => {
+    if (viewMode === "auth") {
+      return <AuthStep onSessionChanged={handleAuthPanelSessionChanged} />;
+    }
+
+    if (viewMode === "compose") {
+      return (
+        <ComposeStep
+          task={task}
+          context={context}
+          deadline={deadline}
+          maxSteps={maxSteps}
+          onTaskChange={setTask}
+          onContextChange={setContext}
+          onDeadlineChange={setDeadline}
+          onMaxStepsChange={setMaxSteps}
+          onSubmit={handleSubmit}
+          displayErrorMessage={displayErrorMessage}
+          requiresCalendarReauth={requiresCalendarReauth}
+          onCalendarReauth={() => void handleCalendarReauth()}
+          isReauthRunning={isReauthRunning}
+          phase={phase}
+          isSessionLoading={isSessionLoading}
+        />
+      );
+    }
+
+    if (viewMode === "running") {
+      return (
+        <RunningStep
+          workflowProgress={workflowProgress}
+          phase={phase}
+          waitingDots={waitingDots}
+          statusLabel={statusLabel}
+          displayErrorMessage={displayErrorMessage}
+          requiresCalendarReauth={requiresCalendarReauth}
+          onCalendarReauth={() => void handleCalendarReauth()}
+          isReauthRunning={isReauthRunning}
+        />
+      );
+    }
+
+    return (
+      <ResultStep
+        phase={phase}
+        statusLabel={statusLabel}
+        record={record}
+        userTimezone={userTimezone}
+        displayErrorMessage={displayErrorMessage}
+        onStartNewTask={handleStartNewTask}
+      />
+    );
+  })();
+
+  return (
+    <Box
+      minH="100dvh"
+      bg="var(--app-bg)"
+      px={{ base: 4, md: 8 }}
+      py={{ base: 8, md: 12 }}
+      position="relative"
+      overflow="hidden"
+    >
+      <Box className="app-orb app-orb--one" aria-hidden="true" />
+      <Box className="app-orb app-orb--two" aria-hidden="true" />
+
+      <Container maxW="5xl" position="relative" zIndex={1}>
+        <Stack gap={6}>
+          <Stack gap={2}>
+            <Heading size={{ base: "xl", md: "2xl" }} lineHeight="1.15">
+              タスク細分化ワークフロー
+            </Heading>
+            <Text fontSize={{ base: "md", md: "lg" }} color="fg.muted">
+              目標を今日の実行に落とし込むためのフローです。
+            </Text>
+          </Stack>
+
+          <HStack gap={2} flexWrap="wrap">
+            <Button asChild size="xs" variant="outline">
+              <NextLink href="/">トップへ</NextLink>
+            </Button>
+            <Button asChild size="xs" variant="outline">
+              <NextLink href="/dashboard">ダッシュボードへ</NextLink>
+            </Button>
+          </HStack>
+
+          <Stack gap={3}>
+            <Steps.Root
+              step={currentStepIndex}
+              count={STEP_ITEMS.length}
+              colorPalette="teal"
+              size="sm"
+              linear
+            >
+              <Steps.List>
+                {STEP_ITEMS.map((item, index) => (
+                  <Steps.Item key={item.label} index={index} flex="1">
+                    <Steps.Trigger
+                      disabled
+                      px={{ base: 1, md: 2 }}
+                      py={1}
+                      justifyContent="center"
+                      gap={2}
+                    >
+                      <Steps.Indicator />
+                      <Steps.Title
+                        fontSize={{ base: "xs", md: "sm" }}
+                        display={{ base: "none", sm: "block" }}
+                      >
+                        {item.label}
+                      </Steps.Title>
+                    </Steps.Trigger>
+                    {index < STEP_ITEMS.length - 1 ? <Steps.Separator /> : null}
+                  </Steps.Item>
+                ))}
+              </Steps.List>
+            </Steps.Root>
+
+            {viewMode !== "auth" ? (
+              <HStack
+                justify="space-between"
+                align="center"
+                gap={2}
+                flexWrap="wrap"
+              >
+                <Button
+                  size="xs"
+                  colorPalette="teal"
+                  variant="outline"
+                  onClick={handleOpenHistoryDrawer}
+                >
+                  履歴 ({history.length})
+                </Button>
+
+                <HStack justify="end" gap={2}>
+                  <Avatar.Root size="xs">
+                    {signedInUser?.image ? (
+                      <Avatar.Image
+                        src={signedInUser.image}
+                        alt={signedInUser.name}
+                      />
+                    ) : null}
+                    <Avatar.Fallback>
+                      {toInitials(signedInUser?.name)}
+                    </Avatar.Fallback>
+                  </Avatar.Root>
+                  <Text
+                    fontSize="sm"
+                    color="fg.muted"
+                    display={{ base: "none", md: "block" }}
+                  >
+                    {signedInUser?.email ?? "未ログイン"}
+                  </Text>
+                  <Button
+                    size="xs"
+                    variant="outline"
+                    onClick={() => void handleSignOut()}
+                    loading={isSignOutRunning}
+                  >
+                    ログアウト
+                  </Button>
+                </HStack>
+              </HStack>
+            ) : null}
+          </Stack>
+
+          {viewMode !== "auth" ? (
+            <Drawer.Root
+              open={isHistoryDrawerOpen}
+              onOpenChange={(details) => setIsHistoryDrawerOpen(details.open)}
+              placement={{ base: "bottom", md: "end" }}
+              size={{ base: "full", md: "sm" }}
+            >
+              <Portal>
+                <Drawer.Backdrop />
+                <Drawer.Positioner>
+                  <Drawer.Content>
+                    <Drawer.Header>
+                      <Drawer.Title>実行履歴</Drawer.Title>
+                      <Drawer.Description>
+                        過去のワークフローを選択して再表示できます。
+                      </Drawer.Description>
+                    </Drawer.Header>
+                    <Drawer.Body>
+                      {history.length === 0 ? (
+                        <Text fontSize="sm" color="fg.muted">
+                          まだ履歴はありません。
+                        </Text>
+                      ) : (
+                        <List.Root gap={3}>
+                          {history.map((item) => (
+                            <List.Item key={item.workflowId}>
+                              <HStack
+                                justify="space-between"
+                                align="start"
+                                gap={3}
+                              >
+                                <Stack gap={0.5}>
+                                  <Text fontWeight="medium" lineClamp={2}>
+                                    {toHistoryTitle(item)}
+                                  </Text>
+                                  <Text fontSize="xs" color="fg.muted">
+                                    {formatDateTime(
+                                      item.createdAt,
+                                      item.timezone ?? userTimezone,
+                                    )}{" "}
+                                    / {toStatusLabelFromRecord(item.status)}
+                                  </Text>
+                                </Stack>
+                                <Button
+                                  size="xs"
+                                  variant="outline"
+                                  onClick={() =>
+                                    handleSelectHistoryFromDrawer(item)
+                                  }
+                                >
+                                  表示
+                                </Button>
+                              </HStack>
+                            </List.Item>
+                          ))}
+                        </List.Root>
+                      )}
+                    </Drawer.Body>
+                    <Drawer.Footer>
+                      <Drawer.ActionTrigger asChild>
+                        <Button variant="outline">閉じる</Button>
+                      </Drawer.ActionTrigger>
+                    </Drawer.Footer>
+                  </Drawer.Content>
+                </Drawer.Positioner>
+              </Portal>
+            </Drawer.Root>
+          ) : null}
+
+          <Box className={`flow-card--${transitionDirection}`}>
+            {screenBody}
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}
diff --git a/frontend/src/app/task-decomp/types.ts b/frontend/src/app/task-decomp/types.ts
new file mode 100644
index 0000000..a7e9d82
--- /dev/null
+++ b/frontend/src/app/task-decomp/types.ts
@@ -0,0 +1,9 @@
+export type RunPhase = "idle" | "starting" | "waiting" | "completed" | "failed";
+export type ErrorAction =
+  | "start"
+  | "status"
+  | "history"
+  | "session"
+  | "signOut";
+export type ViewMode = "auth" | "compose" | "running" | "result";
+export type TransitionDirection = "forward" | "backward";