@tomako/tools-runtime 0.1.0

package/src/features/tools/community-pain-point-extractor/widget/result-shell.tsx

@@ -0,0 +1,478 @@
+"use client";
+
+import {
+    BarChart3,
+    Copy,
+    ExternalLink,
+    FileText,
+    Map,
+    MessageSquareQuote,
+    RefreshCw,
+    Search,
+    Target,
+} from "lucide-react";
+import { useMemo, type ReactNode } from "react";
+
+import { Button } from "@tomako/ui/button";
+import type { CommunityPainPointExtractorResult } from "../../../../lib/tools/community-pain-point-extractor-schema";
+import { cn } from "@tomako/ui/cn";
+
+import {
+    CONFIDENCE_STYLE,
+    FREQUENCY_STYLE,
+    SEVERITY_STYLE,
+} from "./constants";
+import {
+    formatReportForClipboard,
+    getNextReportModule,
+} from "./helpers";
+import { ModuleLoadingCard, OverallProgressCard } from "./progress-panels";
+import type { T } from "./types";
+
+export function Report({
+  data,
+  taskId,
+  t,
+  onReset,
+  isPartial = false,
+  elapsedMs = 0,
+  statusLabel = "",
+}: {
+  data: CommunityPainPointExtractorResult;
+  taskId: string;
+  t: T;
+  onReset: () => void;
+  isPartial?: boolean;
+  elapsedMs?: number;
+  statusLabel?: string;
+}) {
+  const copyText = useMemo(() => formatReportForClipboard(data, t), [data, t]);
+  const paidIntentItems = [
+    ...data.paidIntent.signals.map((item) => ({
+      title: t("paidIntentSignal"),
+      body: item,
+      badge: t(`confidence.${data.paidIntent.confidence}`),
+      badgeClassName: CONFIDENCE_STYLE[data.paidIntent.confidence],
+    })),
+    ...data.paidIntent.objections.map((item) => ({
+      title: t("paidIntentObjection"),
+      body: item,
+    })),
+  ].slice(0, 6);
+  const nextModule = isPartial ? getNextReportModule(data) : null;
+  const hasSummary = !isPartial || data.directionTitle || data.summary || nextModule === "summary";
+  const hasTopInsights =
+    !isPartial ||
+    data.communityMap.length ||
+    paidIntentItems.length ||
+    data.entryFeatures.length ||
+    nextModule === "communities" ||
+    nextModule === "paidIntent" ||
+    nextModule === "entryFeatures";
+  const hasPainClusters = !isPartial || data.painClusters.length || nextModule === "painClusters";
+  const hasLandingOrExperiments =
+    !isPartial ||
+    data.landingPageAngles.length ||
+    data.validationExperiments.length ||
+    nextModule === "landing" ||
+    nextModule === "experiments";
+  const hasSources =
+    !isPartial ||
+    data.sources.length ||
+    data.missingEvidence.length ||
+    data.disclaimer ||
+    nextModule === "sources";
+
+  return (
+    <div className="grid gap-5">
+      {isPartial ? (
+        <OverallProgressCard
+          title={t("partialTitle")}
+          hint={t("partialHint")}
+          statusLabel={statusLabel}
+          progressItems={[]}
+          progressTitle={t("progressTitle")}
+          elapsedMs={elapsedMs}
+          moduleKey={nextModule}
+          t={t}
+        />
+      ) : null}
+      {hasSummary ? (
+        data.directionTitle || data.summary ? (
+          <article className="rounded-[1.25rem] border border-[#D7E3FB] bg-[#F8FBFF] p-5">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#55708A]">
+              {t("taskId")} {taskId || t("partialTaskFallback")}
+            </p>
+            <h2 className="mt-2 text-2xl font-semibold text-[#111111]">
+              {data.directionTitle || t("partialReportTitle")}
+            </h2>
+            {data.summary ? (
+              <p className="mt-2 max-w-3xl text-sm leading-6 text-[#4A5564]">
+                {data.summary}
+              </p>
+            ) : null}
+            {isPartial ? (
+              <span className="mt-3 inline-flex rounded-full border border-[#C8D7F0] bg-white px-3 py-1 text-xs font-semibold text-[#55708A]">
+                {t("partialBadge")}
+              </span>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              onClick={() => void navigator.clipboard?.writeText(copyText)}
+            >
+              <Copy className="size-4" aria-hidden />
+              {t("copyReport")}
+            </Button>
+            <Button variant="outline" onClick={onReset}>
+              <RefreshCw className="size-4" aria-hidden />
+              {t("analyzeAnother")}
+            </Button>
+          </div>
+        </div>
+        </article>
+        ) : (
+          <ModuleLoadingCard
+            moduleKey="summary"
+            elapsedMs={elapsedMs}
+            t={t}
+            data={data}
+          />
+        )
+      ) : null}
+
+      {hasTopInsights ? (
+        <section className="grid gap-4 xl:grid-cols-3">
+          {!isPartial || data.communityMap.length ? (
+            <InsightCard
+              icon={<Map />}
+              title={t("sections.communities")}
+              items={data.communityMap.map((item) => ({
+                title: item.communityName,
+                body: item.whyRelevant,
+                href: item.url,
+                meta: t(`platform.${item.platform}`),
+                badge: t(`confidence.${item.confidence}`),
+                badgeClassName: CONFIDENCE_STYLE[item.confidence],
+              }))}
+              empty={t("emptyList")}
+            />
+          ) : nextModule === "communities" ? (
+            <ModuleLoadingCard
+              moduleKey="communities"
+              elapsedMs={elapsedMs}
+              t={t}
+              data={data}
+            />
+          ) : null}
+          {!isPartial || paidIntentItems.length ? (
+            <InsightCard
+              icon={<BarChart3 />}
+              title={t("sections.paidIntent")}
+              items={paidIntentItems}
+              empty={t("emptyList")}
+            />
+          ) : nextModule === "paidIntent" ? (
+            <ModuleLoadingCard
+              moduleKey="paidIntent"
+              elapsedMs={elapsedMs}
+              t={t}
+              data={data}
+            />
+          ) : null}
+          {!isPartial || data.entryFeatures.length ? (
+            <InsightCard
+              icon={<Target />}
+              title={t("sections.entryFeatures")}
+              items={data.entryFeatures.map((item) => ({
+                title: item.feature,
+                body: item.whyItCutsIn,
+                meta: item.risk,
+              }))}
+              empty={t("emptyList")}
+            />
+          ) : nextModule === "entryFeatures" ? (
+            <ModuleLoadingCard
+              moduleKey="entryFeatures"
+              elapsedMs={elapsedMs}
+              t={t}
+              data={data}
+            />
+          ) : null}
+        </section>
+      ) : null}
+
+      {hasPainClusters ? (
+        <section className="grid gap-4">
+        <h3 className="text-lg font-semibold text-[#111111]">{t("sections.painClusters")}</h3>
+        {data.painClusters.length ? (
+          data.painClusters.map((cluster) => (
+            <article
+              key={cluster.title}
+              className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <h4 className="text-xl font-semibold text-[#111111]">{cluster.title}</h4>
+                  <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">
+                    {cluster.summary}
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <Badge className={FREQUENCY_STYLE[cluster.frequency]}>
+                    {t("frequencyLabel")}: {t(`frequency.${cluster.frequency}`)}
+                  </Badge>
+                  <Badge className={SEVERITY_STYLE[cluster.severity]}>
+                    {t("severityLabel")}: {t(`severity.${cluster.severity}`)}
+                  </Badge>
+                </div>
+              </div>
+              <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_0.8fr]">
+                <div>
+                  <p className="text-sm font-semibold text-[#111111]">{t("userQuotes")}</p>
+                  <div className="mt-3 grid gap-3">
+                    {cluster.userQuotes.length ? (
+                      cluster.userQuotes.slice(0, 3).map((quote) => (
+                        <blockquote
+                          key={`${quote.quote}-${quote.sourceLabel}`}
+                          className="rounded-xl border-l-4 border-[#111111] bg-[#FAFBFC] p-4"
+                        >
+                          <p className="text-sm leading-6 text-[#30343A]">“{quote.quote}”</p>
+                          <footer className="mt-2 flex flex-wrap items-center gap-2 text-xs text-[#777777]">
+                            <span>{quote.sourceLabel}</span>
+                            <span>·</span>
+                            <span>{t(`platform.${quote.platform}`)}</span>
+                            {quote.sourceUrl ? (
+                              <a
+                                href={quote.sourceUrl}
+                                target="_blank"
+                                rel="noreferrer nofollow"
+                                className="inline-flex items-center gap-1 font-semibold text-[#075DF5] hover:underline"
+                              >
+                                {t("visit")}
+                                <ExternalLink className="size-3" aria-hidden />
+                              </a>
+                            ) : null}
+                          </footer>
+                        </blockquote>
+                      ))
+                    ) : (
+                      <p className="text-sm text-[#777777]">{t("emptyList")}</p>
+                    )}
+                  </div>
+                </div>
+                <div className="grid gap-3">
+                  <MiniPanel title={t("microFeature")} body={cluster.suggestedMicroFeature} />
+                  <MiniPanel title={t("landingAngle")} body={cluster.landingPageAngle} />
+                  <MiniPanel
+                    title={t("paySignal")}
+                    body={cluster.willingnessToPay.signal}
+                    badge={t(`confidence.${cluster.willingnessToPay.confidence}`)}
+                  />
+                </div>
+              </div>
+            </article>
+          ))
+        ) : (
+          <p className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5 text-sm text-[#777777]">
+            {t("emptyList")}
+          </p>
+        )}
+        {nextModule === "painClusters" ? (
+          <ModuleLoadingCard
+            moduleKey="painClusters"
+            elapsedMs={elapsedMs}
+            t={t}
+            data={data}
+          />
+        ) : null}
+        </section>
+      ) : null}
+
+      {hasLandingOrExperiments ? (
+        <section className="grid gap-4 xl:grid-cols-2">
+          {!isPartial || data.landingPageAngles.length ? (
+            <InsightCard
+              icon={<FileText />}
+              title={t("sections.landing")}
+              items={data.landingPageAngles.map((item) => ({
+                title: item.headline,
+                body: `${item.promise} ${item.cta}`,
+                meta: `${item.targetSegment} · ${item.proofToCollect}`,
+              }))}
+              empty={t("emptyList")}
+            />
+          ) : nextModule === "landing" ? (
+            <ModuleLoadingCard
+              moduleKey="landing"
+              elapsedMs={elapsedMs}
+              t={t}
+              data={data}
+            />
+          ) : null}
+          {!isPartial || data.validationExperiments.length ? (
+            <InsightCard
+              icon={<Search />}
+              title={t("sections.experiments")}
+              items={data.validationExperiments.map((item) => ({
+                title: item.title,
+                body: item.method,
+                meta: `${item.channel} · ${item.successMetric}`,
+              }))}
+              empty={t("emptyList")}
+            />
+          ) : nextModule === "experiments" ? (
+            <ModuleLoadingCard
+              moduleKey="experiments"
+              elapsedMs={elapsedMs}
+              t={t}
+              data={data}
+            />
+          ) : null}
+        </section>
+      ) : null}
+
+      {hasSources ? (
+        nextModule === "sources" && !data.sources.length && !data.missingEvidence.length ? (
+          <ModuleLoadingCard
+            moduleKey="sources"
+            elapsedMs={elapsedMs}
+            t={t}
+            data={data}
+          />
+        ) : (
+          <section className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5">
+        <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">
+          <MessageSquareQuote className="size-4" aria-hidden />
+          {t("sections.sources")}
+        </h3>
+        <div className="mt-4 grid gap-2">
+          {data.sources.length ? (
+            data.sources.map((source) =>
+              source.url ? (
+                <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} · {t(`platform.${source.platform}`)}
+                </a>
+              ) : (
+                <p key={source.label} className="text-sm text-[#555555]">
+                  {source.label} · {t(`platform.${source.platform}`)}
+                </p>
+              ),
+            )
+          ) : (
+            <p className="text-sm text-[#777777]">{t("emptyList")}</p>
+          )}
+        </div>
+        {data.missingEvidence.length ? (
+          <div className="mt-5 rounded-xl bg-[#FAFBFC] p-4">
+            <p className="text-sm font-semibold text-[#111111]">{t("missingEvidence")}</p>
+            <ul className="mt-2 grid gap-2 text-sm leading-6 text-[#555555]">
+              {data.missingEvidence.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+        <p className="mt-4 text-xs leading-5 text-[#777777]">
+          {data.disclaimer || t("disclaimerFallback")}
+        </p>
+        </section>
+        )
+      ) : null}
+    </div>
+  );
+}
+
+export function Badge({ className, children }: { className?: string; children: ReactNode }) {
+  return (
+    <span className={cn("rounded-full border px-3 py-1 text-xs font-semibold", className)}>
+      {children}
+    </span>
+  );
+}
+
+export function MiniPanel({
+  title,
+  body,
+  badge,
+}: {
+  title: string;
+  body: string;
+  badge?: string;
+}) {
+  return (
+    <div className="rounded-xl border border-[#EEF1F5] bg-[#FAFBFC] p-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-sm font-semibold text-[#111111]">{title}</p>
+        {badge ? <Badge className="border-[#D7DCE3] bg-white text-[#626A73]">{badge}</Badge> : null}
+      </div>
+      <p className="mt-2 text-sm leading-6 text-[#555555]">{body}</p>
+    </div>
+  );
+}
+
+export function InsightCard({
+  icon,
+  title,
+  items,
+  empty,
+}: {
+  icon: ReactNode;
+  title: string;
+  items: Array<{
+    title: string;
+    body: string;
+    meta?: string;
+    href?: string;
+    badge?: string;
+    badgeClassName?: string;
+  }>;
+  empty: string;
+}) {
+  return (
+    <section className="rounded-[1.25rem] 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>
+      <div className="mt-4 grid gap-3">
+        {items.length ? (
+          items.slice(0, 7).map((item) => (
+            <article key={`${item.title}-${item.body}`} className="rounded-xl bg-[#FAFBFC] p-4">
+              <div className="flex flex-wrap items-start justify-between gap-2">
+                <h4 className="font-semibold text-[#111111]">{item.title}</h4>
+                {item.badge ? <Badge className={item.badgeClassName}>{item.badge}</Badge> : null}
+              </div>
+              <p className="mt-2 text-sm leading-6 text-[#555555]">{item.body}</p>
+              <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-[#777777]">
+                {item.meta ? <span>{item.meta}</span> : null}
+                {item.href ? (
+                  <a
+                    href={item.href}
+                    target="_blank"
+                    rel="noreferrer nofollow"
+                    className="inline-flex items-center gap-1 font-semibold text-[#075DF5] hover:underline"
+                  >
+                    <span>{item.href.replace(/^https?:\/\//, "")}</span>
+                    <ExternalLink className="size-3" aria-hidden />
+                  </a>
+                ) : null}
+              </div>
+            </article>
+          ))
+        ) : (
+          <p className="text-sm text-[#777777]">{empty}</p>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/features/tools/community-pain-point-extractor/widget/types.ts

@@ -0,0 +1,33 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type { CommunityPainPointExtractorResult } from "../../../../lib/tools/community-pain-point-extractor-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid";
+export type PrimaryPlatform = "all" | "reddit" | "x" | "hackernews";
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | {
+      phase: "running";
+      status: string;
+      taskId?: string;
+      partialData?: CommunityPainPointExtractorResult;
+    }
+  | { phase: "done"; data: CommunityPainPointExtractorResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory };
+
+export type ProgressItem = {
+  id: string;
+  text: string;
+};
+
+export type ReportModuleKey =
+  | "summary"
+  | "communities"
+  | "paidIntent"
+  | "entryFeatures"
+  | "painClusters"
+  | "landing"
+  | "experiments"
+  | "sources";
+
+export type T = ReturnType<typeof useTranslations>;