@tomako/tools-runtime 0.1.0

package/src/features/tools/shared/tool-cta.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+import type { AppLocale } from "../../../i18n/locale";
+import { localizedPath } from "../../../lib/routing/locale-paths";
+import type { ToolCtaLink } from "../types";
+
+function ctaHref(href: string, locale?: AppLocale) {
+  return locale && href.startsWith("/") ? localizedPath(locale, href) : href;
+}
+
+export function ToolCta({
+  heading,
+  hint,
+  primary,
+  secondary,
+  locale,
+  tone = "lime",
+}: {
+  heading?: string;
+  hint?: string;
+  primary: ToolCtaLink;
+  secondary?: ToolCtaLink;
+  locale?: AppLocale;
+  tone?: "lime" | "neutral";
+}) {
+  const isNeutral = tone === "neutral";
+
+  return (
+    <div
+      className={`rounded-[1.75rem] border p-6 shadow-[0_24px_70px_rgba(17,17,17,0.12)] md:p-8 ${
+        isNeutral
+          ? "border-[#E8E4DB] bg-white text-[#111111]"
+          : "border-[#E8E4DB] bg-[#111111] text-white"
+      }`}
+    >
+      {heading ? <h2 className="text-2xl font-semibold leading-tight">{heading}</h2> : null}
+      {hint ? (
+        <p className={`max-w-2xl text-sm leading-6 ${isNeutral ? "text-[#555555]" : "text-white/72"}`}>
+          {hint}
+        </p>
+      ) : null}
+      <div className={`flex flex-wrap gap-3 ${heading || hint ? "mt-5" : ""}`}>
+        <Link
+          className={`inline-flex min-h-11 items-center rounded-full px-5 text-sm font-semibold transition hover:-translate-y-0.5 ${
+            isNeutral ? "bg-[#111111] text-white" : "bg-[#B7FF3E] text-[#111111]"
+          }`}
+          href={ctaHref(primary.href, locale)}
+        >
+          {primary.label}
+        </Link>
+        {secondary ? (
+          <Link
+            className={`inline-flex min-h-11 items-center rounded-full border px-5 text-sm font-semibold transition hover:-translate-y-0.5 ${
+              isNeutral
+                ? "border-[#D8D4CA] bg-white text-[#111111] hover:border-[#111111]"
+                : "border-white/18 bg-white/8 text-white hover:bg-white/12"
+            }`}
+            href={ctaHref(secondary.href, locale)}
+          >
+            {secondary.label}
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/features/tools/shared/tool-draft-view.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { useMemo } from "react";
+
+import { useTranslations } from "../../../i18n/client";
+import { routing, type AppLocale } from "../../../i18n/locale";
+import { getToolDraftBySlug } from "../../../lib/tools/draft-store";
+
+const DraftToolWidgetSlot = dynamic(() =>
+  import("./tool-widget-slot").then(
+    (module) => module.ToolWidgetSlot,
+  ),
+);
+
+export function ToolDraftView({ slug }: { slug: string }) {
+  const params = useParams<{ locale: string }>();
+  const locale = routing.locales.includes(params.locale as AppLocale)
+    ? (params.locale as AppLocale)
+    : routing.defaultLocale;
+  const t = useTranslations("toolsUi");
+  const draft = useMemo(() => getToolDraftBySlug(slug) ?? null, [slug]);
+
+  if (!draft) {
+    return (
+      <main className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-12">
+        <Link className="text-sm text-foreground underline" href="/tools">
+          {t("backToTools")}
+        </Link>
+        <p className="text-base text-muted-foreground">{t("draftNotFound")}</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-12">
+      <Link className="text-sm text-foreground underline" href="/tools">
+        {t("backToTools")}
+      </Link>
+      <p className="text-xs font-semibold uppercase text-muted-foreground">
+        {draft.toolType} · {t("draftPreview")}
+      </p>
+      <h1 className="text-3xl font-semibold leading-tight">{draft.toolName}</h1>
+      <p className="text-base text-muted-foreground">{draft.rawIntent}</p>
+      <DraftToolWidgetSlot widgetId={draft.widgetId} locale={locale} />
+      <p className="text-xs text-muted-foreground">
+        {t("draftSlugHint", { slug: draft.slug })}
+      </p>
+    </main>
+  );
+}

package/src/features/tools/shared/tool-guide-section.tsx

@@ -0,0 +1,191 @@
+import type { ReactNode } from "react";
+import Image from "next/image";
+
+type VisualTone = "lime" | "blue" | "coral" | "wine";
+
+const toneStyles: Record<
+  VisualTone,
+  { surface: string; accent: string; soft: string; border: string; text: string }
+> = {
+  lime: {
+    surface: "bg-[#F4F5ED]",
+    accent: "bg-[#B7FF3E]",
+    soft: "bg-[#F7FFE9]",
+    border: "border-[#DCE9CA]",
+    text: "text-[#111111]",
+  },
+  blue: {
+    surface: "bg-[#E8F5FF]",
+    accent: "bg-[#075DF5]",
+    soft: "bg-white/72",
+    border: "border-[#CFE7F8]",
+    text: "text-white",
+  },
+  coral: {
+    surface: "bg-[#FFF4EC]",
+    accent: "bg-[#FF5A2E]",
+    soft: "bg-white/72",
+    border: "border-[#F4D8CA]",
+    text: "text-white",
+  },
+  wine: {
+    surface: "bg-[#FFF5F8]",
+    accent: "bg-[#96002D]",
+    soft: "bg-white/72",
+    border: "border-[#E9CBD5]",
+    text: "text-white",
+  },
+};
+
+export function ToolWorkspaceSection({
+  heading,
+  hint,
+  badge,
+  action,
+  headingLevel = "h2",
+  children,
+}: {
+  heading: string;
+  hint: string;
+  badge?: string;
+  action?: ReactNode;
+  headingLevel?: "h1" | "h2";
+  children: ReactNode;
+}) {
+  const HeadingTag = headingLevel;
+
+  return (
+    <section
+      aria-labelledby="tool-workspace"
+      className="py-10 md:py-12"
+    >
+      <div className="mb-7 flex flex-col justify-between gap-4 md:flex-row md:items-start">
+        <div>
+          <HeadingTag id="tool-workspace" className="text-2xl font-semibold leading-tight text-[#111111] md:text-3xl">
+            {heading}
+          </HeadingTag>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-[#555555]">{hint}</p>
+        </div>
+        {badge || action ? (
+          <div className="flex flex-wrap items-center gap-2">
+            {badge ? (
+              <span className="w-fit rounded-lg border border-[#E1DDD3] bg-white px-3 py-1.5 text-xs font-semibold text-[#555555] shadow-[0_8px_18px_rgba(17,17,17,0.04)]">
+                {badge}
+              </span>
+            ) : null}
+            {action}
+          </div>
+        ) : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function ToolGuideSection({
+  heading,
+  children,
+  visual,
+  reverse = false,
+}: {
+  heading: string;
+  children: ReactNode;
+  visual: ReactNode;
+  reverse?: boolean;
+}) {
+  return (
+    <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-2 md:items-center md:py-16">
+      <div className={reverse ? "md:order-2" : ""}>
+        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+          {heading}
+        </h2>
+        <div className="mt-5 flex flex-col gap-4 text-[#3D3D3D]">{children}</div>
+      </div>
+      <div className={reverse ? "md:order-1" : ""}>{visual}</div>
+    </section>
+  );
+}
+
+export function ToolGuideVisual({
+  title,
+  caption,
+  items,
+  tone = "lime",
+}: {
+  title: string;
+  caption?: string;
+  items?: readonly string[];
+  tone?: VisualTone;
+}) {
+  const styles = toneStyles[tone];
+
+  return (
+    <div className={`overflow-hidden rounded-[1.75rem] border ${styles.border} ${styles.surface} p-5 md:p-6`}>
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+            {title}
+          </p>
+          {caption ? (
+            <p className="mt-2 max-w-sm text-sm leading-6 text-[#555555]">{caption}</p>
+          ) : null}
+        </div>
+        <span className={`flex size-12 shrink-0 items-center justify-center rounded-full ${styles.accent} ${styles.text}`}>
+          <span className="size-4 rounded-full bg-current" />
+        </span>
+      </div>
+
+      <div className="mt-8 grid gap-3">
+        {(items ?? []).slice(0, 4).map((item, index) => (
+          <div
+            key={item}
+            className={`flex items-center gap-3 rounded-2xl border ${styles.border} ${styles.soft} px-4 py-3`}
+          >
+            <span className={`flex size-8 shrink-0 items-center justify-center rounded-full ${styles.accent} text-xs font-semibold ${styles.text}`}>
+              {index + 1}
+            </span>
+            <span className="line-clamp-2 text-sm font-semibold leading-5 text-[#111111]">
+              {item}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-8 grid grid-cols-3 gap-3">
+        <span className={`h-20 rounded-[1.25rem] ${styles.accent}`} />
+        <span className={`h-20 rounded-[1.25rem] ${styles.soft}`} />
+        <span className="h-20 rounded-[1.25rem] bg-white/88" />
+      </div>
+    </div>
+  );
+}
+
+export function ToolImageVisual({
+  src,
+  alt,
+  priority = false,
+  wide = false,
+}: {
+  src: string;
+  alt: string;
+  priority?: boolean;
+  wide?: boolean;
+}) {
+  return (
+    <figure className="overflow-hidden rounded-[1.5rem]">
+      <Image
+        src={src}
+        alt={alt}
+        width={1672}
+        height={941}
+        priority={priority}
+        sizes={
+          wide
+            ? "(min-width: 1024px) 1120px, 100vw"
+            : "(min-width: 1024px) 520px, (min-width: 768px) 50vw, 100vw"
+        }
+        className="block h-auto w-full object-cover"
+      />
+    </figure>
+  );
+}

package/src/features/tools/shared/tool-handoff.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+import type {
+  ActivityArtifactRef,
+  ActivityTaskBrief,
+} from "../../../lib/activity-task-handoff";
+
+export type ToolHandoffAdapter = {
+  brief: ActivityTaskBrief | null;
+  artifact: ActivityArtifactRef | null;
+};
+
+export const NOOP_TOOL_HANDOFF: ToolHandoffAdapter = {
+  brief: null,
+  artifact: null,
+};
+
+const ToolHandoffContext = createContext<ToolHandoffAdapter>(NOOP_TOOL_HANDOFF);
+
+export function ToolHandoffProvider({
+  adapter = null,
+  children,
+}: {
+  adapter?: ToolHandoffAdapter | null;
+  children: ReactNode;
+}) {
+  return (
+    <ToolHandoffContext.Provider value={adapter ?? NOOP_TOOL_HANDOFF}>
+      {children}
+    </ToolHandoffContext.Provider>
+  );
+}
+
+export function useToolHandoff(): ToolHandoffAdapter {
+  return useContext(ToolHandoffContext);
+}

package/src/features/tools/shared/tool-mcp-badge.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+import type { AppLocale } from "../../../i18n/locale";
+import { localizedPath } from "../../../lib/routing/locale-paths";
+
+export function ToolMcpBadge({
+  slug,
+  label,
+  locale,
+}: {
+  slug: string;
+  label: string;
+  locale: AppLocale;
+}) {
+  return (
+    <Link
+      className="w-fit rounded-full border border-[#D8D4CA] bg-white px-3 py-1.5 text-xs font-semibold text-[#111111] transition hover:bg-[#F4F1EA]"
+      href={localizedPath(locale, `/mcp/${slug}`)}
+    >
+      {label}
+    </Link>
+  );
+}

package/src/features/tools/shared/tool-message-translator.ts

@@ -0,0 +1,37 @@
+import { createTranslator } from "next-intl";
+
+import { getFullMessages } from "../../../host/server";
+import type { AppLocale } from "../../../i18n/locale";
+
+/**
+ * Loose translator for dynamic toolsPages.* namespaces.
+ * next-intl's typed keys collapse to `never` when namespace is a runtime string.
+ */
+export type ToolMessageTranslator = {
+  (key: string): string;
+  raw: (key: string) => unknown;
+};
+
+export async function loadToolMessages(locale: AppLocale) {
+  return getFullMessages(locale);
+}
+
+export function createToolMessageTranslator(
+  locale: AppLocale,
+  messages: Awaited<ReturnType<typeof getFullMessages>>,
+  namespace: string,
+): ToolMessageTranslator {
+  return createTranslator({
+    locale,
+    messages,
+    namespace,
+  }) as unknown as ToolMessageTranslator;
+}
+
+export async function createToolGuideTranslator(
+  locale: AppLocale,
+  namespace: string,
+): Promise<ToolMessageTranslator> {
+  const messages = await loadToolMessages(locale);
+  return createToolMessageTranslator(locale, messages, namespace);
+}