@tomako/tools-runtime 0.1.0

package/src/components/tools/engine/result-view.tsx

@@ -0,0 +1,596 @@
+"use client";
+
+import {
+  Check,
+  CheckCircle2,
+  Copy,
+  ListChecks,
+  MessageSquareText,
+  Target,
+} from "lucide-react";
+import { useState } from "react";
+
+import { useLocale, useTranslations } from "../../../i18n/client";
+import { cn } from "@tomako/ui/cn";
+import { pickL10n } from "../../../features/tools/package/l10n";
+import {
+  asRecordList,
+  asStringList,
+  getResultPath,
+} from "../../../features/tools/package/result-markdown";
+import type {
+  CardListBlock,
+  ResultViewBlock,
+  StrategicCurveBlock,
+} from "../../../features/tools/package/types";
+import type { AppLocale } from "../../../i18n/locale";
+
+const toneStyles = {
+  neutral: "border-[#D8D4CA] bg-white",
+  positive: "border-[#CBE3C4] bg-[#F3FBEF]",
+  risk: "border-[#F2D2B8] bg-[#FFF7EE]",
+} as const;
+
+const curvePalette = [
+  "#111111",
+  "#2563EB",
+  "#C2410C",
+  "#7C3AED",
+  "#0F766E",
+  "#BE123C",
+  "#A16207",
+  "#4F46E5",
+  "#4D7C0F",
+];
+
+function isScoreSeries(
+  value: unknown,
+  dimensionCount: number,
+  maxScore: number,
+): value is number[] {
+  return (
+    Array.isArray(value) &&
+    value.length === dimensionCount &&
+    value.every(
+      (score) =>
+        typeof score === "number" &&
+        Number.isFinite(score) &&
+        score >= 0 &&
+        score <= maxScore,
+    )
+  );
+}
+
+export type ResultViewVariant = "default" | "workspace";
+
+function SectionHeading({
+  title,
+  variant,
+}: {
+  title: string;
+  variant: ResultViewVariant;
+}) {
+  const isWorkspace = variant === "workspace";
+  return (
+    <div className={cn("flex items-center gap-2", isWorkspace ? "mb-3" : "mb-4")}>
+      {!isWorkspace ? (
+        <span className="flex size-9 items-center justify-center rounded-full bg-[#F2C66D] text-[#111111]">
+          <Target aria-hidden className="size-4" />
+        </span>
+      ) : null}
+      <h3 className={cn("font-semibold text-[#111111]", isWorkspace ? "text-base" : "text-lg")}>
+        {title}
+      </h3>
+    </div>
+  );
+}
+
+/** instant 工具主产出（URL、代码片段等）：等宽展示 + 单值复制。 */
+function CopyableValue({
+  label,
+  text,
+  variant,
+}: {
+  label: string;
+  text: string;
+  variant: ResultViewVariant;
+}) {
+  const t = useTranslations("toolsPages.engine");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "border border-[#D8D4CA] bg-[#FAF9F5] p-3",
+        variant === "workspace" ? "rounded-lg" : "rounded-2xl",
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-xs font-semibold uppercase tracking-[0.06em] text-[#777777]">
+          {label}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={cn(
+            "inline-flex shrink-0 items-center gap-1.5 border border-[#CFC9BC] bg-white px-3 py-1 text-xs font-semibold text-[#111111] transition hover:bg-[#F4F2EC]",
+            variant === "workspace" ? "rounded-md" : "rounded-full",
+          )}
+        >
+          {copied ? (
+            <Check aria-hidden className="size-3.5 text-[#3F6B2A]" />
+          ) : (
+            <Copy aria-hidden className="size-3.5" />
+          )}
+          {copied ? t("copied") : t("copyValue")}
+        </button>
+      </div>
+      <p className="mt-2 break-all font-mono text-sm leading-6 text-[#111111]">{text}</p>
+    </div>
+  );
+}
+
+function BulletList({
+  items,
+  tone = "neutral",
+  variant,
+}: {
+  items: string[];
+  tone?: keyof typeof toneStyles;
+  variant: ResultViewVariant;
+}) {
+  const isWorkspace = variant === "workspace";
+  return (
+    <ul className="grid gap-2">
+      {items.map((item) => (
+        <li
+          key={item}
+          className={cn(
+            "flex items-start gap-2 border px-4 py-3 text-sm leading-6 text-[#3D3D3D]",
+            isWorkspace ? "rounded-lg" : "rounded-2xl",
+            toneStyles[tone],
+          )}
+        >
+          {isWorkspace ? (
+            <span className="mt-2 size-1.5 shrink-0 rounded-full bg-[#777777]" />
+          ) : (
+            <CheckCircle2 aria-hidden className="mt-0.5 size-4 shrink-0 text-[#7A9B69]" />
+          )}
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** 卡片标题旁的单条复制按钮（cardList titleCopyable）。 */
+function CopyTitleButton({
+  text,
+  variant,
+}: {
+  text: string;
+  variant: ResultViewVariant;
+}) {
+  const t = useTranslations("toolsPages.engine");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      aria-label={t("copyValue")}
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1 border border-[#CFC9BC] bg-white px-2.5 py-1 text-xs font-semibold text-[#111111] transition hover:bg-[#F4F2EC]",
+        variant === "workspace" ? "rounded-md" : "rounded-full",
+      )}
+    >
+      {copied ? (
+        <Check aria-hidden className="size-3.5 text-[#3F6B2A]" />
+      ) : (
+        <Copy aria-hidden className="size-3.5" />
+      )}
+      {copied ? t("copied") : t("copyValue")}
+    </button>
+  );
+}
+
+function CardListView({
+  block,
+  result,
+  locale,
+  variant,
+}: {
+  block: CardListBlock;
+  result: unknown;
+  locale: AppLocale;
+  variant: ResultViewVariant;
+}) {
+  const isWorkspace = variant === "workspace";
+  const rows = asRecordList(getResultPath(result, block.path));
+  if (!rows.length) return null;
+
+  return (
+    <section>
+      <SectionHeading title={pickL10n(block.title, locale)} variant={variant} />
+      <div className={cn("grid gap-3", block.layout === "grid" && "md:grid-cols-2")}>
+        {rows.map((row, index) => {
+          const title = String(row[block.card.titleField] ?? "");
+          const meta = block.card.metaField ? row[block.card.metaField] : undefined;
+          const body = block.card.body ? row[block.card.body.field] : undefined;
+          const footer = block.card.footer ? row[block.card.footer.field] : undefined;
+          return (
+            <article
+              key={`${title}-${index}`}
+              className={cn(
+                "border border-[#D8D4CA] bg-white p-5",
+                isWorkspace
+                  ? "rounded-lg"
+                  : "rounded-[1.25rem] shadow-[0_12px_28px_rgba(17,17,17,0.05)]",
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <h4 className="text-base font-semibold leading-tight text-[#111111]">{title}</h4>
+                <div className="flex shrink-0 items-center gap-2">
+                  {meta != null && meta !== "" ? (
+                    <span
+                      className={cn(
+                        "px-3 py-1 text-xs font-semibold",
+                        isWorkspace
+                          ? "rounded-md bg-[#F1F2F4] text-[#555555]"
+                          : "rounded-full bg-[#111111] text-white",
+                      )}
+                    >
+                      {String(meta)}
+                      {block.card.metaSuffix ? pickL10n(block.card.metaSuffix, locale) : ""}
+                    </span>
+                  ) : null}
+                  {block.card.titleCopyable && title ? (
+                    <CopyTitleButton text={title} variant={variant} />
+                  ) : null}
+                </div>
+              </div>
+              {typeof body === "string" && body.trim() ? (
+                <p className="mt-2 text-sm leading-6 text-[#555555]">
+                  {block.card.body?.label ? (
+                    <span className="font-semibold text-[#111111]">
+                      {pickL10n(block.card.body.label, locale)}:{" "}
+                    </span>
+                  ) : null}
+                  {body}
+                </p>
+              ) : null}
+              {(block.card.lists ?? []).map((listSpec) => {
+                const items = asStringList(row[listSpec.field]);
+                if (!items.length) return null;
+                return (
+                  <div key={listSpec.field} className="mt-3">
+                    <p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.06em] text-[#777777]">
+                      {!isWorkspace ? <ListChecks aria-hidden className="size-3.5" /> : null}
+                      {pickL10n(listSpec.label, locale)}
+                    </p>
+                    <ul className="mt-1.5 list-disc space-y-1 pl-5 text-sm leading-6 text-[#555555]">
+                      {items.map((item) => (
+                        <li key={item}>{item}</li>
+                      ))}
+                    </ul>
+                  </div>
+                );
+              })}
+              {typeof footer === "string" && footer.trim() ? (
+                <p className="mt-3 rounded-2xl border border-[#F2D2B8] bg-[#FFF7EE] px-3 py-2 text-sm leading-6 text-[#7A4B22]">
+                  {block.card.footer?.label ? (
+                    <span className="font-semibold">
+                      {pickL10n(block.card.footer.label, locale)}:{" "}
+                    </span>
+                  ) : null}
+                  {footer}
+                </p>
+              ) : null}
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function StrategicCurveView({
+  block,
+  result,
+  locale,
+  variant,
+}: {
+  block: StrategicCurveBlock;
+  result: unknown;
+  locale: AppLocale;
+  variant: ResultViewVariant;
+}) {
+  const dimensions = pickL10n(block.dimensions, locale);
+  const rows = asRecordList(getResultPath(result, block.path))
+    .map((row, index) => {
+      const player = row[block.playerField];
+      const values = row[block.valuesField];
+      if (
+        typeof player !== "string" ||
+        !player.trim() ||
+        !isScoreSeries(values, dimensions.length, block.maxScore)
+      ) {
+        return null;
+      }
+
+      return {
+        player,
+        values,
+        color: curvePalette[index % curvePalette.length] ?? "#111111",
+      };
+    })
+    .filter(
+      (
+        row,
+      ): row is { player: string; values: number[]; color: string } => row !== null,
+    );
+
+  if (!rows.length || !dimensions.length) return null;
+
+  const isWorkspace = variant === "workspace";
+  const chartWidth = 760;
+  const chartHeight = 260;
+  const left = 38;
+  const right = 18;
+  const top = 18;
+  const bottom = 20;
+  const plotWidth = chartWidth - left - right;
+  const plotHeight = chartHeight - top - bottom;
+  const ticks = Array.from({ length: block.maxScore + 1 }, (_, index) => index);
+  const pointFor = (score: number, index: number) => {
+    const x = left + (plotWidth * index) / (dimensions.length - 1 || 1);
+    const y = top + ((block.maxScore - score) / block.maxScore) * plotHeight;
+    return `${x},${y}`;
+  };
+
+  return (
+    <section>
+      <SectionHeading title={pickL10n(block.title, locale)} variant={variant} />
+      <div
+        className={cn(
+          "overflow-x-auto border border-[#D8D4CA] bg-white p-4",
+          isWorkspace ? "rounded-lg" : "rounded-[1.25rem]",
+        )}
+      >
+        <div className="min-w-[42rem]">
+          <svg
+            viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+            role="img"
+            aria-label={pickL10n(block.title, locale)}
+            className="h-auto w-full"
+          >
+            {ticks.map((tick) => {
+              const y = top + ((block.maxScore - tick) / block.maxScore) * plotHeight;
+              return (
+                <g key={tick}>
+                  <line
+                    x1={left}
+                    x2={chartWidth - right}
+                    y1={y}
+                    y2={y}
+                    stroke="#E8E5DE"
+                    strokeWidth="1"
+                  />
+                  <text
+                    x={left - 8}
+                    y={y + 4}
+                    textAnchor="end"
+                    fill="#777777"
+                    fontSize="11"
+                  >
+                    {tick}
+                  </text>
+                </g>
+              );
+            })}
+            {rows.map((row) => (
+              <g key={row.player}>
+                <polyline
+                  fill="none"
+                  points={row.values.map(pointFor).join(" ")}
+                  stroke={row.color}
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                {row.values.map((score, index) => {
+                  const [cx, cy] = pointFor(score, index).split(",");
+                  return <circle key={`${row.player}-${index}`} cx={cx} cy={cy} r="4" fill={row.color} />;
+                })}
+              </g>
+            ))}
+          </svg>
+          <div
+            className="mt-2 grid gap-2 text-center text-xs leading-4 text-[#555555]"
+            style={{ gridTemplateColumns: `repeat(${dimensions.length}, minmax(0, 1fr))` }}
+          >
+            {dimensions.map((dimension) => (
+              <span key={dimension}>{dimension}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-sm text-[#3D3D3D]">
+        {rows.map((row) => (
+          <span key={row.player} className="inline-flex items-center gap-2">
+            <span className="size-2.5 rounded-full" style={{ backgroundColor: row.color }} />
+            {row.player}
+          </span>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function ResultView({
+  view,
+  result,
+  variant = "default",
+}: {
+  view: ResultViewBlock[];
+  result: unknown;
+  variant?: ResultViewVariant;
+}) {
+  const locale = useLocale() as AppLocale;
+  const isWorkspace = variant === "workspace";
+
+  return (
+    <div className={cn("grid", isWorkspace ? "gap-6" : "gap-8")}>
+      {view.map((block, index) => {
+        if (block.block === "keyValues") {
+          const entries = block.items
+            .map((item) => {
+              const value = getResultPath(result, item.path);
+              const text =
+                typeof value === "string" && value.trim()
+                  ? value
+                  : asStringList(value).join(" · ");
+              return text
+                ? {
+                    label: pickL10n(item.label, locale),
+                    text,
+                    copyable: item.copyable === true,
+                  }
+                : null;
+            })
+            .filter(
+              (entry): entry is { label: string; text: string; copyable: boolean } =>
+                entry !== null,
+            );
+          if (!entries.length) return null;
+          return (
+            <section key={index}>
+              {block.title ? (
+                <SectionHeading title={pickL10n(block.title, locale)} variant={variant} />
+              ) : null}
+              <div
+                className={cn(
+                  "grid gap-2 border border-[#D8D4CA] bg-white p-5",
+                  isWorkspace ? "rounded-lg" : "rounded-[1.25rem]",
+                )}
+              >
+                {entries.map((entry) =>
+                  entry.copyable ? (
+                    <CopyableValue
+                      key={entry.label}
+                      label={entry.label}
+                      text={entry.text}
+                      variant={variant}
+                    />
+                  ) : (
+                    <p key={entry.label} className="text-sm leading-6 text-[#3D3D3D]">
+                      <span className="font-semibold text-[#111111]">{entry.label}: </span>
+                      {entry.text}
+                    </p>
+                  ),
+                )}
+              </div>
+            </section>
+          );
+        }
+
+        if (block.block === "bulletList") {
+          const items = asStringList(getResultPath(result, block.path));
+          if (!items.length) return null;
+          return (
+            <section key={index}>
+              <SectionHeading title={pickL10n(block.title, locale)} variant={variant} />
+              <BulletList
+                items={items}
+                tone={block.tone ?? "neutral"}
+                variant={variant}
+              />
+            </section>
+          );
+        }
+
+        if (block.block === "bulletGroups") {
+          const columns = block.columns
+            .map((column) => ({
+              label: pickL10n(column.label, locale),
+              tone: column.tone ?? "neutral",
+              items: asStringList(getResultPath(result, column.path)),
+            }))
+            .filter((column) => column.items.length > 0);
+          if (!columns.length) return null;
+          return (
+            <section key={index}>
+              {block.title ? (
+                <SectionHeading title={pickL10n(block.title, locale)} variant={variant} />
+              ) : null}
+              <div className={cn("grid gap-4", columns.length > 1 && "lg:grid-cols-3 md:grid-cols-2")}>
+                {columns.map((column) => (
+                  <div
+                    key={column.label}
+                    className={cn(
+                      "border p-4",
+                      isWorkspace ? "rounded-lg" : "rounded-[1.25rem]",
+                      toneStyles[column.tone],
+                    )}
+                  >
+                    <p className="flex items-center gap-1.5 text-sm font-semibold text-[#111111]">
+                      {!isWorkspace ? <MessageSquareText aria-hidden className="size-4" /> : null}
+                      {column.label}
+                    </p>
+                    <ul className="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-[#555555]">
+                      {column.items.map((item) => (
+                        <li key={item}>{item}</li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </section>
+          );
+        }
+
+        if (block.block === "strategicCurve") {
+          return (
+            <StrategicCurveView
+              key={index}
+              block={block}
+              result={result}
+              locale={locale}
+              variant={variant}
+            />
+          );
+        }
+
+        return (
+          <CardListView
+            key={index}
+            block={block}
+            result={result}
+            locale={locale}
+            variant={variant}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/tools/engine/use-legacy-llm-task.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+import {
+  watchLlmTask,
+  type LlmTaskWatchPollOutcome,
+} from "../../../host/client";
+
+export type LegacyTaskErrorCategory = "task" | "schema" | "timeout";
+
+export type LegacyTaskWatchHandlers<TResult> = {
+  onStatus: (status: string) => void;
+  onSuccess: (data: TResult) => void;
+  onError: (category: LegacyTaskErrorCategory) => void;
+};
+
+/**
+ * Legacy custom widget 任务监听：封装 watchLlmTask（SSE + 自适应轮询），
+ * 替代各 widget 内手写的 setInterval / 重复 SSE 逻辑。
+ */
+export function useLegacyLlmTaskWatch<TResult>() {
+  const stopRef = useRef<(() => void) | null>(null);
+  const cancelledRef = useRef(false);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    return () => {
+      cancelledRef.current = true;
+      stopRef.current?.();
+    };
+  }, []);
+
+  const stop = useCallback(() => {
+    stopRef.current?.();
+    stopRef.current = null;
+  }, []);
+
+  const start = useCallback(
+    (
+      taskId: string,
+      pollOnce: (taskId: string) => Promise<LlmTaskWatchPollOutcome>,
+      handlers: LegacyTaskWatchHandlers<TResult>,
+      options?: { pollIntervalMs?: number; graceWindowMs?: number },
+    ) => {
+      stop();
+      stopRef.current = watchLlmTask({
+        taskId,
+        pollOnce,
+        handlers: {
+          onStatus: handlers.onStatus,
+          onSuccess: (data: TResult) => handlers.onSuccess(data as TResult),
+          onError: handlers.onError,
+        },
+        isCancelled: () => cancelledRef.current,
+        pollIntervalMs: options?.pollIntervalMs,
+        graceWindowMs: options?.graceWindowMs,
+      });
+    },
+    [stop],
+  );
+
+  return { start, stop, isCancelled: () => cancelledRef.current };
+}