From 1dad25a98dd2c0eb9578e12643f04d338905f97f Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 04:54:17 +0900
Subject: [PATCH 01/16] move root page to task-decomp route

---
 frontend/src/app/{ => task-decomp}/page.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/app/{ => task-decomp}/page.tsx (100%)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/task-decomp/page.tsx
similarity index 100%
rename from frontend/src/app/page.tsx
rename to frontend/src/app/task-decomp/page.tsx

From f4201a297f3da3c8b0be75b286d744aa8b93faf9 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 04:59:46 +0900
Subject: [PATCH 02/16] split task-decomp page into helpers and step components

---
 .../components/task-decomp-steps.tsx          | 487 ++++++++++++
 frontend/src/app/task-decomp/constants.ts     |  13 +
 frontend/src/app/task-decomp/helpers.ts       | 231 ++++++
 frontend/src/app/task-decomp/page.tsx         | 716 ++----------------
 frontend/src/app/task-decomp/types.ts         |   5 +
 5 files changed, 808 insertions(+), 644 deletions(-)
 create mode 100644 frontend/src/app/task-decomp/components/task-decomp-steps.tsx
 create mode 100644 frontend/src/app/task-decomp/constants.ts
 create mode 100644 frontend/src/app/task-decomp/helpers.ts
 create mode 100644 frontend/src/app/task-decomp/types.ts

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..0443f79
--- /dev/null
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -0,0 +1,487 @@
+"use client";
+
+import {
+  Badge,
+  Button,
+  Card,
+  Field,
+  Heading,
+  HStack,
+  Input,
+  List,
+  ProgressCircle,
+  Stack,
+  Tabs,
+  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,
+  toHistoryTitle,
+  toStatusLabelFromRecord,
+} from "../helpers";
+import type { ResultTab, 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;
+  history: WorkflowRecord[];
+  onSelectHistory: (item: WorkflowRecord) => void;
+};
+
+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;
+  resultTab: ResultTab;
+  onResultTabChange: (tab: ResultTab) => void;
+  record: WorkflowRecord | null;
+  history: WorkflowRecord[];
+  displayErrorMessage: string | null;
+  onStartNewTask: () => void;
+  onSelectHistory: (item: WorkflowRecord) => void;
+};
+
+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,
+  history,
+  onSelectHistory,
+}: ComposeStepProps) {
+  return (
+    <Stack gap={5}>
+      <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"
+            />
+          </Field.Root>
+
+          <Field.Root>
+            <Field.Label>補足コンテキスト（任意）</Field.Label>
+            <Textarea
+              value={context}
+              onChange={(event) => onContextChange(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) => onDeadlineChange(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) => onMaxStepsChange(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={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>
+
+      {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={() => onSelectHistory(item)}
+                    >
+                      表示
+                    </Button>
+                  </HStack>
+                </List.Item>
+              ))}
+            </List.Root>
+          </Card.Body>
+        </Card.Root>
+      ) : null}
+    </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>
+
+      <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={onCalendarReauth}
+          loading={isReauthRunning}
+        >
+          Google権限を再認可
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}
+
+export function ResultStep({
+  phase,
+  statusLabel,
+  resultTab,
+  onResultTabChange,
+  record,
+  history,
+  displayErrorMessage,
+  onStartNewTask,
+  onSelectHistory,
+}: ResultStepProps) {
+  const breakdown = record?.llmOutput;
+  const calendarResult = record?.calendarOutput;
+
+  return (
+    <Stack gap={5}>
+      <HStack justify="space-between" flexWrap="wrap" gap={3}>
+        <Badge colorPalette={phase === "failed" ? "red" : "green"}>
+          {statusLabel}
+        </Badge>
+        <Button variant="outline" onClick={onStartNewTask}>
+          新しいタスクを入力
+        </Button>
+      </HStack>
+
+      <Tabs.Root
+        value={resultTab}
+        onValueChange={(details) => {
+          if (details.value === "result" || details.value === "history") {
+            onResultTabChange(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={() => onSelectHistory(item)}
+                        >
+                          表示
+                        </Button>
+                      </HStack>
+                    </List.Item>
+                  ))}
+                </List.Root>
+              )}
+            </Card.Body>
+          </Card.Root>
+        </Tabs.Content>
+      </Tabs.Root>
+    </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..b28adaf
--- /dev/null
+++ b/frontend/src/app/task-decomp/helpers.ts
@@ -0,0 +1,231 @@
+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;
+  }
+
+  return parsed.toLocaleString("ja-JP", {
+    timeZone: timezone ?? DEFAULT_USER_TIMEZONE,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+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 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;
+}
+
+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
index a3d333a..952e93c 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -7,26 +7,18 @@ import {
   Button,
   Card,
   Container,
-  Field,
   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,
+  type SessionResponse,
 } from "@/lib/auth-api";
 import {
   getTaskWorkflowHistory,
@@ -36,249 +28,31 @@ import {
   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() {
+import { STEP_ITEMS, DEFAULT_USER_TIMEZONE } from "./constants";
+import {
+  needsCalendarReauth,
+  toDeadlineIso,
+  toDisplayErrorMessage,
+  toErrorMessage,
+  toInitials,
+  toStatusLabel,
+  toWorkflowProgress,
+  viewIndex,
+} from "./helpers";
+import {
+  AuthStep,
+  ComposeStep,
+  ResultStep,
+  RunningStep,
+} from "./components/task-decomp-steps";
+import type {
+  ResultTab,
+  RunPhase,
+  TransitionDirection,
+  ViewMode,
+} from "./types";
+
+export default function TaskDecompPage() {
   const [session, setSession] = useState<SessionResponse>(null);
   const [isSessionLoading, setIsSessionLoading] = useState(true);
 
@@ -298,7 +72,7 @@ export default function Home() {
   const [isSignOutRunning, setIsSignOutRunning] = useState(false);
   const [dotTick, setDotTick] = useState(0);
 
-  const [resultTab, setResultTab] = useState<"result" | "history">("result");
+  const [resultTab, setResultTab] = useState<ResultTab>("result");
   const [viewMode, setViewMode] = useState<ViewMode>("auth");
   const [transitionDirection, setTransitionDirection] =
     useState<TransitionDirection>("forward");
@@ -418,9 +192,7 @@ export default function Home() {
 
         if (response.record?.status === "failed") {
           setPhase("failed");
-          setErrorMessage(
-            response.record.errorMessage ?? "Workflow が失敗しました。",
-          );
+          setErrorMessage(response.record.errorMessage ?? "Workflow が失敗しました。");
           void refreshHistory();
           return;
         }
@@ -534,9 +306,7 @@ export default function Home() {
         setPhase("completed");
       } else if (response.record?.status === "failed") {
         setPhase("failed");
-        setErrorMessage(
-          response.record.errorMessage ?? "Workflow が失敗しました。",
-        );
+        setErrorMessage(response.record.errorMessage ?? "Workflow が失敗しました。");
       } else {
         setPhase("waiting");
       }
@@ -619,400 +389,63 @@ export default function Home() {
 
   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>
-      );
+      return <AuthStep onSessionChanged={handleAuthPanelSessionChanged} />;
     }
 
     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>
+        <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}
+          history={history}
+          onSelectHistory={handleSelectHistory}
+        />
       );
     }
 
     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>
+        <RunningStep
+          workflowProgress={workflowProgress}
+          phase={phase}
+          waitingDots={waitingDots}
+          statusLabel={statusLabel}
+          displayErrorMessage={displayErrorMessage}
+          requiresCalendarReauth={requiresCalendarReauth}
+          onCalendarReauth={() => void handleCalendarReauth()}
+          isReauthRunning={isReauthRunning}
+        />
       );
     }
 
     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>
+      <ResultStep
+        phase={phase}
+        statusLabel={statusLabel}
+        resultTab={resultTab}
+        onResultTabChange={setResultTab}
+        record={record}
+        history={history}
+        displayErrorMessage={displayErrorMessage}
+        onStartNewTask={handleStartNewTask}
+        onSelectHistory={handleSelectHistory}
+      />
     );
   })();
 
