@tomako/tools-runtime 0.1.0

package/src/features/tools/competitor-analysis/competitor-analysis.container.tsx

@@ -0,0 +1,136 @@
+import { ImageOff } from "lucide-react";
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { CompetitorAnalysis } from "./widget";
+
+import {
+    ToolBoundaryAside,
+    ToolDividedFaqList,
+    ToolDividedRows,
+    ToolNumberedRows,
+    ToolNumberedUseCaseGrid,
+    ToolSectionEyebrow,
+    type ToolFaqItem,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+/**
+ * Gray-white image placeholder. The agent has no image-generation capability,
+ * so first-pass bitmap assets are intentionally deferred (see release notes /
+ * tool brief). Swap each placeholder for a real `public/tools/competitor-analysis-*.webp`
+ * when assets are produced.
+ */
+function ImagePlaceholder({
+  label,
+  className = "",
+}: {
+  label: string;
+  className?: string;
+}) {
+  return (
+    <div
+      role="img"
+      aria-label={label}
+      className={`flex aspect-[16/10] w-full items-center justify-center rounded-[1.5rem] border border-dashed border-[#D7DCE3] bg-[#F4F5F7] text-[#A8B0BA] ${className}`}
+    >
+      <span className="flex flex-col items-center gap-2 text-xs font-medium">
+        <ImageOff className="size-6" aria-hidden />
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export async function CompetitorAnalysisContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.competitorAnalysis.guide");
+  const sharedT = await createToolGuideTranslator(locale, "toolsPages.shared");
+
+  const steps = t.raw("howToUseSteps") as readonly string[];
+  const guidance = t.raw("guidanceBullets") as readonly string[];
+  const useCases = t.raw("useCaseBullets") as readonly string[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+  const boundaryBullets = t.raw("faqBoundaryBullets") as readonly string[];
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="showcase"
+      heroVisual={<ImagePlaceholder label={t("visualAlt.hero")} className="max-w-4xl" />}
+    >
+      <ToolWorkspaceSection
+        heading={sharedT("toolWorkspace")}
+        hint={sharedT("toolWorkspaceHint")}
+        badge={sharedT("keywords")}
+      >
+        <CompetitorAnalysis />
+      </ToolWorkspaceSection>
+
+      {/* How it works — text-led split */}
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[0.92fr_1.08fr] md:items-center md:py-16">
+        <div>
+          <ToolSectionEyebrow tone="blue">{t("howToUseKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("howToUse")}
+          </h2>
+          <div className="mt-5 flex flex-col gap-4">
+            <ToolNumberedRows items={steps} />
+            <p className="text-sm leading-6 text-[#777777]">{t("runtimeNote")}</p>
+          </div>
+        </div>
+        <ImagePlaceholder label={t("visualAlt.howToUse")} />
+      </section>
+
+      {/* Result guidance — visual-led split */}
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1.08fr_0.92fr] md:items-center md:py-16">
+        <ImagePlaceholder label={t("visualAlt.result")} />
+        <div>
+          <ToolSectionEyebrow tone="blue">{t("resultKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("resultGuidance")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedRows items={guidance} />
+          </div>
+        </div>
+      </section>
+
+      {/* Use cases — card trio */}
+      <section className="border-t border-[#E8E4DB] py-12 md:py-16">
+        <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
+          <div>
+            <ToolSectionEyebrow tone="blue">{t("useCasesKicker")}</ToolSectionEyebrow>
+            <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+              {t("useCases")}
+            </h2>
+          </div>
+          <p className="max-w-md text-sm leading-6 text-[#777777]">{t("useCasesIntro")}</p>
+        </div>
+        <ToolNumberedUseCaseGrid items={useCases} />
+      </section>
+
+      {/* FAQ + boundary */}
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1fr_0.8fr] md:items-start md:py-16">
+        <div>
+          <ToolSectionEyebrow tone="blue">{t("faqKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("faq")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedFaqList items={faqItems} />
+          </div>
+        </div>
+        <ToolBoundaryAside title={t("faqBoundaryTitle")} items={boundaryBullets} />
+      </section>
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/gtm-readiness-checklist", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/competitor-analysis/competitor-analysis.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const competitorAnalysisSpec: ToolSpec = {
+  slug: "competitor-analysis",
+  toolType: "analyzer",
+  riskLevel: "medium",
+  seo: {
+    "publishedAt": "2026-06-29",
+    "updatedAt": "2026-06-29",
+    "readingTime": "6 min",
+    "featured": false,
+    "ogImage": "/tools/competitor-radar-hero.webp"
+  },
+  widget: {"id":"competitor-analysis","mode":"custom"},
+};

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

@@ -0,0 +1,241 @@
+"use client";
+
+import { Loader2, Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+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 {
+    competitorAnalysisInputSchema,
+    type CompetitorAnalysisResult,
+} from "../../../../lib/tools/competitor-analysis-schema";
+import {
+    fetchCompetitorAnalysisTask,
+    submitCompetitorAnalysis,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { GRACE_WINDOW_MS } from "./constants";
+import { EmptyPanel, ErrorPanel, RunningPanel } from "./preview-panels";
+import { Dossier } from "./result-shell";
+import type { ErrorCategory, WidgetState } from "./types";
+
+export function CompetitorAnalysis() {
+  const t = useTranslations("toolsPages.competitorAnalysis.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [url, setUrl] = useState("");
+  const [name, setName] = useState("");
+  const [notes, setNotes] = useState("");
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+
+  const cancelledRef = useRef(false);
+  const settledRef = useRef(false);
+  const taskWatch = useLegacyLlmTaskWatch<CompetitorAnalysisResult>();
+  const { brief: activityBrief } = useToolHandoff();
+
+  function cleanup() {
+    taskWatch.stop();
+  }
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      taskWatch.stop();
+    };
+  }, [taskWatch]);
+
+  useEffect(() => {
+    if (!activityBrief || state.phase !== "done") return;
+    publishActivityArtifact(
+      activityBrief,
+      inferDurableActivityArtifact(state.data, state.taskId),
+    );
+  }, [activityBrief, state]);
+
+  function finishDone(data: CompetitorAnalysisResult, 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 fetchCompetitorAnalysisTask(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 };
+    }
+    return { settled: false as const };
+  }
+
+  async function startAnalysis() {
+    const parsed = competitorAnalysisInputSchema.safeParse({
+      competitorUrl: url,
+      competitorName: name || undefined,
+      notes: notes || undefined,
+    });
+    if (!parsed.success) {
+      setFieldError(t("errors.invalidUrl"));
+      return;
+    }
+    setFieldError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+
+    let taskId: string;
+    try {
+      const submitted = await submitCompetitorAnalysis(parsed.data, locale);
+      taskId = submitted.taskId;
+      console.info("[workspace-tool-qa] competitor-analysis", 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: (data) => finishDone(data, 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-6 lg:grid-cols-[0.82fr_1.18fr] lg:items-start">
+      <div className="rounded-[1.5rem] border border-[#E2E6EC] bg-white p-5 shadow-[0_14px_38px_rgba(7,93,245,0.06)] md:p-6">
+        <Field label={t("urlLabel")}>
+          <Input
+            type="url"
+            inputMode="url"
+            placeholder={t("urlPlaceholder")}
+            value={url}
+            onChange={(event) => setUrl(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">
+          <Field label={t("nameLabel")}>
+            <Input
+              placeholder={t("namePlaceholder")}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+        <div className="mt-4">
+          <Field label={t("notesLabel")}>
+            <Textarea
+              rows={3}
+              placeholder={t("notesPlaceholder")}
+              value={notes}
+              onChange={(event) => setNotes(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+
+        <Button
+          className="mt-5 w-full"
+          onClick={() => void startAnalysis()}
+          disabled={busy}
+        >
+          {busy ? (
+            <>
+              <Loader2 className="size-4 animate-spin" aria-hidden />
+              {state.phase === "submitting" ? t("submitting") : t("running")}
+            </>
+          ) : (
+            <>
+              <Search className="size-4" aria-hidden />
+              {t("submit")}
+            </>
+          )}
+        </Button>
+        <p className="mt-3 text-xs leading-5 text-[#8A8A8A]">{t("inputHint")}</p>
+      </div>
+
+      <div className="min-h-[22rem]">
+        {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 startAnalysis()}
+          />
+        ) : null}
+
+        {state.phase === "done" ? (
+          <Dossier data={state.data} t={t} onReset={reset} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import type { CompetitorConfidence } from "../../../../lib/tools/competitor-analysis-schema";
+
+export const GRACE_WINDOW_MS = 420_000;
+
+export const CONFIDENCE_STYLE: Record<CompetitorConfidence, string> = {
+  high: "bg-[#E6F7EC] text-[#15803D]",
+  medium: "bg-[#FEF3C7] text-[#92600A]",
+  low: "bg-[#F1F2F4] text-[#6B7280]",
+};

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

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const CompetitorAnalysis = dynamic(() =>
+  import("./competitor-analysis").then((module) => module.CompetitorAnalysis),
+);

package/src/features/tools/competitor-analysis/widget/preview-panels.tsx

@@ -0,0 +1,60 @@
+import { Compass, Loader2, RefreshCw } from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+
+export function EmptyPanel({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className="flex h-full min-h-[22rem] flex-col items-center justify-center rounded-[1.5rem] border border-dashed border-[#D7DCE3] bg-[#FAFBFC] p-8 text-center">
+      <span className="flex size-12 items-center justify-center rounded-full bg-[#EAF1FF] text-[#075DF5]">
+        <Compass className="size-6" aria-hidden />
+      </span>
+      <p className="mt-4 text-base font-semibold text-[#111111]">{title}</p>
+      <p className="mt-2 max-w-sm text-sm leading-6 text-[#777777]">{hint}</p>
+    </div>
+  );
+}
+
+export function RunningPanel({
+  title,
+  hint,
+  statusLabel,
+}: {
+  title: string;
+  hint: string;
+  statusLabel: string;
+}) {
+  return (
+    <div className="flex h-full min-h-[22rem] flex-col items-center justify-center rounded-[1.5rem] border border-[#E2E6EC] bg-white p-8 text-center shadow-[0_14px_38px_rgba(7,93,245,0.06)]">
+      <span className="flex size-12 items-center justify-center rounded-full bg-[#EAF1FF] text-[#075DF5]">
+        <Loader2 className="size-6 animate-spin" aria-hidden />
+      </span>
+      <p className="mt-4 text-base font-semibold text-[#111111]">{title}</p>
+      <p className="mt-2 max-w-sm text-sm leading-6 text-[#777777]">{hint}</p>
+      {statusLabel ? (
+        <span className="mt-4 rounded-full bg-[#F2F5F9] px-3 py-1 text-xs font-semibold text-[#55708A]">
+          {statusLabel}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function ErrorPanel({
+  message,
+  retryLabel,
+  onRetry,
+}: {
+  message: string;
+  retryLabel: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="flex h-full min-h-[22rem] flex-col items-center justify-center rounded-[1.5rem] border border-[#F3D2C9] bg-[#FFF6F2] p-8 text-center">
+      <p className="max-w-sm text-sm leading-6 text-[#9A3412]">{message}</p>
+      <Button variant="outline" className="mt-5" onClick={onRetry}>
+        <RefreshCw className="size-4" aria-hidden />
+        {retryLabel}
+      </Button>
+    </div>
+  );
+}