@tomako/tools-runtime 0.1.0

package/src/components/tools/engine/package-widget-runtime.tsx

@@ -0,0 +1,409 @@
+"use client";
+
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ClipboardList,
+  Copy,
+  Loader2,
+  RotateCcw,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { useLocale, useTranslations } from "../../../i18n/client";
+import { Button } from "@tomako/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tomako/ui/select";
+import { cn } from "@tomako/ui/cn";
+import { useToolHandoff } from "../../../features/tools/shared/tool-handoff";
+import {
+  createActivityArtifactRef,
+  inferDurableActivityArtifact,
+  publishActivityArtifact,
+} from "../../../lib/activity-task-handoff";
+import {
+  DEFAULT_DIRECT_MODEL_OPTION,
+  DIRECT_MODEL_OPTIONS,
+  resolveDirectModel,
+  type DirectModelOptionId,
+} from "../../../features/tools/package/direct-models";
+import { pickL10n, pickL10nOptional } from "../../../features/tools/package/l10n";
+import {
+  getDefaultFormValues,
+  validateFormValues,
+} from "../../../features/tools/package/form";
+import { resultToMarkdown } from "../../../features/tools/package/result-markdown";
+import type {
+  FormValues,
+  ToolPackage,
+} from "../../../features/tools/package/types";
+import type { AppLocale } from "../../../i18n/locale";
+
+import { FormBuilder } from "./form-builder";
+import { ResultView } from "./result-view";
+import { LOCAL_TASK_IDS, useToolTask, type EngineErrorCode } from "./use-tool-task";
+import { copyTextToClipboard } from "../workspace/tool-result-file-actions";
+
+function statusKey(phase: string, status?: string): string {
+  if (phase === "submitting") return "submitting";
+  if (phase === "running") {
+    return status === "SUCCEEDED" || status === "AWAITING_INPUT"
+      ? "awaitingResult"
+      : "running";
+  }
+  if (phase === "done") return "done";
+  if (phase === "error") return "error";
+  return "idle";
+}
+
+export type PackageWidgetVariant = "default" | "workspace";
+
+export function PackageWidgetRuntime({
+  pkg,
+  variant,
+}: {
+  pkg: ToolPackage;
+  variant: PackageWidgetVariant;
+}) {
+  const locale = useLocale() as AppLocale;
+  const t = useTranslations("toolsPages.engine");
+  const { state, start, reset } = useToolTask(pkg, locale);
+  const resultRef = useRef<HTMLElement | null>(null);
+  const artifactRegistrationRef = useRef<string | null>(null);
+  const { brief: activityBrief } = useToolHandoff();
+  const [values, setValues] = useState<FormValues>(() =>
+    getDefaultFormValues(pkg.form),
+  );
+  const [invalidFields, setInvalidFields] = useState<readonly string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const [modelOption, setModelOption] = useState<DirectModelOptionId>(
+    DEFAULT_DIRECT_MODEL_OPTION,
+  );
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const isWorkspace = variant === "workspace";
+
+  const errorCopy = (code: EngineErrorCode) => {
+    const override = pkg.widget.errorOverrides?.[code];
+    if (override) {
+      return {
+        title: pickL10n(override.title, locale),
+        body: pickL10n(override.body, locale),
+      };
+    }
+    return { title: t(`errors.${code}.title`), body: t(`errors.${code}.body`) };
+  };
+
+  const markdown = useMemo(() => {
+    if (state.phase !== "done") return "";
+    return resultToMarkdown(
+      pickL10n(pkg.copy.title, locale),
+      state.data,
+      pkg.resultView,
+      locale,
+    );
+  }, [locale, pkg, state]);
+
+  const handleSubmit = () => {
+    const invalid = validateFormValues(pkg.form, values);
+    setInvalidFields(invalid);
+    if (invalid.length > 0) {
+      window.requestAnimationFrame(() => {
+        document
+          .querySelector<HTMLElement>(`[data-field-id="${invalid[0]}"]`)
+          ?.focus();
+      });
+      return;
+    }
+    void start(values, { directModel: resolveDirectModel(modelOption) });
+  };
+
+  const handleReset = () => {
+    setValues(getDefaultFormValues(pkg.form));
+    setInvalidFields([]);
+    setCopied(false);
+    reset();
+  };
+
+  const handleCopy = async () => {
+    const copiedToClipboard = await copyTextToClipboard(markdown);
+    if (copiedToClipboard) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const currentStatus = statusKey(
+    state.phase,
+    state.phase === "running" ? state.status : undefined,
+  );
+
+  useEffect(() => {
+    if (state.phase !== "done" || !isWorkspace) return;
+    resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, [isWorkspace, state.phase]);
+
+  useEffect(() => {
+    if (!activityBrief || state.phase !== "done") return;
+    const immediate = inferDurableActivityArtifact(state.data, state.taskId);
+    if (immediate) {
+      publishActivityArtifact(activityBrief, immediate);
+      return;
+    }
+
+    // Direct tools return structured content but no task id. Register that
+    // content in the existing artifact store before offering task completion.
+    const registrationKey = `${activityBrief.activityId}:${activityBrief.taskId}:${markdown}`;
+    if (!markdown || artifactRegistrationRef.current === registrationKey) return;
+    artifactRegistrationRef.current = registrationKey;
+    void import("../../../host/client")
+      .then(({ registerActivityToolArtifact }) =>
+        registerActivityToolArtifact({
+          brief: activityBrief,
+          title: pickL10n(pkg.copy.title, locale),
+          contentText: markdown,
+        }),
+      )
+      .then((registered) => {
+        publishActivityArtifact(
+          activityBrief,
+          createActivityArtifactRef("artifact", registered.artifactUid),
+        );
+      })
+      .catch(() => {
+        // No durable ref means the handoff remains explicitly incomplete.
+        artifactRegistrationRef.current = null;
+      });
+  }, [activityBrief, locale, markdown, pkg.copy.title, state]);
+
+  return (
+    <div className={cn("grid", isWorkspace ? "gap-4" : "gap-6")}>
+      <section
+        className={cn(
+          "overflow-hidden border bg-white",
+          isWorkspace
+            ? "rounded-xl border-border shadow-[var(--shadow-sm)]"
+            : "rounded-[1.5rem] border-[#D8D4CA] shadow-[0_18px_60px_rgba(17,17,17,0.08)]",
+        )}
+      >
+        <div className={cn("bg-white p-5", !isWorkspace && "md:p-7")}>
+          <div className={cn("flex flex-wrap items-center justify-between gap-3", isWorkspace ? "mb-5" : "mb-6")}>
+            <div>
+              <p
+                className={cn(
+                  "font-semibold",
+                  isWorkspace
+                    ? "text-[15px] text-[#111111]"
+                    : "inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs text-white",
+                )}
+              >
+                {!isWorkspace ? (
+                  <ClipboardList aria-hidden className="size-4 text-[#F2C66D]" />
+                ) : null}
+                {pickL10n(pkg.widget.formTitle, locale)}
+              </p>
+              <p className={cn("max-w-2xl text-sm leading-6 text-[#555555]", isWorkspace ? "mt-1" : "mt-3")}>
+                {pickL10n(pkg.widget.formHint, locale)}
+              </p>
+            </div>
+            {!isWorkspace || currentStatus !== "idle" ? (
+              <span
+                className={cn(
+                  "px-3 py-1.5 text-xs font-semibold",
+                  isWorkspace ? "rounded-md" : "rounded-full",
+                  currentStatus === "done"
+                    ? "bg-[#E7F6DC] text-[#3F6B2A]"
+                    : currentStatus === "error"
+                      ? "bg-[#FDEBE3] text-[#B3401F]"
+                      : "bg-[#F4F2EC] text-[#555555]",
+                )}
+              >
+                {t(`status.${currentStatus}`)}
+              </span>
+            ) : null}
+          </div>
+
+          <FormBuilder
+            form={pkg.form}
+            values={values}
+            invalidFields={invalidFields}
+            disabled={busy}
+            defaultInvalidMessage={t("invalidField")}
+            collapseAdvanced={isWorkspace}
+            advancedLabel={t("advancedSettings")}
+            onChange={(id, value) => {
+              setValues((prev) => ({ ...prev, [id]: value }));
+              setInvalidFields((prev) => prev.filter((field) => field !== id));
+            }}
+          />
+
+          <div className={cn("mt-6 flex flex-wrap items-center gap-3", isWorkspace && "sm:flex-nowrap")}>
+            {pkg.runtime.lane === "direct" && !isWorkspace ? (
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-semibold text-[#555555]">
+                  {t("modelLabel")}
+                </span>
+                <Select
+                  value={modelOption}
+                  disabled={busy}
+                  onValueChange={(value) =>
+                    setModelOption(value as DirectModelOptionId)
+                  }
+                >
+                  <SelectTrigger
+                    data-testid="direct-model-select"
+                    className="h-12 min-w-36 rounded-full border-[#CFC9BC] px-4 text-sm font-semibold"
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DIRECT_MODEL_OPTIONS.map((option) => (
+                      <SelectItem key={option.id} value={option.id}>
+                        {t(`modelOptions.${option.labelKey}`)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : null}
+            <Button
+              type="button"
+              disabled={busy}
+              onClick={handleSubmit}
+              className={cn(
+                "h-12 bg-[#111111] px-6 text-sm font-semibold text-white hover:bg-[#2B211A]",
+                isWorkspace ? "min-w-0 flex-1 rounded-lg" : "rounded-full",
+              )}
+            >
+              {busy && !isWorkspace ? (
+                <>
+                  <Loader2 aria-hidden className="size-4 animate-spin" />
+                  {t("submitting")}
+                </>
+              ) : (
+                busy
+                  ? t("submitting")
+                  : (pickL10nOptional(pkg.widget.submitLabel, locale) ?? t("submit"))
+              )}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={busy}
+              onClick={handleReset}
+              className={cn(
+                "h-12 border-[#CFC9BC] px-5 text-sm font-semibold",
+                isWorkspace ? "rounded-lg" : "rounded-full",
+              )}
+            >
+              {!isWorkspace ? <RotateCcw aria-hidden className="size-4" /> : null}
+              {t("reset")}
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {state.phase === "error" ? (
+        <section
+          role="alert"
+          className={cn(
+            "border border-[#F2C4AC] bg-[#FFF4EC] p-5",
+            isWorkspace ? "rounded-xl" : "rounded-[1.5rem] md:p-6",
+          )}
+        >
+          <div className="flex items-start gap-3">
+            <AlertTriangle aria-hidden className="mt-0.5 size-5 shrink-0 text-[#B3401F]" />
+            <div>
+              <h3 className="text-base font-semibold text-[#7A2E12]">
+                {errorCopy(state.code).title}
+              </h3>
+              <p className="mt-1 text-sm leading-6 text-[#7A4B22]">
+                {errorCopy(state.code).body}
+              </p>
+              {state.taskId ? (
+                <p className="mt-2 text-xs text-[#9A6B4A]">
+                  {t("taskId", { taskId: state.taskId })}
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </section>
+      ) : null}
+
+      {busy ? (
+        <section
+          aria-live="polite"
+          className={cn(
+            "border bg-white p-6",
+            isWorkspace
+              ? "rounded-xl border-border"
+              : "rounded-[1.5rem] border-[#D8D4CA] md:p-8",
+          )}
+        >
+          <div className="flex items-center gap-3">
+            <Loader2 aria-hidden className="size-5 animate-spin text-[#111111]" />
+            <h3 className="text-base font-semibold text-[#111111]">
+              {pickL10nOptional(pkg.widget.pendingTitle, locale) ?? t("pendingTitle")}
+            </h3>
+          </div>
+          <p className="mt-2 text-sm leading-6 text-[#555555]">
+            {pickL10nOptional(pkg.widget.pendingHint, locale) ?? t("pendingHint")}
+          </p>
+          {state.phase === "running" && !LOCAL_TASK_IDS.includes(state.taskId) ? (
+            <p className="mt-3 text-xs text-[#999999]">
+              {t("taskId", { taskId: state.taskId })}
+            </p>
+          ) : null}
+        </section>
+      ) : null}
+
+      {state.phase === "done" ? (
+        <section
+          ref={resultRef}
+          className={cn(
+            "scroll-mt-4 border bg-white p-5",
+            isWorkspace
+              ? "rounded-xl border-border"
+              : "rounded-[1.5rem] border-[#D8D4CA] md:p-7",
+          )}
+        >
+          <div className={cn("flex flex-wrap items-center justify-between gap-3", isWorkspace ? "mb-5" : "mb-6")}>
+            <p className={cn("inline-flex items-center gap-2 bg-[#E7F6DC] px-3 py-1.5 text-xs font-semibold text-[#3F6B2A]", isWorkspace ? "rounded-md" : "rounded-full")}>
+              <CheckCircle2 aria-hidden className="size-4" />
+              {pickL10nOptional(pkg.widget.resultTitle, locale) ?? t("resultReady")}
+            </p>
+            <div className="flex items-center gap-3">
+              {!LOCAL_TASK_IDS.includes(state.taskId) ? (
+                <span className="text-xs text-[#999999]">
+                  {t("taskId", { taskId: state.taskId })}
+                </span>
+              ) : null}
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleCopy}
+                className={cn(
+                  "h-10 border-[#CFC9BC] px-4 text-sm font-semibold",
+                  isWorkspace ? "rounded-lg" : "rounded-full",
+                )}
+              >
+                <Copy aria-hidden className="size-4" />
+                {copied ? t("copied") : t("copyMarkdown")}
+              </Button>
+            </div>
+          </div>
+          <ResultView
+            view={pkg.resultView}
+            result={state.data}
+            variant={isWorkspace ? "workspace" : "default"}
+          />
+        </section>
+      ) : null}
+    </div>
+  );
+}

package/src/components/tools/engine/package-widget.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+import type { ToolPackage } from "../../../features/tools/package/types";
+
+import {
+  PackageWidgetRuntime,
+  type PackageWidgetVariant,
+} from "./package-widget-runtime";
+
+interface BoundPackageWidgetProps {
+  variant?: PackageWidgetVariant;
+}
+
+function bindPackage(pkg: ToolPackage) {
+  return function BoundPackageWidget({
+    variant = "default",
+  }: BoundPackageWidgetProps) {
+    return <PackageWidgetRuntime pkg={pkg} variant={variant} />;
+  };
+}
+
+const packageWidgets: Record<
+  string,
+  React.ComponentType<BoundPackageWidgetProps>
+> = {
+  "user-interview-guide-generator": dynamic(() =>
+    import(
+      "../../../features/tools/user-interview-guide-generator/user-interview-guide-generator.package"
+    ).then((module) => bindPackage(module.userInterviewGuideGeneratorPackage)),
+  ),
+  "utm-builder": dynamic(() =>
+    import("../../../features/tools/utm-builder/utm-builder.package").then((module) =>
+      bindPackage(module.utmBuilderPackage),
+    ),
+  ),
+  "slogan-generator": dynamic(() =>
+    import("../../../features/tools/slogan-generator/slogan-generator.package").then(
+      (module) => bindPackage(module.sloganGeneratorPackage),
+    ),
+  ),
+  "investor-matching-planner": dynamic(() =>
+    import(
+      "../../../features/tools/investor-matching-planner/investor-matching-planner.package"
+    ).then((module) => bindPackage(module.investorMatchingPlannerPackage)),
+  ),
+  "disclaimer-generator": dynamic(() =>
+    import(
+      "../../../features/tools/disclaimer-generator/disclaimer-generator.package"
+    ).then((module) => bindPackage(module.disclaimerGeneratorPackage)),
+  ),
+  "product-positioning-analyzer": dynamic(() =>
+    import(
+      "../../../features/tools/product-positioning-analyzer/product-positioning-analyzer.package"
+    ).then((module) => bindPackage(module.productPositioningAnalyzerPackage)),
+  ),
+  "community-post-risk-checker": dynamic(() =>
+    import(
+      "../../../features/tools/community-post-risk-checker/community-post-risk-checker.package"
+    ).then((module) => bindPackage(module.communityPostRiskCheckerPackage)),
+  ),
+};
+
+export function PackageWidget({
+  slug,
+  variant = "default",
+}: {
+  slug: string;
+  variant?: PackageWidgetVariant;
+}) {
+  const Widget = packageWidgets[slug];
+  if (!Widget) {
+    throw new Error(`ToolPackage not registered for slug: ${slug}`);
+  }
+  return <Widget variant={variant} />;
+}