@@ -1060,14 +493,9 @@ export default function Home() {
               <HStack gap={2}>
                 <Avatar.Root size="xs">
                   {signedInUser?.image ? (
-                    <Avatar.Image
-                      src={signedInUser.image}
-                      alt={signedInUser.name}
-                    />
+                    <Avatar.Image src={signedInUser.image} alt={signedInUser.name} />
                   ) : null}
-                  <Avatar.Fallback>
-                    {toInitials(signedInUser?.name)}
-                  </Avatar.Fallback>
+                  <Avatar.Fallback>{toInitials(signedInUser?.name)}</Avatar.Fallback>
                 </Avatar.Root>
                 <Text fontSize="sm" color="fg.muted">
                   {signedInUser?.email ?? "未ログイン"}
diff --git a/frontend/src/app/task-decomp/types.ts b/frontend/src/app/task-decomp/types.ts
new file mode 100644
index 0000000..2556800
--- /dev/null
+++ b/frontend/src/app/task-decomp/types.ts
@@ -0,0 +1,5 @@
+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";
+export type ResultTab = "result" | "history";

From c101f0e75c1d13c03e3974cba9d610de8a67d4d3 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 05:41:03 +0900
Subject: [PATCH 03/16] add root landing page and apply biome formatting

---
 frontend/src/app/page.tsx                     | 154 ++++++++++++++++++
 .../components/task-decomp-steps.tsx          |  15 +-
 frontend/src/app/task-decomp/helpers.ts       |   8 +-
 frontend/src/app/task-decomp/page.tsx         |  33 ++--
 frontend/src/app/task-decomp/types.ts         |   7 +-
 5 files changed, 198 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/app/page.tsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..3a66623
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Container,
+  Grid,
+  Heading,
+  HStack,
+  List,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+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"
+      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="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" maxW="4xl">
+              このプロダクトが解くのは「将来の目標を、今日の行動に変換し続けられない問題」です。
+              必要なのは完璧な計画ではなく、状況が崩れても次の一歩が出る状態です。
+            </Text>
+          </Stack>
+
+          <Card.Root
+            bg="var(--app-surface)"
+            borderColor="var(--app-border)"
+            borderWidth="1px"
+            borderRadius="2xl"
+            className="flow-card"
+          >
+            <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>
+
+          <HStack gap={4} flexWrap="wrap">
+            <Button asChild variant="outline" colorPalette="teal">
+              <NextLink href="/task-decomp">設計モードへ</NextLink>
+            </Button>
+            <Button asChild variant="outline" colorPalette="blue">
+              <NextLink href="/dashboard">運用モードへ</NextLink>
+            </Button>
+            <Text fontSize="sm" color="fg.muted">
+              詳細な背景はリポジトリの README に整理しています。
+            </Text>
+          </HStack>
+        </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
index 0443f79..796bc9f 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -351,7 +351,8 @@ export function ResultStep({
                           </Text>
                           <HStack gap={2} flexWrap="wrap">
                             <Badge colorPalette="blue" variant="subtle">
-                              期限: {formatDateTime(subtask.dueAt, record?.timezone)}
+                              期限:{" "}
+                              {formatDateTime(subtask.dueAt, record?.timezone)}
                             </Badge>
                             <Badge colorPalette="teal" variant="subtle">
                               {subtask.durationMinutes} 分
@@ -367,7 +368,9 @@ export function ResultStep({
               {calendarResult ? (
                 <Card.Root variant="outline" bg="var(--app-surface-soft)">
                   <Card.Header pb={2}>
-                    <Card.Title fontSize="md">Google Calendar 反映結果</Card.Title>
+                    <Card.Title fontSize="md">
+                      Google Calendar 反映結果
+                    </Card.Title>
                   </Card.Header>
                   <Card.Body>
                     <List.Root gap={2}>
@@ -375,7 +378,9 @@ export function ResultStep({
                         <List.Item key={eventItem.id}>
                           <HStack justify="space-between" align="start" gap={3}>
                             <Stack gap={1}>
-                              <Text fontWeight="medium">{eventItem.summary}</Text>
+                              <Text fontWeight="medium">
+                                {eventItem.summary}
+                              </Text>
                               <Text fontSize="sm" color="fg.muted">
                                 {formatDateTime(
                                   eventItem.startAt,
@@ -460,7 +465,9 @@ export function ResultStep({
                     <List.Item key={item.workflowId}>
                       <HStack justify="space-between" align="start" gap={3}>
                         <Stack gap={0.5}>
-                          <Text fontWeight="medium">{toHistoryTitle(item)}</Text>
+                          <Text fontWeight="medium">
+                            {toHistoryTitle(item)}
+                          </Text>
                           <Text fontSize="xs" color="fg.muted">
                             {formatDateTime(item.createdAt, item.timezone)} /{" "}
                             {toStatusLabelFromRecord(item.status)}
diff --git a/frontend/src/app/task-decomp/helpers.ts b/frontend/src/app/task-decomp/helpers.ts
index b28adaf..d784a1f 100644
--- a/frontend/src/app/task-decomp/helpers.ts
+++ b/frontend/src/app/task-decomp/helpers.ts
@@ -57,7 +57,9 @@ export function needsCalendarReauth(rawMessage: string | null): boolean {
   return Boolean(rawMessage?.includes(CALENDAR_REAUTH_MARKER));
 }
 
-export function toDisplayErrorMessage(rawMessage: string | null): string | null {
+export function toDisplayErrorMessage(
+  rawMessage: string | null,
+): string | null {
   if (!rawMessage) {
     return null;
   }
@@ -132,7 +134,9 @@ export function toStatusLabel(
   return "未実行";
 }
 
-export function toStatusLabelFromRecord(status: WorkflowRecord["status"]): string {
+export function toStatusLabelFromRecord(
+  status: WorkflowRecord["status"],
+): string {
   if (status === "queued") {
     return "キュー待ち";
   }
diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index 952e93c..04a3a19 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -16,9 +16,9 @@ import type { FormEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   getSession,
+  type SessionResponse,
   signInWithGoogle,
   signOut,
-  type SessionResponse,
 } from "@/lib/auth-api";
 import {
   getTaskWorkflowHistory,
@@ -28,7 +28,13 @@ import {
   type WorkflowRecord,
   type WorkflowRuntimeStatus,
 } from "@/lib/task-workflow-api";
-import { STEP_ITEMS, DEFAULT_USER_TIMEZONE } from "./constants";
+import {
+  AuthStep,
+  ComposeStep,
+  ResultStep,
+  RunningStep,
+} from "./components/task-decomp-steps";
+import { DEFAULT_USER_TIMEZONE, STEP_ITEMS } from "./constants";
 import {
   needsCalendarReauth,
   toDeadlineIso,
@@ -39,12 +45,6 @@ import {
   toWorkflowProgress,
   viewIndex,
 } from "./helpers";
-import {
-  AuthStep,
-  ComposeStep,
-  ResultStep,
-  RunningStep,
-} from "./components/task-decomp-steps";
 import type {
   ResultTab,
   RunPhase,
@@ -192,7 +192,9 @@ export default function TaskDecompPage() {
 
         if (response.record?.status === "failed") {
           setPhase("failed");
-          setErrorMessage(response.record.errorMessage ?? "Workflow が失敗しました。");
+          setErrorMessage(
+            response.record.errorMessage ?? "Workflow が失敗しました。",
+          );
           void refreshHistory();
           return;
         }
@@ -306,7 +308,9 @@ export default function TaskDecompPage() {
         setPhase("completed");
       } else if (response.record?.status === "failed") {
         setPhase("failed");
-        setErrorMessage(response.record.errorMessage ?? "Workflow が失敗しました。");
+        setErrorMessage(
+          response.record.errorMessage ?? "Workflow が失敗しました。",
+        );
       } else {
         setPhase("waiting");
       }
@@ -493,9 +497,14 @@ export default function TaskDecompPage() {
               <HStack gap={2}>
                 <Avatar.Root size="xs">
                   {signedInUser?.image ? (
-                    <Avatar.Image src={signedInUser.image} alt={signedInUser.name} />
+                    <Avatar.Image
+                      src={signedInUser.image}
+                      alt={signedInUser.name}
+                    />
                   ) : null}
-                  <Avatar.Fallback>{toInitials(signedInUser?.name)}</Avatar.Fallback>
+                  <Avatar.Fallback>
+                    {toInitials(signedInUser?.name)}
+                  </Avatar.Fallback>
                 </Avatar.Root>
                 <Text fontSize="sm" color="fg.muted">
                   {signedInUser?.email ?? "未ログイン"}
diff --git a/frontend/src/app/task-decomp/types.ts b/frontend/src/app/task-decomp/types.ts
index 2556800..385182c 100644
--- a/frontend/src/app/task-decomp/types.ts
+++ b/frontend/src/app/task-decomp/types.ts
@@ -1,5 +1,10 @@
 export type RunPhase = "idle" | "starting" | "waiting" | "completed" | "failed";
-export type ErrorAction = "start" | "status" | "history" | "session" | "signOut";
+export type ErrorAction =
+  | "start"
+  | "status"
+  | "history"
+  | "session"
+  | "signOut";
 export type ViewMode = "auth" | "compose" | "running" | "result";
 export type TransitionDirection = "forward" | "backward";
 export type ResultTab = "result" | "history";

From 0ce78e1b7c41744477cf4fe57696634ba02b8a54 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 05:54:03 +0900
Subject: [PATCH 04/16] remove duplicated route buttons from landing

---
 frontend/src/app/page.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3a66623..f94eff5 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -135,18 +135,6 @@ export default function HomePage() {
               </Card.Root>
             ))}
           </Grid>
-
-          <HStack gap={4} flexWrap="wrap">
-            <Button asChild variant="outline" colorPalette="teal">
-              <NextLink href="/task-decomp">設計モードへ</NextLink>
-            </Button>
-            <Button asChild variant="outline" colorPalette="blue">
-              <NextLink href="/dashboard">運用モードへ</NextLink>
-            </Button>
-            <Text fontSize="sm" color="fg.muted">
-              詳細な背景はリポジトリの README に整理しています。
-            </Text>
-          </HStack>
         </Stack>
       </Container>
     </Box>

From 8cf332a630c88b932d7bb0febd6e62b3e33afd02 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 05:56:30 +0900
Subject: [PATCH 05/16] simplify task-decomp mobile UI and remove redundant
 cards

---
 .../components/task-decomp-steps.tsx          | 224 ++++++++----------
 frontend/src/app/task-decomp/page.tsx         |  41 +---
 2 files changed, 103 insertions(+), 162 deletions(-)

diff --git a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index 796bc9f..05c7d72 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -2,8 +2,8 @@
 
 import {
   Badge,
+  Box,
   Button,
-  Card,
   Field,
   Heading,
   HStack,
@@ -46,8 +46,6 @@ type ComposeStepProps = {
   isReauthRunning: boolean;
   phase: RunPhase;
   isSessionLoading: boolean;
-  history: WorkflowRecord[];
-  onSelectHistory: (item: WorkflowRecord) => void;
 };
 
 type RunningStepProps = {
@@ -101,8 +99,6 @@ export function ComposeStep({
   isReauthRunning,
   phase,
   isSessionLoading,
-  history,
-  onSelectHistory,
 }: ComposeStepProps) {
   return (
     <Stack gap={5}>
@@ -188,40 +184,6 @@ export function ComposeStep({
           </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={() => onSelectHistory(item)}
-                    >
-                      表示
-                    </Button>
-                  </HStack>
-                </List.Item>
-              ))}
-            </List.Root>
-          </Card.Body>
-        </Card.Root>
-      ) : null}
     </Stack>
   );
 }
@@ -322,28 +284,34 @@ export function ResultStep({
 
         <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>
+            <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>
 
-              <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={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">
@@ -359,20 +327,26 @@ export function ResultStep({
                             </Badge>
                           </HStack>
                         </Stack>
-                      </List.Item>
-                    ))}
-                  </List.Root>
-                </Card.Body>
-              </Card.Root>
+                      </Box>
+                    </List.Item>
+                  ))}
+                </List.Root>
+              </Stack>
 
               {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>
+                <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}>
@@ -417,76 +391,64 @@ export function ResultStep({
                         </List.Item>
                       ))}
                     </List.Root>
-                  </Card.Body>
-                </Card.Root>
+                  )}
+                </Stack>
               ) : 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>
+                <Stack gap={2}>
+                  <Text fontWeight="semibold">前提 / メモ</Text>
+                  <List.Root gap={1}>
+                    {breakdown.assumptions.map((item) => (
+                      <List.Item key={item}>{item}</List.Item>
+                    ))}
+                  </List.Root>
+                </Stack>
               ) : null}
             </Stack>
           ) : (
-            <Card.Root variant="outline" bg="var(--app-surface-soft)">
-              <Card.Body>
-                <Text fontSize="sm" color="fg.muted">
-                  結果がありません。失敗した場合は履歴から詳細を確認してください。
+            <Stack gap={2}>
+              <Text fontSize="sm" color="fg.muted">
+                結果がありません。失敗した場合は履歴から詳細を確認してください。
+              </Text>
+              {displayErrorMessage ? (
+                <Text fontSize="sm" color="red.500">
+                  {displayErrorMessage}
                 </Text>
-                {displayErrorMessage ? (
-                  <Text fontSize="sm" color="red.500" mt={2}>
-                    {displayErrorMessage}
-                  </Text>
-                ) : null}
-              </Card.Body>
-            </Card.Root>
+              ) : null}
+            </Stack>
           )}
         </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={() => onSelectHistory(item)}
-                        >
-                          表示
-                        </Button>
-                      </HStack>
-                    </List.Item>
-                  ))}
-                </List.Root>
-              )}
-            </Card.Body>
-          </Card.Root>
+          {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={() => onSelectHistory(item)}
+                    >
+                      表示
+                    </Button>
+                  </HStack>
+                </List.Item>
+              ))}
+            </List.Root>
+          )}
         </Tabs.Content>
       </Tabs.Root>
     </Stack>
diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index 04a3a19..3e7168f 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -417,8 +417,6 @@ export default function TaskDecompPage() {
           isReauthRunning={isReauthRunning}
           phase={phase}
           isSessionLoading={isSessionLoading}
-          history={history}
-          onSelectHistory={handleSelectHistory}
         />
       );
     }
