@tomako/tools-runtime 0.1.0

package/src/features/tools/build-in-public-story-generator/widget/preview-panels.tsx

@@ -0,0 +1,58 @@
+"use client";
+import Image from "next/image";
+import type { GeneratorState } from "./types";
+
+export function PreviewPanel({
+  state,
+  labels,
+  status,
+  visualAlt,
+}: {
+  state: GeneratorState;
+  labels: readonly string[];
+  status: string;
+  visualAlt: string;
+}) {
+  const score =
+    state.phase === "done" ? state.result.summary.transparencyScore : null;
+
+  return (
+    <aside className="grid gap-5 bg-white p-5 md:p-7">
+      <figure className="relative min-h-[280px] overflow-hidden rounded-[1.5rem] border border-[#E1DDD3]">
+        <Image
+          alt={visualAlt}
+          className="object-cover"
+          fill
+          sizes="(min-width: 1024px) 520px, 100vw"
+          src="/tools/build-in-public-story-generator-workspace.webp"
+        />
+      </figure>
+      <div className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4">
+        <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">
+            {status}
+          </span>
+          <span className="text-3xl font-semibold text-[#111111]">
+            {score ?? "--"}
+          </span>
+        </div>
+        <div className="mt-4 h-2 overflow-hidden rounded-full bg-white">
+          <div
+            className="h-full rounded-full bg-[#D85A3A] transition-all"
+            style={{ width: `${score ?? 0}%` }}
+          />
+        </div>
+        <div className="mt-5 grid gap-2">
+          {labels.map((label) => (
+            <div
+              className="rounded-2xl border border-[#E1DDD3] bg-white px-3 py-2 text-sm font-medium text-[#3D3D3D]"
+              key={label}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/features/tools/build-in-public-story-generator/widget/result-shell.tsx

@@ -0,0 +1,164 @@
+"use client";
+import {
+    ToolResultActions,
+    ToolResultHeader
+} from "../../../../components/tools/workspace";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    type BuildInPublicChannel,
+    type BuildInPublicStoryResult
+} from "../../../../lib/tools/build-in-public-story-generator-schema";
+import { cn } from "@tomako/ui/cn";
+
+export function StoryResult({
+  activeChannel,
+  channelLabels,
+  copied,
+  onActiveChannelChange,
+  onCopy,
+  onDownload,
+  onReset,
+  result,
+  t,
+}: {
+  activeChannel: BuildInPublicChannel;
+  channelLabels: Record<BuildInPublicChannel, string>;
+  copied: boolean;
+  onActiveChannelChange: (channel: BuildInPublicChannel) => void;
+  onCopy: () => void;
+  onDownload: () => void;
+  onReset: () => void;
+  result: BuildInPublicStoryResult;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <div className="grid gap-5">
+      <ToolResultHeader
+        eyebrow={t("resultReady")}
+        title={`${result.summary.transparencyScore}/100`}
+        body={result.summary.storyAngle}
+        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 xl:grid-cols-[0.7fr_1fr]">
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <h4 className="text-base font-semibold text-[#111111]">
+            {t("primaryRisk")}
+          </h4>
+          <p className="mt-3 text-sm leading-6 text-[#3D3D3D]">
+            {result.summary.primaryRisk}
+          </p>
+          <h4 className="mt-6 text-base font-semibold text-[#111111]">
+            {t("recommendedLead")}
+          </h4>
+          <p className="mt-3 text-sm leading-6 text-[#3D3D3D]">
+            {result.summary.recommendedLead}
+          </p>
+        </div>
+        <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+          <h4 className="text-base font-semibold text-[#111111]">
+            {t("evidenceGaps")}
+          </h4>
+          <PillList items={result.checks.evidenceGaps} />
+        </div>
+      </div>
+
+      <Tabs
+        onValueChange={(value) => onActiveChannelChange(value as BuildInPublicChannel)}
+        value={activeChannel}
+      >
+        <TabsList className="h-auto flex-wrap justify-start gap-2 rounded-2xl border-[#D8D4CA] bg-[#F8F7F2] p-2">
+          {result.drafts.map((draft) => (
+            <TabsTrigger
+              className="h-10 rounded-xl border border-transparent px-3 text-sm data-[state=active]:border-[#111111] data-[state=active]:bg-white data-[state=active]:shadow-none"
+              key={draft.channel}
+              value={draft.channel}
+            >
+              {channelLabels[draft.channel]}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {result.drafts.map((draft) => (
+          <TabsContent className="mt-4" key={draft.channel} value={draft.channel}>
+            <article className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+              <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
+                <div>
+                  <p className="text-xs font-semibold uppercase text-[#777777]">
+                    {channelLabels[draft.channel]}
+                  </p>
+                  <h4 className="mt-2 text-xl font-semibold text-[#111111]">
+                    {draft.title}
+                  </h4>
+                  <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">
+                    {draft.fitNote}
+                  </p>
+                </div>
+              </div>
+              <pre className="mt-5 whitespace-pre-wrap rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-4 text-sm leading-6 text-[#2A2A2A]">
+                {draft.body}
+              </pre>
+            </article>
+          </TabsContent>
+        ))}
+      </Tabs>
+
+      <div className="grid gap-4 xl:grid-cols-3">
+        <ResultBlock title={t("authenticityIssues")}>
+          <PillList items={result.checks.authenticityIssues} />
+        </ResultBlock>
+        <ResultBlock title={t("communityFit")}>
+          <PillList items={result.checks.communityFit} />
+        </ResultBlock>
+        <ResultBlock title={t("reviewChecklist")}>
+          <PillList items={result.checks.reviewChecklist} />
+        </ResultBlock>
+      </div>
+    </div>
+  );
+}
+
+export function ResultBlock({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) {
+  return (
+    <article className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+      <h4 className="mb-4 text-base font-semibold text-[#111111]">{title}</h4>
+      {children}
+    </article>
+  );
+}
+
+export function PillList({ items }: { items: readonly string[] }) {
+  if (items.length === 0) return null;
+
+  return (
+    <ul className="mt-3 grid gap-2">
+      {items.map((item) => (
+        <li
+          className={cn(
+            "rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-3 py-2 text-sm leading-6 text-[#3D3D3D]",
+          )}
+          key={item}
+        >
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/features/tools/build-in-public-story-generator/widget/types.ts

@@ -0,0 +1,6 @@
+import type { BuildInPublicStoryResult } from "../../../../lib/tools/build-in-public-story-generator-schema";
+
+export type GeneratorState =
+  | { phase: "idle" }
+  | { phase: "error"; code: "validation" | "weakInput" }
+  | { phase: "done"; result: BuildInPublicStoryResult };

package/src/features/tools/cold-start-channel-selector/cold-start-channel-selector.container.tsx

@@ -0,0 +1,30 @@
+import { Download, FileText, Route } from "lucide-react";
+
+import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
+import { ColdStartChannelSelector } from "./widget";
+
+export const ColdStartChannelSelectorContainer = createStandardLandingContainer({
+  guideNamespace: "toolsPages.coldStartChannelSelector.guide",
+  Widget: ColdStartChannelSelector,
+  benefitIcons: [FileText, Route, Download],
+  generationImageSrc: "/tools/cold-start-channel-selector-section-steps-8bit-v4.webp",
+  copyKeys: {
+    workspaceHeading: "workspaceTitle",
+    faqTitle: "faqTitle",
+    generationImageAlt: "visualAlt.useCases",
+    reportPreview: "standard.reportPreview",
+    narrativeSections: "standard.narrativeSections",
+  },
+  // The standard workspace is the first visible content for this non-immersive
+  // page, so it owns the document H1.
+  workspaceHeadingLevel: "h1",
+  passFaqToShell: false,
+  contentCtaHref: "#tool-workspace",
+  sectionOrder: [
+    "reportPreview",
+    "imageTextSections",
+    "narrative",
+    "generation",
+    "faq",
+  ],
+});

package/src/features/tools/cold-start-channel-selector/cold-start-channel-selector.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const coldStartChannelSelectorSpec: ToolSpec = {
+  slug: "cold-start-channel-selector",
+  toolType: "analyzer",
+  riskLevel: "medium",
+  seo: {
+    publishedAt: "2026-06-29",
+    updatedAt: "2026-08-03",
+    readingTime: "7 min",
+    featured: false,
+    ogImage: "/tools/cold-start-channel-selector-hero.webp",
+  },
+  widget: { id: "cold-start-channel-selector", mode: "custom" },
+};

package/src/features/tools/cold-start-channel-selector/widget/cold-start-channel-selector.tsx

@@ -0,0 +1,417 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import {
+    ToolActionBar,
+    ToolErrorBanner,
+    ToolErrorPanel,
+    ToolField,
+    ToolPreviewPanel,
+    ToolPrimaryButton,
+    ToolWorkspaceLayout,
+    toolInvalidControlClass,
+    toolInputClass,
+    toolTextareaClass,
+} from "../../../../components/tools/workspace";
+import { Input, Textarea } from "@tomako/ui/input";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    coldStartChannelSelectorInputSchema,
+    type ColdStartChannelSelectorInput,
+    type ColdStartChannelSelectorResult,
+} from "../../../../lib/tools/cold-start-channel-selector-schema";
+import {
+    fetchColdStartChannelSelectorTask,
+    submitColdStartChannelSelector,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { GRACE_WINDOW_MS, initialInput } from "./constants";
+import { SelectField } from "./form-controls";
+import { EmptyPreview, RunningPanel } from "./preview-panels";
+import { ChannelReport } from "./result-shell";
+import type { ErrorCategory, LoadingStep, Option, WidgetState } from "./types";
+
+type FormFieldErrors = Partial<
+  Record<"productUrl" | "productDescription", string>
+>;
+
+export function ColdStartChannelSelector() {
+  const t = useTranslations("toolsPages.coldStartChannelSelector.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [input, setInput] = useState<ColdStartChannelSelectorInput>(initialInput);
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<FormFieldErrors>({});
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+
+  const cancelledRef = useRef(false);
+  const settledRef = useRef(false);
+  const productUrlRef = useRef<HTMLInputElement | null>(null);
+  const productDescriptionRef = useRef<HTMLTextAreaElement | null>(null);
+  const taskWatch = useLegacyLlmTaskWatch<ColdStartChannelSelectorResult>();
+
+  const productFormOptions = t.raw("productFormOptions") as Option[];
+  const marketOptions = t.raw("marketOptions") as Option[];
+  const stageOptions = t.raw("stageOptions") as Option[];
+  const weeklyHoursOptions = t.raw("weeklyHoursOptions") as Option[];
+  const budgetOptions = t.raw("budgetOptions") as Option[];
+  const loadingSteps = t.raw("loadingSteps") as readonly LoadingStep[];
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+
+  function cleanup() {
+    taskWatch.stop();
+  }
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      taskWatch.stop();
+    };
+  }, [taskWatch]);
+
+  function updateInput<K extends keyof ColdStartChannelSelectorInput>(
+    key: K,
+    value: ColdStartChannelSelectorInput[K],
+  ) {
+    setInput((current) => ({ ...current, [key]: value }));
+    if (key === "productUrl" || key === "productDescription") {
+      setFieldErrors((current) => ({ ...current, [key]: undefined }));
+      setFieldError(null);
+    }
+  }
+
+  function finishDone(data: ColdStartChannelSelectorResult) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "done", data });
+  }
+
+  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 fetchColdStartChannelSelectorTask(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 = coldStartChannelSelectorInputSchema.safeParse(input);
+    if (!parsed.success) {
+      const hasWeakDescription = parsed.error.issues.some(
+        (issue) => issue.path[0] === "productDescription",
+      );
+      const hasInvalidUrl = parsed.error.issues.some(
+        (issue) => issue.path[0] === "productUrl" && Boolean(input.productUrl),
+      );
+      const error = hasWeakDescription
+        ? t("errors.weakDescription")
+        : hasInvalidUrl
+          ? t("errors.invalidUrl")
+          : t("errors.missingInput");
+      const errorField = hasWeakDescription ? "productDescription" : "productUrl";
+      setFieldError(error);
+      setFieldErrors({ [errorField]: error });
+      window.requestAnimationFrame(() => {
+        (errorField === "productDescription" ? productDescriptionRef : productUrlRef).current?.focus();
+      });
+      setState({ phase: "error", category: "validation" });
+      return;
+    }
+
+    setFieldError(null);
+    setFieldErrors({});
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+
+    let taskId: string;
+    try {
+      const submitted = await submitColdStartChannelSelector(parsed.data, locale);
+      taskId = submitted.taskId;
+      console.info("[workspace-tool-qa] cold-start-channel-selector", 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),
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
+      },
+      { graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function resetResult() {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "idle" });
+  }
+
+  return (
+    <ToolWorkspaceLayout
+      className="lg:h-[min(760px,calc(100vh-220px))] lg:min-h-[620px]"
+      defaultFormWidth={470}
+      maxFormWidth={560}
+      form={
+        <form
+          className="flex min-h-full flex-col"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            void startAnalysis();
+          }}
+        >
+          <div className="-mx-1 min-w-0 flex-1 space-y-4 overflow-x-hidden px-1 pb-5">
+            {fieldError ? <ToolErrorBanner>{fieldError}</ToolErrorBanner> : null}
+
+            <ToolField
+              error={fieldErrors.productUrl}
+              errorId="cold-start-product-url-error"
+              htmlFor="cold-start-product-url"
+              label={t("productUrlLabel")}
+            >
+              <Input
+                ref={productUrlRef}
+                aria-describedby={
+                  fieldErrors.productUrl ? "cold-start-product-url-error" : undefined
+                }
+                aria-invalid={Boolean(fieldErrors.productUrl)}
+                className={`${toolInputClass} ${
+                  fieldErrors.productUrl ? toolInvalidControlClass : ""
+                }`}
+                disabled={busy}
+                id="cold-start-product-url"
+                inputMode="url"
+                placeholder={t("productUrlPlaceholder")}
+                type="url"
+                value={input.productUrl ?? ""}
+                onChange={(event) => updateInput("productUrl", event.target.value || undefined)}
+              />
+            </ToolField>
+
+            <ToolField
+              error={fieldErrors.productDescription}
+              errorId="cold-start-product-description-error"
+              htmlFor="cold-start-product-description"
+              hint={t("descriptionHint")}
+              label={t("descriptionLabel")}
+            >
+              <Textarea
+                ref={productDescriptionRef}
+                aria-describedby={
+                  fieldErrors.productDescription
+                    ? "cold-start-product-description-error"
+                    : undefined
+                }
+                aria-invalid={Boolean(fieldErrors.productDescription)}
+                className={`${toolTextareaClass} ${
+                  fieldErrors.productDescription ? toolInvalidControlClass : ""
+                }`}
+                disabled={busy}
+                id="cold-start-product-description"
+                placeholder={t("descriptionPlaceholder")}
+                rows={4}
+                value={input.productDescription ?? ""}
+                onChange={(event) =>
+                  updateInput("productDescription", event.target.value || undefined)
+                }
+              />
+            </ToolField>
+
+            <SelectField
+              disabled={busy}
+              label={t("productFormLabel")}
+              options={productFormOptions}
+              value={input.productForm}
+              onValueChange={(value) =>
+                updateInput("productForm", value as ColdStartChannelSelectorInput["productForm"])
+              }
+            />
+            <SelectField
+              disabled={busy}
+              label={t("marketLabel")}
+              options={marketOptions}
+              value={input.targetMarket}
+              onValueChange={(value) =>
+                updateInput("targetMarket", value as ColdStartChannelSelectorInput["targetMarket"])
+              }
+            />
+            <SelectField
+              disabled={busy}
+              label={t("stageLabel")}
+              options={stageOptions}
+              value={input.stage}
+              onValueChange={(value) =>
+                updateInput("stage", value as ColdStartChannelSelectorInput["stage"])
+              }
+            />
+
+            <button
+              className="text-sm font-normal text-[#111111] underline underline-offset-4 disabled:text-[#A8B3C4]"
+              disabled={busy}
+              type="button"
+              onClick={() => setShowAdvanced((value) => !value)}
+            >
+              {showAdvanced ? t("hideAdvanced") : t("showAdvanced")}
+            </button>
+
+            {showAdvanced ? (
+              <div className="space-y-4 rounded-lg bg-[#F8FAFC] p-4">
+                <SelectField
+                  disabled={busy}
+                  label={t("hoursLabel")}
+                  options={weeklyHoursOptions}
+                  value={input.weeklyHours}
+                  onValueChange={(value) =>
+                    updateInput("weeklyHours", value as ColdStartChannelSelectorInput["weeklyHours"])
+                  }
+                />
+                <SelectField
+                  disabled={busy}
+                  label={t("budgetLabel")}
+                  options={budgetOptions}
+                  value={input.budget}
+                  onValueChange={(value) =>
+                    updateInput("budget", value as ColdStartChannelSelectorInput["budget"])
+                  }
+                />
+                <ToolField label={t("audienceLabel")}>
+                  <Input
+                    className={toolInputClass}
+                    disabled={busy}
+                    placeholder={t("audiencePlaceholder")}
+                    value={input.targetAudience ?? ""}
+                    onChange={(event) =>
+                      updateInput("targetAudience", event.target.value || undefined)
+                    }
+                  />
+                </ToolField>
+                <ToolField label={t("assetsLabel")}>
+                  <Textarea
+                    className={toolTextareaClass}
+                    disabled={busy}
+                    placeholder={t("assetsPlaceholder")}
+                    rows={3}
+                    value={input.existingAssets ?? ""}
+                    onChange={(event) =>
+                      updateInput("existingAssets", event.target.value || undefined)
+                    }
+                  />
+                </ToolField>
+                <ToolField label={t("triedLabel")}>
+                  <Textarea
+                    className={toolTextareaClass}
+                    disabled={busy}
+                    placeholder={t("triedPlaceholder")}
+                    rows={3}
+                    value={input.triedChannels ?? ""}
+                    onChange={(event) =>
+                      updateInput("triedChannels", event.target.value || undefined)
+                    }
+                  />
+                </ToolField>
+                <ToolField label={t("constraintsLabel")}>
+                  <Textarea
+                    className={toolTextareaClass}
+                    disabled={busy}
+                    placeholder={t("constraintsPlaceholder")}
+                    rows={3}
+                    value={input.constraints ?? ""}
+                    onChange={(event) =>
+                      updateInput("constraints", event.target.value || undefined)
+                    }
+                  />
+                </ToolField>
+              </div>
+            ) : null}
+
+            <p className="text-xs leading-5 text-[#666666]">{t("inputHint")}</p>
+          </div>
+
+          <ToolActionBar attached>
+            <ToolPrimaryButton disabled={busy} type="submit">
+              {state.phase === "submitting" ? t("submitting") : busy ? t("running") : t("submit")}
+            </ToolPrimaryButton>
+          </ToolActionBar>
+        </form>
+      }
+      preview={
+        <ToolPreviewPanel>
+          {state.phase === "idle" ? (
+            <EmptyPreview
+              body={t("previewSubtitle")}
+              steps={t.raw("previewSteps") as readonly string[]}
+              title={t("previewTitle")}
+            />
+          ) : (
+            <>
+              <div className="shrink-0">
+                <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+                  {state.phase === "done"
+                    ? t("reportTitle")
+                    : state.phase === "error"
+                      ? t("errorTitle")
+                      : t("runningTitle")}
+                </h3>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">{t("rightPanelHint")}</p>
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto pt-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+                {state.phase === "submitting" || state.phase === "running" ? (
+                  <RunningPanel
+                    statusLabel={t("runningStatusLabel")}
+                    steps={loadingSteps}
+                    tip={t("loadingTip")}
+                    tipLabel={t("runningTipLabel")}
+                  />
+                ) : state.phase === "error" ? (
+                  <div className="flex min-h-full items-center">
+                    <ToolErrorPanel body={t(`errors.${state.category}`)} title={t("errorTitle")} />
+                  </div>
+                ) : (
+                  <ChannelReport data={state.data} t={t} onReset={resetResult} />
+                )}
+              </div>
+            </>
+          )}
+        </ToolPreviewPanel>
+      }
+    />
+  );
+}