@tomako/tools-runtime 0.1.0

package/src/features/tools/startup-idea-research/widget/result-shell.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import {
+    BarChart3,
+    Copy,
+    Download,
+    Loader2,
+    RefreshCw,
+    Search,
+    Sparkles,
+    ThumbsDown,
+    Users,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    type StartupIdeaResearchResult,
+    type StartupIdeaSignalStrength
+} from "../../../../lib/tools/startup-idea-research-schema";
+import { cn } from "@tomako/ui/cn";
+import {
+    fetchImageGenerationResult,
+    submitImageGenerationTask,
+} from "../../../../host/client";
+
+import { SIGNAL_STYLE } from "./constants";
+import type { PosterState, T } from "./types";
+
+export function SignalBadge({
+  value,
+  label,
+  t,
+}: {
+  value: StartupIdeaSignalStrength;
+  label: string;
+  t: T;
+}) {
+  return (
+    <span className={cn("rounded-full border px-3 py-1 text-xs font-semibold", SIGNAL_STYLE[value])}>
+      {label}: {t(`signals.${value}`)}
+    </span>
+  );
+}
+
+export function Report({
+  data,
+  taskId,
+  t,
+  onReset,
+}: {
+  data: StartupIdeaResearchResult;
+  taskId: string;
+  t: T;
+  onReset: () => void;
+}) {
+  const [postTitle, setPostTitle] = useState(data.communityPost.title);
+  const [postBody, setPostBody] = useState(data.communityPost.body);
+  const [posterPrompt, setPosterPrompt] = useState(data.communityPost.posterPrompt);
+  const [posterState, setPosterState] = useState<PosterState>({ phase: "idle" });
+  const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "failed">("idle");
+
+  function recruitmentText() {
+    return `${postTitle.trim()}\n\n${postBody.trim()}`.trim();
+  }
+
+  async function copyRecruitmentText() {
+    try {
+      await navigator.clipboard.writeText(recruitmentText());
+      setCopyStatus("copied");
+    } catch {
+      setCopyStatus("failed");
+    }
+  }
+
+  function downloadRecruitmentText() {
+    const blob = new Blob([recruitmentText()], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = "startup-recruitment-draft.txt";
+    anchor.click();
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+
+  async function generatePoster() {
+    const prompt = posterPrompt.trim();
+    if (!prompt) {
+      setPosterState({ phase: "error", message: t("share.posterPromptRequired") });
+      return;
+    }
+    setPosterState({ phase: "submitting" });
+    try {
+      const submitted = await submitImageGenerationTask({
+        parentTaskId: taskId,
+        prompt,
+        model: "gpt-image-2",
+        size: "1024x1024",
+      });
+      const imageTaskId = submitted.imageTaskId;
+      setPosterState({ phase: "polling", imageTaskId });
+      const deadline = Date.now() + 300_000;
+      while (Date.now() < deadline) {
+        const status = await fetchImageGenerationResult(imageTaskId);
+        if (status.status === "SUCCEEDED" && status.imageUrl) {
+          setPosterState({ phase: "done", imageTaskId, imageUrl: status.imageUrl });
+          return;
+        }
+        if (status.status === "FAILED") {
+          setPosterState({
+            phase: "error",
+            message: status.errorMessage || t("share.posterFailed"),
+          });
+          return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 5000));
+      }
+      setPosterState({ phase: "error", message: t("share.posterTimeout") });
+    } catch {
+      setPosterState({ phase: "error", message: t("share.posterFailed") });
+    }
+  }
+
+  return (
+    <div className="grid gap-5">
+      <article className="rounded-[1.35rem] border border-[#D7E3FB] bg-[#F8FBFF] p-5">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h2 className="text-2xl font-semibold text-[#111111]">{data.ideaTitle}</h2>
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-[#4A5564]">{data.oneLineSummary}</p>
+          </div>
+          <Button variant="outline" onClick={onReset}>
+            <RefreshCw className="size-4" aria-hidden />
+            {t("analyzeAnother")}
+          </Button>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          <SignalBadge value={data.verdict.painExists} label={t("verdict.pain")} t={t} />
+          <SignalBadge value={data.verdict.willingnessToPay} label={t("verdict.pay")} t={t} />
+          <SignalBadge value={data.verdict.marketReadiness} label={t("verdict.market")} t={t} />
+        </div>
+        <p className="mt-4 text-sm leading-6 text-[#3D3D3D]">{data.verdict.summary}</p>
+      </article>
+
+      <div className="grid gap-4 xl:grid-cols-3">
+        <InsightCard icon={<Sparkles />} title={t("sections.pain")} items={data.painEvidence.realPainSignals} empty={t("emptyList")} />
+        <InsightCard icon={<Users />} title={t("sections.users")} items={data.userSegments.map((segment) => `${segment.name}: ${segment.description}`)} empty={t("emptyList")} />
+        <InsightCard icon={<BarChart3 />} title={t("sections.pay")} items={[...data.willingnessToPay.likelyPayers, ...data.willingnessToPay.pricingHypotheses].slice(0, 6)} empty={t("emptyList")} />
+      </div>
+
+      <section className="rounded-[1.35rem] border border-[#E2E6EC] bg-white p-5">
+        <h3 className="text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">
+          {t("sections.competitors")}
+        </h3>
+        <div className="mt-4 grid gap-3">
+          {data.competitors.length ? (
+            data.competitors.map((item) => (
+              <article key={`${item.name}-${item.url ?? ""}`} className="rounded-xl border border-[#EEF1F5] bg-[#FAFBFC] p-4">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <p className="font-semibold text-[#111111]">{item.name}</p>
+                  {item.url ? (
+                    <a className="text-xs font-semibold text-[#075DF5] hover:underline" href={item.url} target="_blank" rel="noreferrer nofollow">
+                      {t("visit")}
+                    </a>
+                  ) : null}
+                </div>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">{item.positioning}</p>
+                {item.gap ? <p className="mt-2 text-sm font-medium text-[#111111]">{item.gap}</p> : null}
+              </article>
+            ))
+          ) : (
+            <p className="text-sm text-[#777777]">{t("emptyList")}</p>
+          )}
+        </div>
+      </section>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <InsightCard icon={<Search />} title={t("sections.validation")} items={data.validationPlan.map((item) => `${item.title}: ${item.method} (${item.successMetric})`)} empty={t("emptyList")} />
+        <InsightCard icon={<ThumbsDown />} title={t("sections.risks")} items={[...data.risks, ...data.painEvidence.missingEvidence].slice(0, 8)} empty={t("emptyList")} />
+      </div>
+
+      <section className="rounded-[1.35rem] border border-[#E2E6EC] bg-white p-5">
+        <h3 className="text-lg font-semibold text-[#111111]">{t("share.title")}</h3>
+        <p className="mt-2 text-sm leading-6 text-[#555555]">{t("share.hint")}</p>
+        <div className="mt-5 grid gap-5">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Field label={t("share.postTitle")}>
+              <Input
+                value={postTitle}
+                onChange={(event) => {
+                  setPostTitle(event.target.value);
+                  setCopyStatus("idle");
+                }}
+              />
+            </Field>
+            <Field label={t("share.posterPrompt")}>
+              <Textarea rows={4} value={posterPrompt} onChange={(event) => setPosterPrompt(event.target.value)} />
+            </Field>
+          </div>
+          <Field label={t("share.body")}>
+            <Textarea
+              rows={6}
+              value={postBody}
+              onChange={(event) => {
+                setPostBody(event.target.value);
+                setCopyStatus("idle");
+              }}
+            />
+          </Field>
+          <article className="rounded-[1.25rem] border border-[#E2E6EC] bg-[#FAFBFC] p-5">
+            <h4 className="text-xl font-semibold text-[#111111]">{postTitle}</h4>
+            <p className="mt-3 whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">{postBody}</p>
+            <div className="mt-4 flex flex-wrap gap-3">
+              <Button variant="outline" onClick={() => void copyRecruitmentText()}>
+                <Copy className="size-4" aria-hidden />
+                {copyStatus === "copied" ? t("share.copied") : t("share.copy")}
+              </Button>
+              <Button variant="outline" onClick={downloadRecruitmentText}>
+                <Download className="size-4" aria-hidden />
+                {t("share.downloadText")}
+              </Button>
+            </div>
+            {copyStatus === "failed" ? (
+              <p className="mt-3 text-xs font-medium text-[#B91C1C]">{t("share.copyFailed")}</p>
+            ) : null}
+          </article>
+          <div className="rounded-xl border border-dashed border-[#C8CED6] bg-[#FAFBFC] p-4">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <p className="text-sm font-semibold text-[#111111]">{t("share.posterStatus")}</p>
+                <p className="mt-1 text-xs leading-5 text-[#777777]">
+                  {t("share.posterStatusHint")}
+                </p>
+              </div>
+              <Button
+                variant="outline"
+                onClick={() => void generatePoster()}
+                disabled={posterState.phase === "submitting" || posterState.phase === "polling"}
+              >
+                {posterState.phase === "submitting" || posterState.phase === "polling" ? (
+                  <Loader2 className="size-4 animate-spin" aria-hidden />
+                ) : null}
+                {t("share.generatePoster")}
+              </Button>
+            </div>
+            {posterState.phase === "polling" ? (
+              <p className="mt-3 text-xs leading-5 text-[#777777]">
+                {t("share.posterPolling")}
+              </p>
+            ) : null}
+            {posterState.phase === "done" ? (
+              <div className="mt-4 grid justify-items-start gap-3">
+                {/* The poster URL is produced dynamically by the backend image task. */}
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={posterState.imageUrl}
+                  alt={postTitle}
+                  className="aspect-square w-full max-w-sm rounded-xl border border-[#E2E6EC] object-cover"
+                />
+                <Button asChild variant="outline">
+                  <a
+                    href={posterState.imageUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    download="startup-recruitment-poster.png"
+                  >
+                    <Download className="size-4" aria-hidden />
+                    {t("share.openPoster")}
+                  </a>
+                </Button>
+              </div>
+            ) : null}
+            {posterState.phase === "error" ? (
+              <p className="mt-3 text-xs font-medium text-[#B91C1C]">{posterState.message}</p>
+            ) : null}
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-[1.35rem] border border-[#E2E6EC] bg-white p-5">
+        <h3 className="text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">{t("sections.sources")}</h3>
+        <div className="mt-4 grid gap-2">
+          {data.sources.length ? data.sources.map((source) => (
+            <a key={`${source.label}-${source.url ?? ""}`} href={source.url} target="_blank" rel="noreferrer nofollow" className="text-sm font-medium text-[#075DF5] hover:underline">
+              {source.label}
+            </a>
+          )) : <p className="text-sm text-[#777777]">{t("emptyList")}</p>}
+        </div>
+        <p className="mt-4 text-xs leading-5 text-[#777777]">{data.disclaimer || t("disclaimerFallback")}</p>
+      </section>
+    </div>
+  );
+}
+
+export function InsightCard({
+  icon,
+  title,
+  items,
+  empty,
+}: {
+  icon: ReactNode;
+  title: string;
+  items: readonly string[];
+  empty: string;
+}) {
+  return (
+    <section className="rounded-[1.35rem] border border-[#E2E6EC] bg-white p-5">
+      <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">
+        <span className="text-[#111111] [&_svg]:size-4">{icon}</span>
+        {title}
+      </h3>
+      <ul className="mt-4 grid gap-3">
+        {items.length ? items.slice(0, 7).map((item) => (
+          <li key={item} className="text-sm leading-6 text-[#3D3D3D]">
+            {item}
+          </li>
+        )) : <li className="text-sm text-[#777777]">{empty}</li>}
+      </ul>
+    </section>
+  );
+}

package/src/features/tools/startup-idea-research/widget/startup-idea-research.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import {
+    Loader2
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import { NativeSelect, NativeSelectOption } from "@tomako/ui/native-select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    startupIdeaResearchInputSchema,
+    type StartupIdeaResearchResult
+} from "../../../../lib/tools/startup-idea-research-schema";
+import {
+    fetchStartupIdeaResearchResult,
+    fetchStartupIdeaResearchTask,
+    submitStartupIdeaResearch,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { GRACE_WINDOW_MS, RESULT_RETRY_INTERVAL_MS, RESULT_RETRY_WINDOW_MS } from "./constants";
+import { EmptyPanel, ErrorPanel, RunningPanel } from "./preview-panels";
+import { Report } from "./result-shell";
+import type { ErrorCategory, Stage, WidgetState } from "./types";
+
+export function StartupIdeaResearch() {
+  const t = useTranslations("toolsPages.startupIdeaResearch.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [idea, setIdea] = useState("");
+  const [targetUsers, setTargetUsers] = useState("");
+  const [region, setRegion] = useState("");
+  const [stage, setStage] = useState<Stage>("raw");
+  const [focus, setFocus] = useState("");
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const cancelledRef = useRef(false);
+  const settledRef = useRef(false);
+  const taskWatch = useLegacyLlmTaskWatch<StartupIdeaResearchResult>();
+
+  function cleanup() {
+    taskWatch.stop();
+  }
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      taskWatch.stop();
+    };
+  }, [taskWatch]);
+
+  function finishDone(data: StartupIdeaResearchResult, taskId: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "done", data, taskId });
+  }
+
+  function finishError(category: ErrorCategory) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "error", category });
+  }
+
+  async function pollOnce(taskId: string) {
+    const result = await fetchStartupIdeaResearchTask(taskId);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+
+    if (result.data) {
+      return { settled: true as const, kind: "success" as const, data: result.data };
+    }
+    if (result.status === "FAILED") {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (result.status === "RESULT_INVALID") {
+      return { settled: true as const, kind: "error" as const, category: "schema" as const };
+    }
+    setState({ phase: "running", status: result.status });
+    return { settled: false as const };
+  }
+
+  async function readResultAfterSignal(
+    taskId: string,
+    deadline = Date.now() + RESULT_RETRY_WINDOW_MS,
+  ) {
+    const result = await fetchStartupIdeaResearchResult(taskId);
+    if (cancelledRef.current || settledRef.current) return;
+    if (result.data) {
+      finishDone(result.data, taskId);
+      return;
+    }
+    if (result.status === "RESULT_INVALID") {
+      finishError("schema");
+      return;
+    }
+    if (Date.now() > deadline) {
+      finishError("timeout");
+      return;
+    }
+    window.setTimeout(() => {
+      void readResultAfterSignal(taskId, deadline);
+    }, RESULT_RETRY_INTERVAL_MS);
+  }
+
+  async function startResearch() {
+    const parsed = startupIdeaResearchInputSchema.safeParse({
+      idea,
+      targetUsers: targetUsers || undefined,
+      region: region || undefined,
+      stage,
+      focus: focus || undefined,
+    });
+    if (!parsed.success) {
+      setFieldError(t("errors.invalid"));
+      setState({ phase: "error", category: "invalid" });
+      return;
+    }
+
+    setFieldError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+    resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    let taskId: string;
+    try {
+      const submitted = await submitStartupIdeaResearch(parsed.data, locale);
+      taskId = submitted.taskId;
+    } catch {
+      finishError("submit");
+      return;
+    }
+
+    if (cancelledRef.current) return;
+    setState({ phase: "running", status: "PENDING" });
+
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status });
+          }
+        },
+        onSuccess: () => {
+          void readResultAfterSignal(taskId);
+        },
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
+      },
+      { graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function reset() {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "idle" });
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const statusLabel =
+    state.phase === "running"
+      ? t.has(`status.${state.status}`)
+        ? t(`status.${state.status}`)
+        : t("status.default")
+      : "";
+
+  return (
+    <div className="grid gap-8 lg:grid-cols-[0.74fr_1.26fr] lg:items-start">
+      <section className="rounded-[1.5rem] border border-[#E2E6EC] bg-white p-5 shadow-[0_14px_38px_rgba(17,17,17,0.05)] md:p-6">
+        <Field label={t("ideaLabel")}>
+          <Textarea
+            rows={6}
+            placeholder={t("ideaPlaceholder")}
+            value={idea}
+            onChange={(event) => setIdea(event.target.value)}
+            disabled={busy}
+            aria-invalid={fieldError ? true : undefined}
+          />
+        </Field>
+        {fieldError ? (
+          <p className="mt-1.5 text-xs font-medium text-[#B91C1C]">{fieldError}</p>
+        ) : null}
+        <div className="mt-4 grid gap-4 sm:grid-cols-2">
+          <Field label={t("targetUsersLabel")}>
+            <Input
+              placeholder={t("targetUsersPlaceholder")}
+              value={targetUsers}
+              onChange={(event) => setTargetUsers(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+          <Field label={t("regionLabel")}>
+            <Input
+              placeholder={t("regionPlaceholder")}
+              value={region}
+              onChange={(event) => setRegion(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+        <div className="mt-4 grid gap-4 sm:grid-cols-2">
+          <Field label={t("stageLabel")}>
+            <NativeSelect
+              className="w-full bg-white"
+              value={stage}
+              onChange={(event) => setStage(event.target.value as Stage)}
+              disabled={busy}
+            >
+              <NativeSelectOption value="raw">{t("stage.raw")}</NativeSelectOption>
+              <NativeSelectOption value="problem">{t("stage.problem")}</NativeSelectOption>
+              <NativeSelectOption value="prototype">{t("stage.prototype")}</NativeSelectOption>
+              <NativeSelectOption value="launched">{t("stage.launched")}</NativeSelectOption>
+              <NativeSelectOption value="pivot">{t("stage.pivot")}</NativeSelectOption>
+            </NativeSelect>
+          </Field>
+          <Field label={t("focusLabel")}>
+            <Input
+              placeholder={t("focusPlaceholder")}
+              value={focus}
+              onChange={(event) => setFocus(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+        <Button className="mt-5 w-full" onClick={() => void startResearch()} disabled={busy}>
+          {busy ? (
+            <>
+              <Loader2 className="size-4 animate-spin" aria-hidden />
+              {state.phase === "submitting" ? t("submitting") : t("running")}
+            </>
+          ) : (
+            t("submit")
+          )}
+        </Button>
+        <p className="mt-3 text-xs leading-5 text-[#777777]">{t("inputHint")}</p>
+      </section>
+
+      <section ref={resultRef} className="min-h-[30rem]">
+        {state.phase === "idle" ? <EmptyPanel title={t("emptyTitle")} hint={t("emptyHint")} /> : null}
+        {busy ? (
+          <RunningPanel
+            title={t("runningTitle")}
+            hint={t("runningHint")}
+            statusLabel={statusLabel}
+          />
+        ) : null}
+        {state.phase === "error" ? (
+          <ErrorPanel
+            message={t(`errors.${state.category}`)}
+            retryLabel={t("retry")}
+            onRetry={() => void startResearch()}
+          />
+        ) : null}
+        {state.phase === "done" ? (
+          <Report data={state.data} taskId={state.taskId} t={t} onReset={reset} />
+        ) : null}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/startup-idea-research/widget/types.ts

@@ -0,0 +1,21 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type { StartupIdeaResearchResult } from "../../../../lib/tools/startup-idea-research-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid";
+export type Stage = "raw" | "problem" | "prototype" | "launched" | "pivot";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string }
+  | { phase: "done"; data: StartupIdeaResearchResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory };
+
+export type PosterState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "polling"; imageTaskId: string }
+  | { phase: "done"; imageTaskId: string; imageUrl: string }
+  | { phase: "error"; message: string };
+
+export type T = ReturnType<typeof useTranslations>;