@tomako/tools-runtime 0.1.0

package/src/features/tools/community-feedback-inbox/community-feedback-inbox.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const communityFeedbackInboxSpec: ToolSpec = {
+  slug: "community-feedback-inbox",
+  toolType: "analyzer",
+  riskLevel: "medium",
+  seo: {
+    "publishedAt": "2026-06-30",
+    "updatedAt": "2026-06-30",
+    "readingTime": "7 min",
+    "featured": false,
+    "ogImage": "/tools/community-feedback-inbox-hero.webp"
+  },
+  widget: {"id":"community-feedback-inbox","mode":"custom"},
+};

package/src/features/tools/community-feedback-inbox/widget/community-feedback-inbox.tsx

@@ -0,0 +1,271 @@
+"use client";
+import {
+    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 { useLocale, useTranslations } from "../../../../i18n/client";
+import {
+    communityFeedbackBriefSchema,
+    communityFeedbackGoals,
+    communityFeedbackSources,
+    type CommunityFeedbackBrief,
+    type CommunityFeedbackGoal,
+    type CommunityFeedbackSource
+} from "../../../../lib/tools/community-feedback-inbox-schema";
+import {
+    createCommunityFeedbackInboxReport,
+    stringifyCommunityFeedbackInboxReport
+} from "../../../../lib/tools/community-feedback-inbox.format";
+import {
+    AlertTriangle,
+    Inbox
+} from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { countCommentLikeLines, defaultBrief, isWeakText } from "./helpers";
+import { PreviewPanel } from "./preview-panels";
+import { InboxResult } from "./result-shell";
+import type { InboxState } from "./types";
+
+export function CommunityFeedbackInbox() {
+  const locale = useLocale();
+  const language = locale === "en" ? "en" : "zh";
+  const t = useTranslations("toolsPages.communityFeedbackInbox.widget");
+  const resultRef = useRef<HTMLDivElement>(null);
+  const [brief, setBrief] = useState<CommunityFeedbackBrief>(() =>
+    defaultBrief(language),
+  );
+  const [state, setState] = useState<InboxState>({ phase: "idle" });
+  const [copied, setCopied] = useState(false);
+
+  const sourceLabels = t.raw("sources") as Record<CommunityFeedbackSource, string>;
+  const goalLabels = t.raw("goals") as Record<CommunityFeedbackGoal, string>;
+
+  const statusText = useMemo(() => {
+    if (state.phase === "done") return t("status.done");
+    if (state.phase === "error") return t("status.error");
+    return t("status.idle");
+  }, [state.phase, t]);
+
+  function updateBrief<T extends keyof CommunityFeedbackBrief>(
+    key: T,
+    value: CommunityFeedbackBrief[T],
+  ) {
+    setBrief((prev) => ({ ...prev, [key]: value, language }));
+  }
+
+  function validateBrief() {
+    const parsed = communityFeedbackBriefSchema.safeParse({ ...brief, language });
+    if (!parsed.success) return { ok: false as const, code: "validation" as const };
+    if (
+      isWeakText(parsed.data.productContext, 24) ||
+      isWeakText(parsed.data.comments, 80) ||
+      countCommentLikeLines(parsed.data.comments) < 2
+    ) {
+      return { ok: false as const, code: "weakInput" as const };
+    }
+    return { ok: true as const, data: parsed.data };
+  }
+
+  function generateReport() {
+    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;
+    }
+
+    setState({
+      phase: "done",
+      report: createCommunityFeedbackInboxReport(parsed.data),
+    });
+    setCopied(false);
+  }
+
+  function reset() {
+    setBrief(defaultBrief(language));
+    setState({ phase: "idle" });
+    setCopied(false);
+  }
+
+  async function copyReport() {
+    if (state.phase !== "done") return;
+    const copiedToClipboard = await copyTextToClipboard(
+      stringifyCommunityFeedbackInboxReport(state.report),
+    );
+    if (copiedToClipboard) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    }
+  }
+
+  function downloadReport() {
+    if (state.phase !== "done") return;
+    downloadTextFile({
+      filename: "community-feedback-inbox-report.md",
+      text: stringifyCommunityFeedbackInboxReport(state.report),
+    });
+  }
+
+  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)]">
+          <form
+            className="bg-[#F4F3EE] p-5 md:p-7"
+            onSubmit={(event) => {
+              event.preventDefault();
+              generateReport();
+            }}
+          >
+            <div className="mb-6">
+              <p className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+                <Inbox aria-hidden className="size-4" />
+                {t("formTitle")}
+              </p>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-[#555555]">
+                {t("formHint")}
+              </p>
+            </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("sourceLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateBrief("source", value as CommunityFeedbackSource)
+                    }
+                    value={brief.source}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {communityFeedbackSources.map((source) => (
+                        <SelectItem key={source} value={source}>
+                          {sourceLabels[source]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+
+              <Field label={t("productContextLabel")}>
+                <Textarea
+                  className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                  onChange={(event) =>
+                    updateBrief("productContext", event.target.value)
+                  }
+                  placeholder={t("productContextPlaceholder")}
+                  value={brief.productContext}
+                />
+              </Field>
+
+              <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_240px]">
+                <Field label={t("commentsLabel")}>
+                  <Textarea
+                    className="min-h-56 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                    onChange={(event) => updateBrief("comments", event.target.value)}
+                    placeholder={t("commentsPlaceholder")}
+                    value={brief.comments}
+                  />
+                </Field>
+                <Field label={t("goalLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateBrief("goal", value as CommunityFeedbackGoal)
+                    }
+                    value={brief.goal}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {communityFeedbackGoals.map((goal) => (
+                        <SelectItem key={goal} value={goal}>
+                          {goalLabels[goal]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+
+              <Button
+                className="h-12 w-full rounded-2xl bg-[#111111] px-5 text-[15px] text-white hover:bg-[#2A2A2A]"
+                type="submit"
+              >
+                {t("generate")}
+              </Button>
+            </div>
+          </form>
+
+          <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" ? (
+              <div className="rounded-[1.25rem] border border-[#F1C2B8] bg-[#FFF1EC] p-5">
+                <div className="flex items-start gap-3">
+                  <AlertTriangle
+                    aria-hidden
+                    className="mt-1 size-5 shrink-0 text-[#A83A24]"
+                  />
+                  <div>
+                    <h3 className="text-lg font-semibold text-[#7A2818]">
+                      {t(`errors.${state.code}.title`)}
+                    </h3>
+                    <p className="mt-2 text-sm leading-6 text-[#7A2818]">
+                      {t(`errors.${state.code}.body`)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {state.phase === "done" ? (
+              <InboxResult
+                copied={copied}
+                onCopy={() => void copyReport()}
+                onDownload={downloadReport}
+                onReset={reset}
+                report={state.report}
+                sourceLanguage={language}
+                t={t}
+              />
+            ) : null}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/community-feedback-inbox/widget/constants.ts

@@ -0,0 +1,3 @@
+
+export const placeholderPattern =
+  /^(test|demo|sample|example|asdf|qwer|lorem ipsum|123+|111+|222+|xxx+)$/i;

package/src/features/tools/community-feedback-inbox/widget/helpers.ts

@@ -0,0 +1,28 @@
+import type { CommunityFeedbackBrief } from "../../../../lib/tools/community-feedback-inbox-schema";
+import { placeholderPattern } from "./constants";
+
+export function defaultBrief(language: CommunityFeedbackBrief["language"]): CommunityFeedbackBrief {
+  return {
+    productName: "",
+    productContext: "",
+    source: "mixed",
+    goal: "launchLearning",
+    comments: "",
+    language,
+  };
+}
+
+export function isWeakText(value: string, minLength: number) {
+  const text = value.trim();
+  if (!text) return true;
+  if (placeholderPattern.test(text)) return true;
+  if (/^\d+$/.test(text)) return true;
+  return text.length < minLength;
+}
+
+export function countCommentLikeLines(value: string) {
+  return value
+    .split(/\n{2,}|\n(?=(?:[-*]\s+|@?[\p{L}\p{N}_.-]{2,32}\s*[:：]))/u)
+    .map((item) => item.trim())
+    .filter((item) => item.length >= 12).length;
+}

package/src/features/tools/community-feedback-inbox/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const CommunityFeedbackInbox = dynamic(() =>
+  import("./community-feedback-inbox").then((module) => module.CommunityFeedbackInbox),
+);

package/src/features/tools/community-feedback-inbox/widget/preview-panels.tsx

@@ -0,0 +1,92 @@
+"use client";
+import {
+    Inbox,
+    MessageSquareText
+} from "lucide-react";
+import type { InboxState } from "./types";
+
+export function MiniMetric({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="rounded-2xl border border-[#E1DDD3] bg-white px-4 py-3">
+      <p className="text-xs font-semibold uppercase text-[#777777]">{label}</p>
+      <p className="mt-2 text-2xl font-semibold leading-none text-[#111111]">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+export function SectionHeading({
+  title,
+  icon: Icon,
+}: {
+  title: string;
+  icon: typeof Inbox;
+}) {
+  return (
+    <div className="mb-4 flex items-center gap-2">
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#EFEDE5] text-[#111111]">
+        <Icon aria-hidden className="size-4" />
+      </span>
+      <h3 className="text-lg font-semibold text-[#111111]">{title}</h3>
+    </div>
+  );
+}
+
+export function PreviewPanel({
+  state,
+  labels,
+  statusText,
+}: {
+  state: InboxState;
+  labels: readonly string[];
+  statusText: string;
+}) {
+  const hasResult = state.phase === "done";
+
+  return (
+    <aside className="grid content-between gap-5 bg-white p-5 md:p-7">
+      <div className="rounded-[1.5rem] border border-[#DED8CA] bg-[#F8F7F2] p-5">
+        <div className="flex items-center justify-between gap-3">
+          <span className="rounded-full bg-[#111111] px-3 py-1 text-xs font-semibold text-white">
+            {statusText}
+          </span>
+          <MessageSquareText aria-hidden className="size-5 text-[#111111]" />
+        </div>
+        <div className="mt-7 grid grid-cols-3 gap-3">
+          <MiniMetric
+            label={labels[0] ?? "Comments"}
+            value={hasResult ? state.report.summary.totalComments : "--"}
+          />
+          <MiniMetric
+            label={labels[1] ?? "Signals"}
+            value={hasResult ? state.report.summary.highSignalCount : "--"}
+          />
+          <MiniMetric
+            label={labels[2] ?? "Beta"}
+            value={hasResult ? state.report.summary.betaCandidateCount : "--"}
+          />
+        </div>
+        <div className="mt-5 rounded-2xl border border-[#E1DDD3] bg-white p-4">
+          <p className="text-sm font-semibold text-[#111111]">
+            {hasResult ? state.report.summary.dominantCategory : labels[3]}
+          </p>
+          <p className="mt-2 line-clamp-4 text-sm leading-6 text-[#555555]">
+            {hasResult ? state.report.summary.strongestSignal : labels[4]}
+          </p>
+        </div>
+      </div>
+      <div className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#FFFDF7] p-4">
+        <h3 className="text-base font-semibold text-[#111111]">
+          {hasResult ? state.report.summary.recommendedNextStep : labels[5]}
+        </h3>
+      </div>
+    </aside>
+  );
+}

package/src/features/tools/community-feedback-inbox/widget/result-shell.tsx

@@ -0,0 +1,266 @@
+"use client";
+import {
+    ToolResultActions,
+    ToolResultHeader
+} from "../../../../components/tools/workspace";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    type CommunityFeedbackBrief,
+    type CommunityFeedbackInboxReport
+} from "../../../../lib/tools/community-feedback-inbox-schema";
+import {
+    getCommunityFeedbackSourceLabel
+} from "../../../../lib/tools/community-feedback-inbox.format";
+import { cn } from "@tomako/ui/cn";
+import {
+    AlertTriangle,
+    ClipboardList,
+    Inbox,
+    ListChecks,
+    MessageSquareText,
+    Sparkles,
+    Users,
+} from "lucide-react";
+import { MiniMetric, SectionHeading } from "./preview-panels";
+
+export function InboxResult({
+  copied,
+  onCopy,
+  onDownload,
+  onReset,
+  report,
+  sourceLanguage,
+  t,
+}: {
+  copied: boolean;
+  onCopy: () => void;
+  onDownload: () => void;
+  onReset: () => void;
+  report: CommunityFeedbackInboxReport;
+  sourceLanguage: CommunityFeedbackBrief["language"];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <div className="grid gap-5">
+      <ToolResultHeader
+        eyebrow={t("resultReady")}
+        title={report.summary.dominantCategory}
+        body={report.summary.recommendedNextStep}
+        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 md:grid-cols-3">
+        <MiniMetric label={t("totalComments")} value={report.summary.totalComments} />
+        <MiniMetric label={t("highSignals")} value={report.summary.highSignalCount} />
+        <MiniMetric label={t("betaCandidates")} value={report.summary.betaCandidateCount} />
+      </div>
+
+      <ResultPanel icon={ListChecks} title={t("categories")}>
+        <div className="grid gap-3 md:grid-cols-2">
+          {report.categories.map((item) => (
+            <article
+              className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+              key={item.category}
+            >
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <h4 className="text-base font-semibold text-[#111111]">
+                  {item.title}
+                </h4>
+                <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#555555]">
+                  {t("signalCount", { count: item.count })}
+                </span>
+              </div>
+              <p className="mt-3 text-sm leading-6 text-[#555555]">{item.pattern}</p>
+              <p className="mt-3 text-sm leading-6 text-[#3D3D3D]">{item.action}</p>
+              <QuoteList items={item.evidence} />
+            </article>
+          ))}
+        </div>
+      </ResultPanel>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ResultPanel icon={Users} title={t("inviteShortlist")}>
+          {report.betaCandidates.length ? (
+            <div className="grid gap-3">
+              {report.betaCandidates.map((item) => (
+                <article
+                  className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+                  key={`${item.author}-${item.evidence}`}
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <h4 className="text-base font-semibold text-[#111111]">
+                      {item.author}
+                    </h4>
+                    <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#555555]">
+                      {getCommunityFeedbackSourceLabel(item.source, sourceLanguage)}
+                    </span>
+                  </div>
+                  <p className="mt-2 text-sm leading-6 text-[#555555]">
+                    {item.reason}
+                  </p>
+                  <QuoteList items={[item.evidence, item.inviteDraft]} />
+                </article>
+              ))}
+            </div>
+          ) : (
+            <EmptyText text={t("emptyInvite")} />
+          )}
+        </ResultPanel>
+
+        <ResultPanel icon={Sparkles} title={t("contentAngles")}>
+          <div className="grid gap-3">
+            {report.contentAngles.map((item) => (
+              <article
+                className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+                key={item.title}
+              >
+                <h4 className="text-base font-semibold text-[#111111]">
+                  {item.title}
+                </h4>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">{item.hook}</p>
+                <QuoteList items={[item.supportingComment]} />
+              </article>
+            ))}
+          </div>
+        </ResultPanel>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ResultPanel icon={ClipboardList} title={t("backlog")}>
+          <div className="grid gap-3">
+            {report.backlogItems.map((item) => (
+              <article
+                className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+                key={`${item.title}-${item.category}`}
+              >
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <h4 className="text-base font-semibold text-[#111111]">
+                    {item.title}
+                  </h4>
+                  <span
+                    className={cn(
+                      "rounded-full px-3 py-1 text-xs font-semibold",
+                      item.confidence === "high" && "bg-[#E6F7DD] text-[#3F681E]",
+                      item.confidence === "medium" && "bg-[#FFF0D8] text-[#7A5600]",
+                      item.confidence === "low" && "bg-white text-[#555555]",
+                    )}
+                  >
+                    {t(`confidence.${item.confidence}`)}
+                  </span>
+                </div>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">
+                  {item.whyItMatters}
+                </p>
+                <p className="mt-2 text-sm leading-6 text-[#3D3D3D]">
+                  {item.nextAction}
+                </p>
+              </article>
+            ))}
+          </div>
+        </ResultPanel>
+
+        <ResultPanel icon={MessageSquareText} title={t("faq")}>
+          <div className="grid gap-3">
+            {report.faqItems.map((item) => (
+              <article
+                className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+                key={item.question}
+              >
+                <h4 className="text-base font-semibold text-[#111111]">
+                  {item.question}
+                </h4>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">
+                  {item.answerAngle}
+                </p>
+                <QuoteList items={[item.evidence]} />
+              </article>
+            ))}
+          </div>
+        </ResultPanel>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ResultPanel icon={AlertTriangle} title={t("objections")}>
+          {report.objections.length ? (
+            <div className="grid gap-3">
+              {report.objections.map((item) => (
+                <article
+                  className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4"
+                  key={item.evidence}
+                >
+                  <h4 className="text-base font-semibold text-[#111111]">
+                    {item.title}
+                  </h4>
+                  <p className="mt-2 text-sm leading-6 text-[#555555]">
+                    {item.responseAngle}
+                  </p>
+                  <QuoteList items={[item.evidence]} />
+                </article>
+              ))}
+            </div>
+          ) : (
+            <EmptyText text={t("emptyObjections")} />
+          )}
+        </ResultPanel>
+
+        <ResultPanel icon={ListChecks} title={t("reviewChecklist")}>
+          <QuoteList items={[...report.missingInfo, ...report.reviewChecklist]} />
+        </ResultPanel>
+      </div>
+    </div>
+  );
+}
+
+export function ResultPanel({
+  children,
+  icon,
+  title,
+}: {
+  children: React.ReactNode;
+  icon: typeof Inbox;
+  title: string;
+}) {
+  return (
+    <section className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+      <SectionHeading icon={icon} title={title} />
+      {children}
+    </section>
+  );
+}
+
+export function QuoteList({ items }: { items: readonly string[] }) {
+  const filtered = items.filter(Boolean);
+  if (!filtered.length) return null;
+
+  return (
+    <ul className="mt-3 grid gap-2">
+      {filtered.map((item) => (
+        <li
+          className="rounded-2xl border border-[#E1DDD3] bg-white px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+          key={item}
+        >
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function EmptyText({ text }: { text: string }) {
+  return (
+    <p className="rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-4 py-3 text-sm leading-6 text-[#555555]">
+      {text}
+    </p>
+  );
+}