@@ -467,30 +465,19 @@ export default function TaskDecompPage() {
 
       <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">
+            <Heading size={{ base: "xl", md: "2xl" }} lineHeight="1.15">
               タスク細分化ワークフロー
             </Heading>
-            <Text fontSize="lg" color="fg.muted">
-              必要な情報だけに絞った4画面フローで、入力から結果確認まで進めます。
+            <Text fontSize={{ base: "md", md: "lg" }} color="fg.muted">
+              目標を今日の実行に落とし込むためのフローです。
             </Text>
           </Stack>
 
           {viewMode !== "auth" ? (
             <HStack justify="space-between" flexWrap="wrap" gap={3}>
               <Badge colorPalette="teal" variant="subtle">
+                {currentStepIndex + 1} / {STEP_ITEMS.length} :{" "}
                 {STEP_ITEMS[currentStepIndex].label}
               </Badge>
 
@@ -506,7 +493,11 @@ export default function TaskDecompPage() {
                     {toInitials(signedInUser?.name)}
                   </Avatar.Fallback>
                 </Avatar.Root>
-                <Text fontSize="sm" color="fg.muted">
+                <Text
+                  fontSize="sm"
+                  color="fg.muted"
+                  display={{ base: "none", md: "block" }}
+                >
                   {signedInUser?.email ?? "未ログイン"}
                 </Text>
                 <Button
@@ -521,18 +512,6 @@ export default function TaskDecompPage() {
             </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)"
@@ -540,7 +519,7 @@ export default function TaskDecompPage() {
             borderRadius="2xl"
             className={`flow-card flow-card--${transitionDirection}`}
           >
-            <Card.Body>{screenBody}</Card.Body>
+            <Card.Body p={{ base: 4, md: 6 }}>{screenBody}</Card.Body>
           </Card.Root>
         </Stack>
       </Container>

From c044c1bd09e11a18c0143d5eb17e5cf310c05c45 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:07:21 +0900
Subject: [PATCH 06/16] show steps before authentication on task-decomp

---
 frontend/src/app/task-decomp/page.tsx | 48 +++++++++++++++++++++------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index 3e7168f..a5acaf6 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -2,7 +2,6 @@
 
 import {
   Avatar,
-  Badge,
   Box,
   Button,
   Card,
@@ -10,6 +9,7 @@ import {
   Heading,
   HStack,
   Stack,
+  Steps,
   Text,
 } from "@chakra-ui/react";
 import type { FormEvent } from "react";
@@ -474,14 +474,40 @@ export default function TaskDecompPage() {
             </Text>
           </Stack>
 
-          {viewMode !== "auth" ? (
-            <HStack justify="space-between" flexWrap="wrap" gap={3}>
-              <Badge colorPalette="teal" variant="subtle">
-                {currentStepIndex + 1} / {STEP_ITEMS.length} :{" "}
-                {STEP_ITEMS[currentStepIndex].label}
-              </Badge>
-
-              <HStack gap={2}>
+          <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="end" gap={2}>
                 <Avatar.Root size="xs">
                   {signedInUser?.image ? (
                     <Avatar.Image
@@ -509,8 +535,8 @@ export default function TaskDecompPage() {
                   ログアウト
                 </Button>
               </HStack>
-            </HStack>
-          ) : null}
+            ) : null}
+          </Stack>
 
           <Card.Root
             bg="var(--app-surface)"

From d6c37bac106293ab091db7105d816e431707e0b0 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:09:35 +0900
Subject: [PATCH 07/16] add header history drawer for task-decomp workflow

---
 frontend/src/app/task-decomp/page.tsx | 92 +++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index a5acaf6..db203bd 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -6,8 +6,11 @@ import {
   Button,
   Card,
   Container,
+  Drawer,
   Heading,
   HStack,
+  List,
+  Portal,
   Stack,
   Steps,
   Text,
@@ -36,12 +39,15 @@ import {
 } from "./components/task-decomp-steps";
 import { DEFAULT_USER_TIMEZONE, STEP_ITEMS } from "./constants";
 import {
+  formatDateTime,
   needsCalendarReauth,
   toDeadlineIso,
   toDisplayErrorMessage,
   toErrorMessage,
+  toHistoryTitle,
   toInitials,
   toStatusLabel,
+  toStatusLabelFromRecord,
   toWorkflowProgress,
   viewIndex,
 } from "./helpers";
@@ -70,6 +76,7 @@ export default function TaskDecompPage() {
   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 [resultTab, setResultTab] = useState<ResultTab>("result");
@@ -357,6 +364,7 @@ export default function TaskDecompPage() {
     try {
       await signOut();
       setSession(null);
+      setIsHistoryDrawerOpen(false);
       setHistory([]);
       setTask("");
       setContext("");
@@ -393,6 +401,14 @@ export default function TaskDecompPage() {
 
   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") {
@@ -526,6 +542,13 @@ export default function TaskDecompPage() {
                 >
                   {signedInUser?.email ?? "未ログイン"}
                 </Text>
+                <Button
+                  size="xs"
+                  variant="outline"
+                  onClick={handleOpenHistoryDrawer}
+                >
+                  履歴
+                </Button>
                 <Button
                   size="xs"
                   variant="outline"
@@ -538,6 +561,75 @@ export default function TaskDecompPage() {
             ) : 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,
+                                    )}{" "}
+                                    / {toStatusLabelFromRecord(item.status)}
+                                  </Text>
+                                </Stack>
+                                <Button
+                                  size="xs"
+                                  variant="outline"
+                                  onClick={() =>
+                                    handleSelectHistoryFromDrawer(item)
+                                  }
+                                >
+                                  表示
+                                </Button>
+                              </HStack>
+                            </List.Item>
+                          ))}
+                        </List.Root>
+                      )}
+                    </Drawer.Body>
+                    <Drawer.Footer>
+                      <Drawer.CloseTrigger asChild>
+                        <Button variant="outline">閉じる</Button>
+                      </Drawer.CloseTrigger>
+                    </Drawer.Footer>
+                  </Drawer.Content>
+                </Drawer.Positioner>
+              </Portal>
+            </Drawer.Root>
+          ) : null}
+
           <Card.Root
             bg="var(--app-surface)"
             borderColor="var(--app-border)"

From f967d7b9d220ffc1b5962e3b3bc0727a035ffb04 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:24:07 +0900
Subject: [PATCH 08/16] move history entry point to account action row

---
 frontend/src/app/task-decomp/page.tsx | 65 +++++++++++++++------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index db203bd..a27e9eb 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -523,40 +523,49 @@ export default function TaskDecompPage() {
             </Steps.Root>
 
             {viewMode !== "auth" ? (
-              <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>
+              <HStack
+                justify="space-between"
+                align="center"
+                gap={2}
+                flexWrap="wrap"
+              >
                 <Button
                   size="xs"
+                  colorPalette="teal"
                   variant="outline"
                   onClick={handleOpenHistoryDrawer}
                 >
-                  履歴
-                </Button>
-                <Button
-                  size="xs"
-                  variant="outline"
-                  onClick={() => void handleSignOut()}
-                  loading={isSignOutRunning}
-                >
-                  ログアウト
+                  履歴 ({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>

From e2cbb1546de4fea53bfaad4ec3702a964439777f Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:24:30 +0900
Subject: [PATCH 09/16] fix history drawer footer close control overlap

---
 frontend/src/app/task-decomp/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index a27e9eb..c67f760 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -629,9 +629,9 @@ export default function TaskDecompPage() {
                       )}
                     </Drawer.Body>
                     <Drawer.Footer>
-                      <Drawer.CloseTrigger asChild>
+                      <Drawer.ActionTrigger asChild>
                         <Button variant="outline">閉じる</Button>
-                      </Drawer.CloseTrigger>
+                      </Drawer.ActionTrigger>
                     </Drawer.Footer>
                   </Drawer.Content>
                 </Drawer.Positioner>

From 7b0a7c0d1718519011c77c30070373d171029e59 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:47:53 +0900
Subject: [PATCH 10/16] refine task-decomp status UI and use summary title for
 calendar events

---
 .../task-decompose/task-calendar.service.ts   |  23 +-
 .../components/task-decomp-steps.tsx          | 374 +++++++++---------
 frontend/src/app/task-decomp/helpers.ts       |  10 +-
 frontend/src/app/task-decomp/page.tsx         |  14 +-
 frontend/src/app/task-decomp/types.ts         |   1 -
 5 files changed, 210 insertions(+), 212 deletions(-)

diff --git a/backend/src/features/task-decompose/task-calendar.service.ts b/backend/src/features/task-decompose/task-calendar.service.ts
index e4f5d81..9518a08 100644
--- a/backend/src/features/task-decompose/task-calendar.service.ts
+++ b/backend/src/features/task-decompose/task-calendar.service.ts
@@ -51,6 +51,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())) {
@@ -281,6 +298,10 @@ export async function createCalendarEvents(
   const accessToken = await getGoogleAccessToken(env, input.userId);
   const timezone = input.request.timezone ?? "UTC";
   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 +317,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/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index 05c7d72..a4302a3 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -11,7 +11,6 @@ import {
   List,
   ProgressCircle,
   Stack,
-  Tabs,
   Text,
   Textarea,
 } from "@chakra-ui/react";
@@ -19,12 +18,8 @@ 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,
-  toHistoryTitle,
-  toStatusLabelFromRecord,
-} from "../helpers";
-import type { ResultTab, RunPhase } from "../types";
+import { formatDateTime } from "../helpers";
+import type { RunPhase } from "../types";
 
 type AuthStepProps = {
   onSessionChanged: (nextSession: SessionResponse) => void;
@@ -62,15 +57,72 @@ type RunningStepProps = {
 type ResultStepProps = {
   phase: RunPhase;
   statusLabel: string;
-  resultTab: ResultTab;
-  onResultTabChange: (tab: ResultTab) => void;
   record: WorkflowRecord | null;
-  history: WorkflowRecord[];
   displayErrorMessage: string | null;
   onStartNewTask: () => void;
-  onSelectHistory: (item: WorkflowRecord) => void;
 };
 
+type StatusCardProps = {
+  phase: RunPhase;
+  statusLabel: string;
+};
+
+function toStatusCardTone(phase: RunPhase): {
+  caption: string;
+  dotColor: string;
+} {
+  if (phase === "failed") {
+    return {
+      caption: "実行エラー",
+      dotColor: "red.400",
+    };
+  }
+
+  if (phase === "completed") {
+    return {
+      caption: "実行完了",
+      dotColor: "green.400",
+    };
+  }
+
+  if (phase === "starting" || phase === "waiting") {
+    return {
+      caption: "実行中",
+      dotColor: "teal.400",
+    };
+  }
+
+  return {
+    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}
+    >
+      <HStack gap={1.5}>
+        <Box w={2} h={2} borderRadius="full" bg={tone.dotColor} />
+        <Text fontSize="xs" color="fg.muted">
+          {tone.caption}
+        </Text>
+      </HStack>
+    </Box>
+  );
+}
+
 export function AuthStep({ onSessionChanged }: AuthStepProps) {
   return (
     <Stack gap={5}>
@@ -219,9 +271,7 @@ export function RunningStep({
         </Text>
       </Stack>
 
-      <Badge colorPalette={phase === "failed" ? "red" : "teal"}>
-        {statusLabel}
-      </Badge>
+      <StatusCard phase={phase} statusLabel={statusLabel} />
 
       {displayErrorMessage ? (
         <Text fontSize="sm" color="red.500">
@@ -247,210 +297,150 @@ export function RunningStep({
 export function ResultStep({
   phase,
   statusLabel,
-  resultTab,
-  onResultTabChange,
   record,
-  history,
   displayErrorMessage,
   onStartNewTask,
-  onSelectHistory,
 }: ResultStepProps) {
   const breakdown = record?.llmOutput;
   const calendarResult = record?.calendarOutput;
 
   return (
     <Stack gap={5}>
-      <HStack justify="space-between" flexWrap="wrap" gap={3}>
-        <Badge colorPalette={phase === "failed" ? "red" : "green"}>
-          {statusLabel}
-        </Badge>
+      <HStack justify="space-between" align="start" flexWrap="wrap" gap={3}>
+        <StatusCard phase={phase} statusLabel={statusLabel} />
         <Button variant="outline" onClick={onStartNewTask}>
           新しいタスクを入力
         </Button>
       </HStack>
 
-      <Tabs.Root
-        value={resultTab}
-        onValueChange={(details) => {
-          if (details.value === "result" || details.value === "history") {
-            onResultTabChange(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={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}
-                >
-                  要約
+      {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, record?.timezone)}
+                        </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>
-                <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}>
+              ) : (
+                <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">{subtask.title}</Text>
+                          <Text fontWeight="medium">{eventItem.summary}</Text>
                           <Text fontSize="sm" color="fg.muted">
-                            {subtask.description}
+                            {formatDateTime(
+                              eventItem.startAt,
+                              calendarResult.timezone,
+                            )}{" "}
+                            -{" "}
+                            {formatDateTime(
+                              eventItem.endAt,
+                              calendarResult.timezone,
+                            )}
                           </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>
-                      </Box>
+                        {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>
-
-              {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,
-                                )}{" "}
-                                -{" "}
-                                {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>
-                  )}
-                </Stack>
-              ) : null}
-
-              {breakdown.assumptions.length > 0 ? (
-                <Stack gap={2}>
-                  <Text fontWeight="semibold">前提 / メモ</Text>
-                  <List.Root gap={1}>
-                    {breakdown.assumptions.map((item) => (
-                      <List.Item key={item}>{item}</List.Item>
-                    ))}
-                  </List.Root>
-                </Stack>
-              ) : null}
+              )}
             </Stack>
-          ) : (
+          ) : null}
+
+          {breakdown.assumptions.length > 0 ? (
             <Stack gap={2}>
-              <Text fontSize="sm" color="fg.muted">
-                結果がありません。失敗した場合は履歴から詳細を確認してください。
-              </Text>
-              {displayErrorMessage ? (
-                <Text fontSize="sm" color="red.500">
-                  {displayErrorMessage}
-                </Text>
-              ) : null}
+              <Text fontWeight="semibold">前提 / メモ</Text>
+              <List.Root gap={1}>
+                {breakdown.assumptions.map((item) => (
+                  <List.Item key={item}>{item}</List.Item>
+                ))}
+              </List.Root>
             </Stack>
-          )}
-        </Tabs.Content>
-
-        <Tabs.Content value="history" pt={4}>
-          {history.length === 0 ? (
-            <Text fontSize="sm" color="fg.muted">
-              まだ履歴はありません。
+          ) : null}
+        </Stack>
+      ) : (
+        <Stack gap={2}>
+          <Text fontSize="sm" color="fg.muted">
+            結果がありません。失敗した場合は履歴から詳細を確認してください。
+          </Text>
+          {displayErrorMessage ? (
+            <Text fontSize="sm" color="red.500">
+              {displayErrorMessage}
             </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={() => onSelectHistory(item)}
-                    >
-                      表示
-                    </Button>
-                  </HStack>
-                </List.Item>
-              ))}
-            </List.Root>
-          )}
-        </Tabs.Content>
-      </Tabs.Root>
+          ) : null}
+        </Stack>
+      )}
     </Stack>
   );
 }
diff --git a/frontend/src/app/task-decomp/helpers.ts b/frontend/src/app/task-decomp/helpers.ts
index d784a1f..eaeebab 100644
--- a/frontend/src/app/task-decomp/helpers.ts
+++ b/frontend/src/app/task-decomp/helpers.ts
@@ -153,16 +153,16 @@ export function toStatusLabelFromRecord(
 }
 
 export 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;
   }
 
+  const goal = record.llmOutput?.goal?.trim();
+  if (goal && goal.length > 0) {
+    return goal;
+  }
+
   return record.taskInput;
 }
 
diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index c67f760..350f1af 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -51,12 +51,7 @@ import {
   toWorkflowProgress,
   viewIndex,
 } from "./helpers";
-import type {
-  ResultTab,
-  RunPhase,
-  TransitionDirection,
-  ViewMode,
-} from "./types";
+import type { RunPhase, TransitionDirection, ViewMode } from "./types";
 
 export default function TaskDecompPage() {
   const [session, setSession] = useState<SessionResponse>(null);
@@ -79,7 +74,6 @@ export default function TaskDecompPage() {
   const [isHistoryDrawerOpen, setIsHistoryDrawerOpen] = useState(false);
   const [dotTick, setDotTick] = useState(0);
 
-  const [resultTab, setResultTab] = useState<ResultTab>("result");
   const [viewMode, setViewMode] = useState<ViewMode>("auth");
   const [transitionDirection, setTransitionDirection] =
     useState<TransitionDirection>("forward");
@@ -334,7 +328,6 @@ export default function TaskDecompPage() {
     setRecord(item);
     setWorkflowStatus(null);
     setErrorMessage(null);
-    setResultTab("result");
 
     if (item.status === "completed") {
       setPhase("completed");
@@ -356,7 +349,6 @@ export default function TaskDecompPage() {
     setWorkflowStatus(null);
     setRecord(null);
     setErrorMessage(null);
-    setResultTab("result");
   };
 
   const handleSignOut = async () => {
@@ -456,13 +448,9 @@ export default function TaskDecompPage() {
       <ResultStep
         phase={phase}
         statusLabel={statusLabel}
-        resultTab={resultTab}
-        onResultTabChange={setResultTab}
         record={record}
-        history={history}
         displayErrorMessage={displayErrorMessage}
         onStartNewTask={handleStartNewTask}
-        onSelectHistory={handleSelectHistory}
       />
     );
   })();
diff --git a/frontend/src/app/task-decomp/types.ts b/frontend/src/app/task-decomp/types.ts
index 385182c..a7e9d82 100644
--- a/frontend/src/app/task-decomp/types.ts
+++ b/frontend/src/app/task-decomp/types.ts
@@ -7,4 +7,3 @@ export type ErrorAction =
   | "signOut";
 export type ViewMode = "auth" | "compose" | "running" | "result";
 export type TransitionDirection = "forward" | "backward";
-export type ResultTab = "result" | "history";

From e068564f62ffc0b561145683b39d1208a3100bf0 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:53:30 +0900
Subject: [PATCH 11/16] adjust compose guidance wording for already-authorized
 users

---
 .../components/task-decomp-steps.tsx          | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index a4302a3..2bb549b 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -154,6 +154,35 @@ export function ComposeStep({
 }: 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>

From 54664e45df6a31cf5b7d56109bdd3fb8f7e20e01 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:57:30 +0900
Subject: [PATCH 12/16] add navigation links from task-decomp to top and
 dashboard

---
 frontend/src/app/task-decomp/page.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index 350f1af..fa25931 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -15,6 +15,7 @@ import {
   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 {
@@ -478,6 +479,15 @@ export default function TaskDecompPage() {
             </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}

From 13fbfc375ecf06c953c84c41d6f2c6c56772f2bc Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 06:58:58 +0900
Subject: [PATCH 13/16] add account-scoped draft autosave for task-decomp input

---
 frontend/src/app/task-decomp/page.tsx | 107 +++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index fa25931..06e2bdd 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -4,7 +4,6 @@ import {
   Avatar,
   Box,
   Button,
-  Card,
   Container,
   Drawer,
   Heading,
@@ -54,6 +53,29 @@ import {
 } 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);
@@ -61,7 +83,7 @@ export default function TaskDecompPage() {
   const [task, setTask] = useState("");
   const [context, setContext] = useState("");
   const [deadline, setDeadline] = useState("");
-  const [maxSteps, setMaxSteps] = useState("6");
+  const [maxSteps, setMaxSteps] = useState(DEFAULT_MAX_STEPS);
 
   const [phase, setPhase] = useState<RunPhase>("idle");
   const [workflowId, setWorkflowId] = useState<string | null>(null);
@@ -80,6 +102,7 @@ export default function TaskDecompPage() {
     useState<TransitionDirection>("forward");
 
   const viewModeRef = useRef<ViewMode>("auth");
+  const loadedDraftUserIdRef = useRef<string | null>(null);
 
   const signedInUser = useMemo(() => session?.user ?? null, [session]);
   const statusLabel = useMemo(
@@ -147,6 +170,67 @@ export default function TaskDecompPage() {
     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);
@@ -353,16 +437,21 @@ export default function TaskDecompPage() {
   };
 
   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("6");
+      setMaxSteps(DEFAULT_MAX_STEPS);
       handleStartNewTask();
     } catch (error) {
       setErrorMessage(toErrorMessage(error, "signOut"));
@@ -637,15 +726,9 @@ export default function TaskDecompPage() {
             </Drawer.Root>
           ) : null}
 
-          <Card.Root
-            bg="var(--app-surface)"
-            borderColor="var(--app-border)"
-            borderWidth="1px"
-            borderRadius="2xl"
-            className={`flow-card flow-card--${transitionDirection}`}
-          >
-            <Card.Body p={{ base: 4, md: 6 }}>{screenBody}</Card.Body>
-          </Card.Root>
+          <Box className={`flow-card--${transitionDirection}`}>
+            {screenBody}
+          </Box>
         </Stack>
       </Container>
     </Box>

From df1b69f8ded4b7ce44002da3a68c2c1c611fc8e9 Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 07:10:55 +0900
Subject: [PATCH 14/16] improve task input readability with themed field
 backgrounds

---
 .../src/app/task-decomp/components/task-decomp-steps.tsx  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index 2bb549b..9f5b9b2 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -192,6 +192,8 @@ export function ComposeStep({
               onChange={(event) => onTaskChange(event.target.value)}
               placeholder="例: ハッカソン発表までに、プロトタイプを提出可能な状態にする"
               minH="140px"
+              bg="var(--app-surface-soft)"
+              borderColor="var(--app-border)"
             />
           </Field.Root>
 
@@ -202,6 +204,8 @@ export function ComposeStep({
               onChange={(event) => onContextChange(event.target.value)}
               placeholder="例: 3人チーム、担当はフロント中心、毎日21時以降に作業"
               minH="96px"
+              bg="var(--app-surface-soft)"
+              borderColor="var(--app-border)"
             />
           </Field.Root>
 
@@ -212,6 +216,8 @@ export function ComposeStep({
                 type="datetime-local"
                 value={deadline}
                 onChange={(event) => onDeadlineChange(event.target.value)}
+                bg="var(--app-surface-soft)"
+                borderColor="var(--app-border)"
               />
               <Field.HelperText>
                 未入力でも、本文と文脈から期限を推測して分解します。
@@ -226,6 +232,8 @@ export function ComposeStep({
                 max={12}
                 value={maxSteps}
                 onChange={(event) => onMaxStepsChange(event.target.value)}
+                bg="var(--app-surface-soft)"
+                borderColor="var(--app-border)"
               />
             </Field.Root>
           </HStack>

From 9feaf7ae4d3244f3ec9e6402edabd9c6157b7d4d Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 07:52:00 +0900
Subject: [PATCH 15/16] unify timezone handling across task-decomp flow

---
 .../task-decompose/task-calendar.service.ts   |  3 +-
 .../task-decompose/task-decompose.service.ts  | 12 +----
 .../task-decompose.validation.ts              | 12 ++---
 .../features/task-decompose/task-timezone.ts  | 18 +++++++
 .../components/task-decomp-steps.tsx          | 10 ++--
 frontend/src/app/task-decomp/helpers.ts       | 50 ++++++++++++++++---
 frontend/src/app/task-decomp/page.tsx         | 10 ++--
 7 files changed, 80 insertions(+), 35 deletions(-)
 create mode 100644 backend/src/features/task-decompose/task-timezone.ts

diff --git a/backend/src/features/task-decompose/task-calendar.service.ts b/backend/src/features/task-decompose/task-calendar.service.ts
index 9518a08..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,
@@ -296,7 +297,7 @@ 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,
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.validation.ts b/backend/src/features/task-decompose/task-decompose.validation.ts
index 39a1ef7..bd20d1f 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 { 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 {
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/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index 9f5b9b2..76c02ed 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -58,6 +58,7 @@ type ResultStepProps = {
   phase: RunPhase;
   statusLabel: string;
   record: WorkflowRecord | null;
+  userTimezone: string;
   displayErrorMessage: string | null;
   onStartNewTask: () => void;
 };
@@ -335,11 +336,13 @@ 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}>
@@ -381,8 +384,7 @@ export function ResultStep({
                       </Text>
                       <HStack gap={2} flexWrap="wrap">
                         <Badge colorPalette="blue" variant="subtle">
-                          期限:{" "}
-                          {formatDateTime(subtask.dueAt, record?.timezone)}
+                          期限: {formatDateTime(subtask.dueAt, displayTimezone)}
                         </Badge>
                         <Badge colorPalette="teal" variant="subtle">
                           {subtask.durationMinutes} 分
@@ -418,12 +420,12 @@ export function ResultStep({
                           <Text fontSize="sm" color="fg.muted">
                             {formatDateTime(
                               eventItem.startAt,
-                              calendarResult.timezone,
+                              calendarResult.timezone ?? displayTimezone,
                             )}{" "}
                             -{" "}
                             {formatDateTime(
                               eventItem.endAt,
-                              calendarResult.timezone,
+                              calendarResult.timezone ?? displayTimezone,
                             )}
                           </Text>
                         </Stack>
diff --git a/frontend/src/app/task-decomp/helpers.ts b/frontend/src/app/task-decomp/helpers.ts
index eaeebab..f40ce85 100644
--- a/frontend/src/app/task-decomp/helpers.ts
+++ b/frontend/src/app/task-decomp/helpers.ts
@@ -89,14 +89,48 @@ export function formatDateTime(
     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",
-  });
+  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(
diff --git a/frontend/src/app/task-decomp/page.tsx b/frontend/src/app/task-decomp/page.tsx
index 06e2bdd..5bb61c7 100644
--- a/frontend/src/app/task-decomp/page.tsx
+++ b/frontend/src/app/task-decomp/page.tsx
@@ -37,8 +37,9 @@ import {
   ResultStep,
   RunningStep,
 } from "./components/task-decomp-steps";
-import { DEFAULT_USER_TIMEZONE, STEP_ITEMS } from "./constants";
+import { STEP_ITEMS } from "./constants";
 import {
+  detectBrowserTimezone,
   formatDateTime,
   needsCalendarReauth,
   toDeadlineIso,
@@ -105,6 +106,7 @@ export default function TaskDecompPage() {
   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],
@@ -371,8 +373,7 @@ export default function TaskDecompPage() {
     const safeMaxSteps = Number.isFinite(parsedMaxSteps)
       ? Math.min(Math.max(Math.trunc(parsedMaxSteps), 1), 12)
       : 6;
-    const timezone =
-      Intl.DateTimeFormat().resolvedOptions().timeZone ?? DEFAULT_USER_TIMEZONE;
+    const timezone = userTimezone;
 
     setPhase("starting");
     setErrorMessage(null);
@@ -539,6 +540,7 @@ export default function TaskDecompPage() {
         phase={phase}
         statusLabel={statusLabel}
         record={record}
+        userTimezone={userTimezone}
         displayErrorMessage={displayErrorMessage}
         onStartNewTask={handleStartNewTask}
       />
@@ -695,7 +697,7 @@ export default function TaskDecompPage() {
                                   <Text fontSize="xs" color="fg.muted">
                                     {formatDateTime(
                                       item.createdAt,
-                                      item.timezone,
+                                      item.timezone ?? userTimezone,
                                     )}{" "}
                                     / {toStatusLabelFromRecord(item.status)}
                                   </Text>

From 8cb1e1aa30d1e877ed4d57219ef0fd8f9334012d Mon Sep 17 00:00:00 2001
From: nenrin <nenrin.yearring@gmail.com>
Date: Sun, 22 Feb 2026 10:29:22 +0900
Subject: [PATCH 16/16] address PR feedback on task-decomp review comments

---
 .../task-decompose/task-decompose.types.ts    |  7 ++++++
 .../task-decompose.validation.ts              |  6 +++--
 .../components/task-decomp-steps.tsx          | 23 ++++++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

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 bd20d1f..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,4 @@
-import type { TaskDecomposeRequest } from "./task-decompose.types";
+import type { ValidatedTaskDecomposeRequest } from "./task-decompose.types";
 import { normalizeTaskTimezone } from "./task-timezone";
 
 const MAX_STEPS_LIMIT = 12;
@@ -42,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/frontend/src/app/task-decomp/components/task-decomp-steps.tsx b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
index 76c02ed..7a34952 100644
--- a/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
+++ b/frontend/src/app/task-decomp/components/task-decomp-steps.tsx
@@ -69,11 +69,13 @@ type StatusCardProps = {
 };
 
 function toStatusCardTone(phase: RunPhase): {
+  symbol: string;
   caption: string;
   dotColor: string;
 } {
   if (phase === "failed") {
     return {
+      symbol: "!",
       caption: "実行エラー",
       dotColor: "red.400",
     };
@@ -81,19 +83,30 @@ function toStatusCardTone(phase: RunPhase): {
 
   if (phase === "completed") {
     return {
+      symbol: "✓",
       caption: "実行完了",
       dotColor: "green.400",
     };
   }
 
-  if (phase === "starting" || phase === "waiting") {
+  if (phase === "starting") {
     return {
+      symbol: "◔",
+      caption: "開始中",
+      dotColor: "teal.400",
+    };
+  }
+
+  if (phase === "waiting") {
+    return {
+      symbol: "◕",
       caption: "実行中",
       dotColor: "teal.400",
     };
   }
 
   return {
+    symbol: "•",
     caption: "待機中",
     dotColor: "gray.400",
   };
@@ -113,9 +126,13 @@ function StatusCard({ phase, statusLabel }: StatusCardProps) {
       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>
@@ -461,8 +478,8 @@ export function ResultStep({
             <Stack gap={2}>
               <Text fontWeight="semibold">前提 / メモ</Text>
               <List.Root gap={1}>
-                {breakdown.assumptions.map((item) => (
-                  <List.Item key={item}>{item}</List.Item>
+                {breakdown.assumptions.map((item, index) => (
+                  <List.Item key={`${index}-${item}`}>{item}</List.Item>
                 ))}
               </List.Root>
             </Stack>