@tomako/tools-runtime 0.1.0

package/src/features/tools/product-hunt-launch-planner/widget/product-hunt-launch-planner.tsx

@@ -0,0 +1,504 @@
+"use client";
+
+import {
+  ToolErrorPanel,
+  ToolFormShell,
+  copyTextToClipboard,
+  downloadTextFile,
+} from "../../../../components/tools/workspace";
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tomako/ui/select";
+import { useToolHandoff } from "../../../../features/tools/shared/tool-handoff";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+  inferDurableActivityArtifact,
+  publishActivityArtifact,
+} from "../../../../lib/activity-task-handoff";
+import {
+  productHuntAccountStates,
+  productHuntAssetStates,
+  productHuntCommunityStates,
+  productHuntLaunchBriefSchema,
+  productHuntLaunchGoals,
+  productHuntLaunchStages,
+  type ProductHuntAccountState,
+  type ProductHuntAssetState,
+  type ProductHuntCommunityState,
+  type ProductHuntLaunchBrief,
+  type ProductHuntLaunchGoal,
+  type ProductHuntLaunchStage,
+} from "../../../../lib/tools/product-hunt-launch-planner-schema";
+import { stringifyProductHuntLaunchPlan } from "../../../../lib/tools/product-hunt-launch-planner.format";
+import {
+  fetchProductHuntLaunchPlanTask,
+  submitProductHuntLaunchPlan,
+} from "../../../../host/client";
+import { Bot, Check, ClipboardList, Sparkles } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { maxPollAttempts, pollDelayMs } from "./constants";
+import { defaultBrief, delay, hasMeaningfulText } from "./helpers";
+import { PreviewPanel } from "./preview-panel";
+import { PlannerResult } from "./result-shell";
+import type { PlannerState, StatusLabelKey } from "./types";
+
+export function ProductHuntLaunchPlanner() {
+  const locale = useLocale();
+  const taskLocale = locale as AppLocale;
+  const language = locale === "en" ? "en" : "zh";
+  const t = useTranslations("toolsPages.productHuntLaunchPlanner.widget");
+  const resultRef = useRef<HTMLDivElement>(null);
+  const [brief, setBrief] = useState<ProductHuntLaunchBrief>(() =>
+    defaultBrief(language),
+  );
+  const [state, setState] = useState<PlannerState>({ phase: "idle" });
+  const [copied, setCopied] = useState(false);
+  const [copiedAiPrompt, setCopiedAiPrompt] = useState(false);
+  const { brief: activityBrief } = useToolHandoff();
+
+  useEffect(() => {
+    if (!activityBrief || state.phase !== "done") return;
+    publishActivityArtifact(
+      activityBrief,
+      inferDurableActivityArtifact(state.plan, state.taskId),
+    );
+  }, [activityBrief, state]);
+
+  const stageLabels = t.raw("stages") as Record<ProductHuntLaunchStage, string>;
+  const goalLabels = t.raw("goals") as Record<ProductHuntLaunchGoal, string>;
+  const accountLabels = t.raw("accountStates") as Record<ProductHuntAccountState, string>;
+  const communityLabels = t.raw("communityStates") as Record<ProductHuntCommunityState, string>;
+  const assetLabels = t.raw("assetStates") as Record<ProductHuntAssetState, string>;
+  const statusLabels = t.raw("statusLabels") as Record<StatusLabelKey, string>;
+
+  const statusText = useMemo(() => {
+    if (state.phase === "done") return t("status.done");
+    if (state.phase === "submitting") return t("status.submitting");
+    if (state.phase === "running") return t("status.running");
+    if (state.phase === "error") return t("status.error");
+    return t("status.idle");
+  }, [state.phase, t]);
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const aiPromptButtonLabel = copiedAiPrompt
+    ? t("copyAiPromptDoneLabel")
+    : t("copyAiPromptLabel");
+
+  function updateBrief<T extends keyof ProductHuntLaunchBrief>(
+    key: T,
+    value: ProductHuntLaunchBrief[T],
+  ) {
+    setBrief((prev) => ({ ...prev, [key]: value, language }));
+  }
+
+  function validateBrief() {
+    const parsed = productHuntLaunchBriefSchema.safeParse({ ...brief, language });
+    if (!parsed.success) return { ok: false as const, code: "validation" as const };
+    const hasUrl = hasMeaningfulText(parsed.data.productUrl || "", 8);
+    const hasProductContext =
+      hasMeaningfulText(parsed.data.oneLiner, 8) ||
+      hasMeaningfulText(parsed.data.audience, 8);
+    if (hasUrl && hasProductContext) {
+      return { ok: true as const, data: parsed.data };
+    }
+    if (
+      !hasMeaningfulText(parsed.data.oneLiner, 12) ||
+      !hasMeaningfulText(parsed.data.audience, 8)
+    ) {
+      return { ok: false as const, code: "weakInput" as const };
+    }
+    return { ok: true as const, data: parsed.data };
+  }
+
+  async function pollUntilDone(taskId: string) {
+    let sawAwaitingResult = false;
+
+    for (let attempt = 0; attempt < maxPollAttempts; attempt += 1) {
+      const result = await fetchProductHuntLaunchPlanTask(taskId);
+      if (result.data) {
+        setState({ phase: "done", plan: result.data, taskId });
+        return;
+      }
+
+      if (result.status === "FAILED") {
+        setState({
+          phase: "error",
+          code: "taskFailed",
+          detail: result.error,
+          taskId,
+        });
+        return;
+      }
+
+      if (result.status === "RESULT_INVALID") {
+        setState({
+          phase: "error",
+          code:
+            result.error === "wrong_result_type"
+              ? "wrongResultType"
+              : "invalidResultSchema",
+          detail: result.error,
+          taskId,
+        });
+        return;
+      }
+
+      if (result.status === "AWAITING_RESULT") {
+        sawAwaitingResult = true;
+      }
+
+      setState({ phase: "running", taskId, status: result.status });
+      await delay(pollDelayMs);
+    }
+
+    setState({
+      phase: "error",
+      code: sawAwaitingResult ? "resultWritebackMissing" : "resultTimeout",
+      taskId,
+    });
+  }
+
+  async function generatePlan() {
+    if (busy) return;
+
+    const parsed = validateBrief();
+    window.setTimeout(
+      () => resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }),
+      20,
+    );
+
+    if (!parsed.ok) {
+      setState({ phase: "error", code: parsed.code });
+      setCopied(false);
+      return;
+    }
+
+    setCopied(false);
+    setState({ phase: "submitting" });
+
+    try {
+      const { taskId, status } = await submitProductHuntLaunchPlan(parsed.data, taskLocale);
+      setState({ phase: "running", taskId, status });
+      await pollUntilDone(taskId);
+    } catch (error) {
+      setState({
+        phase: "error",
+        code: "submitFailed",
+        detail: error instanceof Error ? error.message : undefined,
+      });
+    }
+  }
+
+  function reset() {
+    setBrief(defaultBrief(language));
+    setState({ phase: "idle" });
+    setCopied(false);
+    setCopiedAiPrompt(false);
+  }
+
+  async function copyPlan() {
+    if (state.phase !== "done") return;
+    const copiedToClipboard = await copyTextToClipboard(
+      stringifyProductHuntLaunchPlan(state.plan),
+    );
+    if (copiedToClipboard) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    }
+  }
+
+  function downloadPlan() {
+    if (state.phase !== "done") return;
+    downloadTextFile({
+      filename: "product-hunt-launch-plan.md",
+      text: stringifyProductHuntLaunchPlan(state.plan),
+    });
+  }
+
+  async function copyExternalAiPrompt() {
+    const prompt = t("externalAiPrompt", {
+      productName: brief.productName || t("emptyValue"),
+      productUrl: brief.productUrl || t("emptyValue"),
+      oneLiner: brief.oneLiner || t("emptyValue"),
+      audience: brief.audience || t("emptyValue"),
+    });
+    await navigator.clipboard.writeText(prompt);
+    setCopiedAiPrompt(true);
+    window.setTimeout(() => setCopiedAiPrompt(false), 1600);
+  }
+
+  return (
+    <div className="grid gap-6">
+      <section className="overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-white shadow-[0_18px_60px_rgba(17,17,17,0.08)]">
+        <div className="grid gap-0 lg:grid-cols-[minmax(0,0.95fr)_minmax(320px,0.65fr)]">
+          <ToolFormShell
+            className="bg-[#F4F5ED]"
+            icon={<ClipboardList aria-hidden className="size-4 text-[#FFB29D]" />}
+            title={t("formTitle")}
+            hint={t("formHint")}
+            onSubmit={(event) => {
+              event.preventDefault();
+              generatePlan();
+            }}
+          >
+            <div className="mb-4 flex justify-end">
+              <Button
+                aria-label={aiPromptButtonLabel}
+                className="size-10 rounded-full border-[#CFC9BC] bg-white p-0 text-[#C54022]"
+                onClick={() => void copyExternalAiPrompt()}
+                title={aiPromptButtonLabel}
+                type="button"
+                variant="outline"
+              >
+                {copiedAiPrompt ? (
+                  <Check aria-hidden className="size-4" />
+                ) : (
+                  <Bot aria-hidden className="size-4" />
+                )}
+              </Button>
+              <span aria-live="polite" className="sr-only">
+                {aiPromptButtonLabel}
+              </span>
+            </div>
+            <div className="grid gap-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <Field label={t("productNameLabel")}>
+                  <Input
+                    className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]"
+                    onChange={(event) => updateBrief("productName", event.target.value)}
+                    placeholder={t("productNamePlaceholder")}
+                    value={brief.productName}
+                  />
+                </Field>
+                <Field label={t("productUrlLabel")}>
+                  <Input
+                    className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]"
+                    onChange={(event) => updateBrief("productUrl", event.target.value)}
+                    placeholder={t("productUrlPlaceholder")}
+                    value={brief.productUrl}
+                  />
+                </Field>
+              </div>
+
+              <Field label={t("oneLinerLabel")}>
+                <Textarea
+                  className="min-h-28 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                  onChange={(event) => updateBrief("oneLiner", event.target.value)}
+                  placeholder={t("oneLinerPlaceholder")}
+                  value={brief.oneLiner}
+                />
+              </Field>
+
+              <Field label={t("audienceLabel")}>
+                <Textarea
+                  className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                  onChange={(event) => updateBrief("audience", event.target.value)}
+                  placeholder={t("audiencePlaceholder")}
+                  value={brief.audience}
+                />
+              </Field>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <Field label={t("stageLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateBrief("stage", value as ProductHuntLaunchStage)
+                    }
+                    value={brief.stage}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {productHuntLaunchStages.map((stage) => (
+                        <SelectItem key={stage} value={stage}>
+                          {stageLabels[stage]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field label={t("goalLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateBrief("goal", value as ProductHuntLaunchGoal)
+                    }
+                    value={brief.goal}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {productHuntLaunchGoals.map((goal) => (
+                        <SelectItem key={goal} value={goal}>
+                          {goalLabels[goal]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+
+              <details className="rounded-2xl border border-[#D8D4CA] bg-white p-4">
+                <summary className="cursor-pointer text-sm font-semibold text-[#111111]">
+                  {t("advancedTitle")}
+                </summary>
+                <div className="mt-4 grid gap-4">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <Field label={t("launchDateLabel")}>
+                      <Input
+                        className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]"
+                        onChange={(event) => updateBrief("launchDate", event.target.value)}
+                        placeholder={t("launchDatePlaceholder")}
+                        value={brief.launchDate}
+                      />
+                    </Field>
+                    <Field label={t("accountLabel")}>
+                      <Select
+                        onValueChange={(value) =>
+                          updateBrief("accountState", value as ProductHuntAccountState)
+                        }
+                        value={brief.accountState}
+                      >
+                        <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {productHuntAccountStates.map((item) => (
+                            <SelectItem key={item} value={item}>
+                              {accountLabels[item]}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  </div>
+
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <Field label={t("communityLabel")}>
+                      <Select
+                        onValueChange={(value) =>
+                          updateBrief("communityState", value as ProductHuntCommunityState)
+                        }
+                        value={brief.communityState}
+                      >
+                        <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {productHuntCommunityStates.map((item) => (
+                            <SelectItem key={item} value={item}>
+                              {communityLabels[item]}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+
+                    <Field label={t("assetLabel")}>
+                      <Select
+                        onValueChange={(value) =>
+                          updateBrief("assetState", value as ProductHuntAssetState)
+                        }
+                        value={brief.assetState}
+                      >
+                        <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {productHuntAssetStates.map((item) => (
+                            <SelectItem key={item} value={item}>
+                              {assetLabels[item]}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  </div>
+                </div>
+              </details>
+
+              <Button
+                className="h-12 w-full rounded-2xl bg-[#111111] px-5 text-[15px] text-white hover:bg-[#2A2A2A]"
+                disabled={busy}
+                type="submit"
+              >
+                {busy ? t("generating") : t("generate")}
+              </Button>
+            </div>
+          </ToolFormShell>
+
+          <PreviewPanel
+            labels={t.raw("previewItems") as readonly string[]}
+            state={state}
+            statusText={statusText}
+          />
+        </div>
+      </section>
+
+      <section ref={resultRef}>
+        {state.phase === "idle" ? null : (
+          <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_60px_rgba(17,17,17,0.08)] md:p-7">
+            {state.phase === "error" ? (
+              <ToolErrorPanel
+                title={t(`errors.${state.code}.title`)}
+                body={t(`errors.${state.code}.body`)}
+                taskId={state.taskId}
+                taskIdLabel={
+                  state.taskId ? t("taskId", { taskId: state.taskId }) : undefined
+                }
+                detail={state.detail}
+              />
+            ) : null}
+
+            {state.phase === "submitting" || state.phase === "running" ? (
+              <div className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-5">
+                <div className="flex items-start gap-3">
+                  <Sparkles
+                    aria-hidden
+                    className="mt-1 size-5 shrink-0 animate-pulse text-[#C54022]"
+                  />
+                  <div>
+                    <h3 className="text-lg font-semibold text-[#111111]">
+                      {t("resultPendingTitle")}
+                    </h3>
+                    <p className="mt-2 text-sm leading-6 text-[#555555]">
+                      {t("resultPendingHint")}
+                    </p>
+                    {state.phase === "running" ? (
+                      <p className="mt-3 text-xs font-semibold text-[#777777]">
+                        {t("taskId", { taskId: state.taskId })}
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {state.phase === "done" ? (
+              <PlannerResult
+                copied={copied}
+                onCopy={() => void copyPlan()}
+                onDownload={downloadPlan}
+                onReset={reset}
+                plan={state.plan}
+                statusLabels={statusLabels}
+                taskId={state.taskId}
+                t={t}
+              />
+            ) : null}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/product-hunt-launch-planner/widget/result-shell.tsx

@@ -0,0 +1,176 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type { ProductHuntLaunchPlan } from "../../../../lib/tools/product-hunt-launch-planner-schema";
+import {
+    AlertTriangle,
+    CheckCircle2,
+    ClipboardList,
+    Flame,
+    ListChecks,
+    Sparkles,
+} from "lucide-react";
+
+import { ToolResultActions, ToolResultHeader } from "../../../../components/tools/workspace";
+import {
+    PillList,
+    ResultBlock,
+    SectionHeading,
+    StatusBadge,
+} from "./preview-panel";
+import type { StatusLabelKey } from "./types";
+
+type T = ReturnType<typeof useTranslations>;
+
+export function PlannerResult({
+  copied,
+  onCopy,
+  onDownload,
+  onReset,
+  plan,
+  statusLabels,
+  taskId,
+  t,
+}: {
+  copied: boolean;
+  onCopy: () => void;
+  onDownload: () => void;
+  onReset: () => void;
+  plan: ProductHuntLaunchPlan;
+  statusLabels: Record<StatusLabelKey, string>;
+  taskId: string;
+  t: T;
+}) {
+  return (
+    <div className="grid gap-5">
+      <ToolResultHeader
+        eyebrow={t("resultReady")}
+        title={`${plan.summary.readinessScore}/100`}
+        body={
+          <>
+            {plan.summary.readinessLabel}
+            <span className="mt-3 block text-xs font-semibold text-[#777777]">
+              {t("taskId", { taskId })}
+            </span>
+          </>
+        }
+        actions={
+          <ToolResultActions
+            copied={copied}
+            copyLabel={t("copy")}
+            copiedLabel={t("copied")}
+            downloadLabel={t("download")}
+            resetLabel={t("reset")}
+            onCopy={onCopy}
+            onDownload={onDownload}
+            onReset={onReset}
+          />
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-[0.75fr_1fr]">
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <SectionHeading icon={AlertTriangle} title={t("primaryRisk")} />
+          <p className="text-sm leading-6 text-[#3D3D3D]">
+            {plan.summary.primaryRisk}
+          </p>
+          <p className="mt-4 rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-4 py-3 text-sm leading-6 text-[#555555]">
+            {plan.summary.recommendedLaunchWindow}
+          </p>
+        </div>
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <SectionHeading icon={ListChecks} title={t("missingInfo")} />
+          <PillList items={plan.missingInfo} />
+        </div>
+      </div>
+
+      <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+        <SectionHeading icon={ClipboardList} title={t("checklist")} />
+        <div className="grid gap-4">
+          {plan.checklist.map((phase) => (
+            <article className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4" key={phase.phase}>
+              <h4 className="text-base font-semibold text-[#111111]">{phase.phase}</h4>
+              <div className="mt-3 grid gap-3">
+                {phase.items.map((item) => (
+                  <div className="rounded-2xl border border-[#E1DDD3] bg-white p-4" key={item.title}>
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <p className="font-semibold text-[#111111]">{item.title}</p>
+                      <StatusBadge labels={statusLabels} status={item.status} />
+                    </div>
+                    <p className="mt-2 text-sm leading-6 text-[#555555]">{item.detail}</p>
+                    <p className="mt-3 text-xs font-semibold uppercase text-[#777777]">
+                      {t("owner", { owner: item.owner })}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+        <SectionHeading icon={Sparkles} title={t("assetPack")} />
+        <div className="grid gap-4 xl:grid-cols-2">
+          <ResultBlock title={t("taglines")}>
+            <PillList items={plan.assetPack.taglineOptions} />
+          </ResultBlock>
+          <ResultBlock title={t("topics")}>
+            <PillList items={plan.assetPack.topics} />
+          </ResultBlock>
+          <ResultBlock title={t("description")}>
+            <p className="text-sm leading-6 text-[#3D3D3D]">
+              {plan.assetPack.shortDescription}
+            </p>
+          </ResultBlock>
+          <ResultBlock title={t("thumbnail")}>
+            <p className="text-sm leading-6 text-[#3D3D3D]">
+              {plan.assetPack.thumbnailBrief}
+            </p>
+          </ResultBlock>
+          <ResultBlock title={t("makerComment")} wide>
+            <p className="whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">
+              {plan.assetPack.makerComment}
+            </p>
+          </ResultBlock>
+          <ResultBlock title={t("gallery")} wide>
+            <PillList items={plan.assetPack.galleryBrief} />
+          </ResultBlock>
+          <ResultBlock title={t("socialPost")} wide>
+            <p className="whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">
+              {plan.assetPack.socialPost}
+            </p>
+          </ResultBlock>
+          <ResultBlock title={t("supporterNote")} wide>
+            <p className="whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">
+              {plan.assetPack.supporterNote}
+            </p>
+          </ResultBlock>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <SectionHeading icon={Flame} title={t("launchDay")} />
+          <div className="grid gap-3">
+            {plan.launchDay.map((item) => (
+              <div className="grid gap-3 rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] p-3 md:grid-cols-[90px_1fr]" key={`${item.time}-${item.action}`}>
+                <span className="text-sm font-semibold text-[#C54022]">{item.time}</span>
+                <div>
+                  <p className="text-sm leading-6 text-[#3D3D3D]">{item.action}</p>
+                  <p className="mt-1 text-xs font-semibold uppercase text-[#777777]">
+                    {t("owner", { owner: item.owner })}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <SectionHeading icon={CheckCircle2} title={t("reviewChecklist")} />
+          <PillList items={plan.reviewChecklist} />
+          <h4 className="mt-6 text-base font-semibold text-[#111111]">{t("risks")}</h4>
+          <PillList items={plan.risks} />
+        </div>
+      </div>
+    </div>
+  );
+}