@tomako/tools-runtime 0.1.0

package/src/features/tools/competitor-analysis/widget/result-shell.tsx

@@ -0,0 +1,418 @@
+import {
+    Building2,
+    Coins,
+    Compass,
+    ExternalLink,
+    Globe2,
+    RefreshCw,
+    TrendingUp,
+    Users,
+} from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import type { CompetitorAnalysisResult, CompetitorConfidence } from "../../../../lib/tools/competitor-analysis-schema";
+import { cn } from "@tomako/ui/cn";
+
+import { CONFIDENCE_STYLE } from "./constants";
+import type { T } from "./types";
+
+function ConfidenceBadge({ level, t }: { level: CompetitorConfidence; t: T }) {
+  return (
+    <span
+      className={cn(
+        "rounded-full px-2.5 py-1 text-[11px] font-semibold",
+        CONFIDENCE_STYLE[level],
+      )}
+    >
+      {t("confidence.label")}: {t(`confidence.${level}`)}
+    </span>
+  );
+}
+
+function SectionCard({
+  icon,
+  title,
+  confidence,
+  children,
+  t,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  confidence?: CompetitorConfidence;
+  children: React.ReactNode;
+  t: T;
+}) {
+  return (
+    <section className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5 shadow-[0_10px_28px_rgba(17,17,17,0.04)]">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">
+          <span className="text-[#075DF5]">{icon}</span>
+          {title}
+        </h3>
+        {confidence ? <ConfidenceBadge level={confidence} t={t} /> : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function MetricRow({ label, value }: { label: string; value?: string }) {
+  if (!value) return null;
+  return (
+    <div className="flex items-start justify-between gap-4 border-b border-[#F0F2F5] py-2 last:border-0">
+      <span className="text-sm text-[#777777]">{label}</span>
+      <span className="text-right text-sm font-semibold text-[#111111]">{value}</span>
+    </div>
+  );
+}
+
+function Pills({ items }: { items: readonly string[] }) {
+  if (!items.length) return null;
+  return (
+    <div className="mt-2 flex flex-wrap gap-2">
+      {items.map((item) => (
+        <span
+          key={item}
+          className="rounded-full border border-[#E2E6EC] bg-[#F7F9FC] px-3 py-1 text-xs font-medium text-[#3D4D5C]"
+        >
+          {item}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function MiniBarChart({
+  points,
+  emptyLabel,
+}: {
+  points: readonly { period: string; value: number }[];
+  emptyLabel: string;
+}) {
+  if (!points.length) {
+    return <p className="text-sm text-[#9AA3AD]">{emptyLabel}</p>;
+  }
+  const max = Math.max(...points.map((p) => p.value), 1);
+  return (
+    <div className="flex h-32 items-end gap-2">
+      {points.map((point) => (
+        <div key={point.period} className="flex flex-1 flex-col items-center gap-1.5">
+          <div
+            className="w-full rounded-t-md bg-gradient-to-t from-[#075DF5] to-[#48ADFD]"
+            style={{ height: `${Math.max((point.value / max) * 100, 4)}%` }}
+            title={`${point.period}: ${point.value}`}
+          />
+          <span className="truncate text-[10px] text-[#9AA3AD]">{point.period}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ShareBars({
+  items,
+}: {
+  items: readonly { name: string; share?: number }[];
+}) {
+  if (!items.length) return null;
+  return (
+    <div className="mt-1 grid gap-2.5">
+      {items.slice(0, 6).map((item) => (
+        <div key={item.name} className="grid gap-1">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-[#3D4D5C]">{item.name}</span>
+            {typeof item.share === "number" ? (
+              <span className="font-semibold text-[#55708A]">{Math.round(item.share)}%</span>
+            ) : null}
+          </div>
+          <div className="h-2 overflow-hidden rounded-full bg-[#EEF2F7]">
+            <div
+              className="h-full rounded-full bg-[#075DF5]"
+              style={{ width: `${Math.min(Math.max(item.share ?? 0, 2), 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function PeopleList({
+  people,
+}: {
+  people: readonly { name: string; role?: string }[];
+}) {
+  if (!people.length) return null;
+  return (
+    <ul className="grid gap-2">
+      {people.map((person) => (
+        <li key={`${person.name}-${person.role ?? ""}`} className="text-sm text-[#111111]">
+          <span className="font-semibold">{person.name}</span>
+          {person.role ? <span className="text-[#777777]"> · {person.role}</span> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function PositioningList({
+  label,
+  items,
+  dot,
+}: {
+  label: string;
+  items: readonly string[];
+  dot: string;
+}) {
+  if (!items.length) return null;
+  return (
+    <div>
+      <p className="mb-1.5 text-xs font-semibold text-[#55708A]">{label}</p>
+      <ul className="grid gap-1.5">
+        {items.map((item) => (
+          <li key={item} className="flex gap-2 text-sm text-[#3D4D5C]">
+            <span className={cn("mt-1.5 size-1.5 shrink-0 rounded-full", dot)} />
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function Dossier({
+  data,
+  t,
+  onReset,
+}: {
+  data: CompetitorAnalysisResult;
+  t: T;
+  onReset: () => void;
+}) {
+  const { overview, traffic, businessScale, team, funding, positioning } = data;
+  const noData = t("noData");
+
+  return (
+    <div className="grid gap-4">
+      <div className="rounded-[1.25rem] border border-[#D7E3FB] bg-[#F4F8FF] p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-xl font-semibold text-[#111111]">
+                {overview.name || t("unknownCompetitor")}
+              </h2>
+              <ConfidenceBadge level={data.confidence} t={t} />
+            </div>
+            {overview.tagline ? (
+              <p className="mt-1 text-sm text-[#55708A]">{overview.tagline}</p>
+            ) : null}
+          </div>
+          {overview.url ? (
+            <a
+              href={overview.url}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              className="inline-flex items-center gap-1 text-xs font-semibold text-[#075DF5] hover:underline"
+            >
+              {t("visitSite")}
+              <ExternalLink className="size-3.5" aria-hidden />
+            </a>
+          ) : null}
+        </div>
+        {data.summary ? (
+          <p className="mt-3 text-sm leading-6 text-[#3D4D5C]">{data.summary}</p>
+        ) : null}
+        {data.highlights.length ? (
+          <ul className="mt-3 grid gap-1.5">
+            {data.highlights.map((item) => (
+              <li key={item} className="flex gap-2 text-sm text-[#3D4D5C]">
+                <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-[#075DF5]" />
+                {item}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <SectionCard icon={<Building2 className="size-4" />} title={t("sections.overview")} t={t}>
+          {overview.description ? (
+            <p className="mb-3 text-sm leading-6 text-[#3D4D5C]">{overview.description}</p>
+          ) : null}
+          <MetricRow label={t("overview.category")} value={overview.category} />
+          <MetricRow label={t("overview.businessModel")} value={overview.businessModel} />
+          <MetricRow label={t("overview.founded")} value={overview.foundedYear} />
+          <MetricRow label={t("overview.hq")} value={overview.headquarters} />
+        </SectionCard>
+
+        <SectionCard
+          icon={<TrendingUp className="size-4" />}
+          title={t("sections.traffic")}
+          confidence={traffic.confidence}
+          t={t}
+        >
+          <MetricRow label={t("traffic.monthlyVisits")} value={traffic.monthlyVisitsEstimate} />
+          <MetricRow label={t("traffic.trend")} value={t(`traffic.trendLabels.${traffic.trend}`)} />
+          <div className="mt-4">
+            <p className="mb-2 text-xs font-semibold text-[#55708A]">{t("traffic.trendTitle")}</p>
+            <MiniBarChart points={traffic.trendSeries} emptyLabel={noData} />
+          </div>
+          {traffic.channels.length ? (
+            <div className="mt-4">
+              <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold text-[#55708A]">
+                <Globe2 className="size-3.5" aria-hidden /> {t("traffic.channels")}
+              </p>
+              <ShareBars items={traffic.channels} />
+            </div>
+          ) : null}
+          {traffic.geographies.length ? (
+            <div className="mt-4">
+              <p className="mb-2 text-xs font-semibold text-[#55708A]">{t("traffic.geographies")}</p>
+              <ShareBars items={traffic.geographies} />
+            </div>
+          ) : null}
+        </SectionCard>
+
+        <SectionCard
+          icon={<Building2 className="size-4" />}
+          title={t("sections.businessScale")}
+          confidence={businessScale.confidence}
+          t={t}
+        >
+          <MetricRow label={t("businessScale.pricing")} value={businessScale.pricingModel} />
+          <MetricRow label={t("businessScale.priceRange")} value={businessScale.priceRange} />
+          <MetricRow label={t("businessScale.revenue")} value={businessScale.estimatedRevenue} />
+          <MetricRow label={t("businessScale.employees")} value={businessScale.employeeRange} />
+          {businessScale.customerSegments.length ? (
+            <div className="mt-3">
+              <p className="text-xs font-semibold text-[#55708A]">{t("businessScale.segments")}</p>
+              <Pills items={businessScale.customerSegments} />
+            </div>
+          ) : null}
+          {businessScale.notableCustomers.length ? (
+            <div className="mt-3">
+              <p className="text-xs font-semibold text-[#55708A]">{t("businessScale.customers")}</p>
+              <Pills items={businessScale.notableCustomers} />
+            </div>
+          ) : null}
+        </SectionCard>
+
+        <SectionCard
+          icon={<Users className="size-4" />}
+          title={t("sections.team")}
+          confidence={team.confidence}
+          t={t}
+        >
+          <MetricRow label={t("team.teamSize")} value={team.teamSize} />
+          {team.founders.length ? (
+            <div className="mt-3">
+              <p className="mb-1.5 text-xs font-semibold text-[#55708A]">{t("team.founders")}</p>
+              <PeopleList people={team.founders} />
+            </div>
+          ) : null}
+          {team.keyPeople.length ? (
+            <div className="mt-3">
+              <p className="mb-1.5 text-xs font-semibold text-[#55708A]">{t("team.keyPeople")}</p>
+              <PeopleList people={team.keyPeople} />
+            </div>
+          ) : null}
+          {!team.teamSize && !team.founders.length && !team.keyPeople.length ? (
+            <p className="text-sm text-[#9AA3AD]">{noData}</p>
+          ) : null}
+        </SectionCard>
+
+        <SectionCard
+          icon={<Coins className="size-4" />}
+          title={t("sections.funding")}
+          confidence={funding.confidence}
+          t={t}
+        >
+          <MetricRow label={t("funding.totalRaised")} value={funding.totalRaised} />
+          {funding.lastRound ? (
+            <>
+              <MetricRow label={t("funding.stage")} value={funding.lastRound.stage} />
+              <MetricRow label={t("funding.amount")} value={funding.lastRound.amount} />
+              <MetricRow label={t("funding.date")} value={funding.lastRound.date} />
+              {funding.lastRound.leadInvestors.length ? (
+                <div className="mt-3">
+                  <p className="text-xs font-semibold text-[#55708A]">{t("funding.leadInvestors")}</p>
+                  <Pills items={funding.lastRound.leadInvestors} />
+                </div>
+              ) : null}
+            </>
+          ) : null}
+          {funding.investors.length ? (
+            <div className="mt-3">
+              <p className="text-xs font-semibold text-[#55708A]">{t("funding.investors")}</p>
+              <Pills items={funding.investors} />
+            </div>
+          ) : null}
+          {!funding.totalRaised && !funding.lastRound && !funding.investors.length ? (
+            <p className="text-sm text-[#9AA3AD]">{noData}</p>
+          ) : null}
+        </SectionCard>
+
+        {positioning.strengths.length ||
+        positioning.weaknesses.length ||
+        positioning.opportunities.length ? (
+          <SectionCard icon={<Compass className="size-4" />} title={t("sections.positioning")} t={t}>
+            <div className="grid gap-3">
+              <PositioningList
+                label={t("positioning.strengths")}
+                items={positioning.strengths}
+                dot="bg-[#15803D]"
+              />
+              <PositioningList
+                label={t("positioning.weaknesses")}
+                items={positioning.weaknesses}
+                dot="bg-[#B45309]"
+              />
+              <PositioningList
+                label={t("positioning.opportunities")}
+                items={positioning.opportunities}
+                dot="bg-[#075DF5]"
+              />
+            </div>
+          </SectionCard>
+        ) : null}
+      </div>
+
+      {data.sources.length ? (
+        <div className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5">
+          <p className="mb-3 text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">
+            {t("sections.sources")}
+          </p>
+          <ul className="grid gap-2">
+            {data.sources.map((source) => (
+              <li key={`${source.label}-${source.url ?? ""}`}>
+                {source.url ? (
+                  <a
+                    href={source.url}
+                    target="_blank"
+                    rel="noopener noreferrer nofollow"
+                    className="inline-flex items-center gap-1 text-sm text-[#075DF5] hover:underline"
+                  >
+                    {source.label}
+                    <ExternalLink className="size-3.5" aria-hidden />
+                  </a>
+                ) : (
+                  <span className="text-sm text-[#3D4D5C]">{source.label}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="max-w-xl text-xs leading-5 text-[#9AA3AD]">
+          {data.disclaimer || t("disclaimerFallback")}
+        </p>
+        <Button variant="outline" onClick={onReset} className="shrink-0">
+          <RefreshCw className="size-4" aria-hidden />
+          {t("analyzeAnother")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/features/tools/competitor-analysis/widget/types.ts

@@ -0,0 +1,13 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type { CompetitorAnalysisResult } from "../../../../lib/tools/competitor-analysis-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "generic";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string }
+  | { phase: "done"; data: CompetitorAnalysisResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory };
+
+export type T = ReturnType<typeof useTranslations>;