@ekanos/harness 0.1.0

package/dist/internal/routes/activation-page.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { notFound } from "next/navigation";
+import { Alert, AlertDescription, AlertTitle } from "@ekanos/ui/alert";
+import { Badge } from "@ekanos/ui/badge";
+import { Button } from "@ekanos/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@ekanos/ui/dialog";
+import { HARNESS_ACCOUNT_ID } from "../../registry.js";
+import { hasSensitiveValues, redactSensitive } from "../lib/redact.js";
+import { useHarnessIntegration } from "../registry-context.js";
+function ActivationPage() {
+  const [flow, setFlow] = useState({ open: true, connected: false, result: null, revealed: false });
+  const integration = useHarnessIntegration();
+  if (!integration) notFound();
+  const ActivationForm = integration.activationForm;
+  const definition = integration.definition;
+  const capabilities = definition?.capabilities ?? [];
+  const permissions = definition?.permissions ?? [];
+  const summary = definition?.description ?? integration.description;
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: "mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-8",
+      "data-test": "activation",
+      children: [
+        /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "Submissions go nowhere" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsxs("p", { children: [
+            "The harness has no backend. Submitting shows you the",
+            " ",
+            /* @__PURE__ */ jsx("code", { children: "ActivationResult" }),
+            " your form handed back instead of posting it \u2014 which is the part worth checking, since that payload is what the real activation action would persist. The dialog, the capability and permission sections and the connected state are the real ones, rendered from your ",
+            /* @__PURE__ */ jsx("code", { children: "defineIntegration()" }),
+            " ",
+            "declaration."
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-card flex flex-wrap items-center justify-between gap-3 rounded-lg border p-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: flow.connected ? "Connected" : "Not connected" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: flow.connected ? "The dialog now shows the manage view, whose only action is Disconnect." : "The dialog shows the scope disclosure and your activation form." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => setFlow((prev) => ({ ...prev, open: true })),
+                "data-test": "activation-open-dialog",
+                children: "Open connect dialog"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => setFlow({
+                  open: false,
+                  connected: false,
+                  result: null,
+                  revealed: false
+                }),
+                children: "Reset flow"
+              }
+            )
+          ] })
+        ] }),
+        ActivationForm ? /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: flow.open,
+            onOpenChange: (next) => setFlow((prev) => ({ ...prev, open: next })),
+            children: /* @__PURE__ */ jsxs(DialogContent, { "data-test": "integration-connect-dialog", children: [
+              /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-heading bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-base font-semibold", children: integration.name.trim().charAt(0).toUpperCase() || "?" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx(DialogTitle, { children: integration.name }),
+                  /* @__PURE__ */ jsx(DialogDescription, { children: summary })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex max-h-[70vh] flex-col gap-5 overflow-y-auto", children: [
+                /* @__PURE__ */ jsx(CapabilityList, { capabilities }),
+                /* @__PURE__ */ jsx(PermissionList, { permissions }),
+                flow.connected ? /* @__PURE__ */ jsx(
+                  ConnectedState,
+                  {
+                    name: integration.name,
+                    onDisconnect: () => setFlow({
+                      open: true,
+                      connected: false,
+                      result: null,
+                      revealed: false
+                    })
+                  }
+                ) : (
+                  /*
+                    `inline` is REQUIRED. Without it `BaseActivationForm` renders
+                    its own Dialog, which inside this one means nested dialogs —
+                    exactly the constraint the real host comments on.
+                  */
+                  /* @__PURE__ */ jsx(
+                    ActivationForm,
+                    {
+                      accountId: HARNESS_ACCOUNT_ID,
+                      productSlug: integration.slug,
+                      inline: true,
+                      onSuccess: (result) => setFlow({
+                        open: false,
+                        connected: true,
+                        result: result ?? null,
+                        revealed: false
+                      }),
+                      onCancel: () => setFlow((prev) => ({ ...prev, open: false }))
+                    }
+                  )
+                )
+              ] })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "This integration registers no activation form." }),
+        capabilities.length === 0 && permissions.length === 0 ? /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "No capabilities or permissions declared" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsxs("p", { children: [
+            "The connect dialog renders \u201CWhat it does\u201D from",
+            " ",
+            /* @__PURE__ */ jsx("code", { children: "capabilities" }),
+            " and \u201CWhat it can access\u201D from ",
+            /* @__PURE__ */ jsx("code", { children: "permissions" }),
+            ". This integration declares neither, so a user consents to it with no idea what it reaches \u2014 add both to ",
+            /* @__PURE__ */ jsx("code", { children: "defineIntegration()" }),
+            "."
+          ] }) })
+        ] }) : null,
+        flow.result ? /* @__PURE__ */ jsxs("div", { className: "bg-card flex flex-col gap-3 rounded-lg border p-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-heading text-lg tracking-tight", children: "Submitted payload" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              hasSensitiveValues(flow.result) ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setFlow((prev) => ({ ...prev, revealed: !prev.revealed })),
+                  "data-test": "activation-reveal-payload",
+                  children: flow.revealed ? "Hide values" : "Reveal values"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setFlow((prev) => ({
+                    ...prev,
+                    result: null,
+                    revealed: false
+                  })),
+                  children: "Clear"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("pre", { className: "bg-muted overflow-x-auto rounded-md p-3 text-xs", children: JSON.stringify(
+            flow.revealed ? flow.result : redactSensitive(flow.result),
+            null,
+            2
+          ) })
+        ] }) : null
+      ]
+    }
+  );
+}
+function CapabilityList({
+  capabilities
+}) {
+  if (capabilities.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground text-xs font-semibold tracking-wider uppercase", children: "What it does" }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: capabilities.map((capability) => /* @__PURE__ */ jsxs("li", { className: "text-foreground text-sm", children: [
+      capability.label,
+      capability.description ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        " ",
+        "\u2014 ",
+        capability.description
+      ] }) : null
+    ] }, capability.label)) })
+  ] });
+}
+function PermissionList({
+  permissions
+}) {
+  if (permissions.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground text-xs font-semibold tracking-wider uppercase", children: "What it can access" }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: permissions.map((permission) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: permission.label }),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: permission.type === "write" ? "warning" : "secondary",
+            children: permission.type === "write" ? "Write" : "Read"
+          }
+        )
+      ] }),
+      permission.detail ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: permission.detail }) : null
+    ] }, permission.label)) })
+  ] });
+}
+function ConnectedState({
+  name,
+  onDisconnect
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
+      name,
+      " is connected to your workspace."
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        className: "w-fit",
+        onClick: onDisconnect,
+        "data-test": "activation-disconnect",
+        children: "Disconnect"
+      }
+    )
+  ] });
+}
+export {
+  ActivationPage
+};

package/dist/internal/routes/index-page.d.ts

@@ -0,0 +1,13 @@
+import type { HarnessIntegration } from '../../registry.js';
+/**
+ * The landing page: every registered integration, with a link to each of its
+ * surfaces.
+ *
+ * A server component, and worth keeping one — it reads nothing but the array
+ * it is handed. The registry travels as a prop rather than through
+ * `useHarnessRegistry()` precisely so this page never needs to be a client
+ * module; the provider below it is for the routes that do.
+ */
+export declare function IndexPage({ integrations, }: {
+    integrations: HarnessIntegration[];
+}): import("react").JSX.Element;

package/dist/internal/routes/index-page.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Icon } from "@ekanos/ui/icon";
+import { HARNESS_SURFACES } from "../surfaces.js";
+function IndexPage({
+  integrations
+}) {
+  return /* @__PURE__ */ jsxs("main", { className: "mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-10", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-heading text-3xl tracking-tight", children: "Integration harness" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Every registered integration, rendered in real Fusion chrome from fixtures. No Supabase, no auth, no network." })
+    ] }),
+    integrations.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-card flex flex-col items-center gap-3 rounded-lg border p-6 text-center", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "fa-solid fa-box-open",
+          className: "text-muted-foreground h-6 w-6"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No integrations registered. Add one to your harness config at the project root." })
+    ] }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-5", "data-test": "integration-list", children: integrations.map((integration) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "bg-card shadow-card flex flex-col gap-5 rounded-lg p-6",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-3", children: [
+              /* @__PURE__ */ jsx("h2", { className: "font-heading text-xl tracking-tight", children: integration.name }),
+              /* @__PURE__ */ jsx("code", { className: "text-muted-foreground text-xs", children: integration.slug })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: integration.description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: HARNESS_SURFACES.map((surface) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: `/${integration.slug}/${surface.segment}`,
+              className: "bg-accent/50 hover:bg-accent rounded-md px-3 py-2 text-sm transition-colors",
+              children: surface.shortLabel
+            },
+            surface.segment
+          )) }),
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+            integration.widgets.length,
+            " widget",
+            integration.widgets.length === 1 ? "" : "s",
+            " \xB7",
+            " ",
+            integration.tile ? "tile" : "no tile",
+            " \xB7",
+            " ",
+            integration.activationForm ? "activation form" : "no activation form"
+          ] })
+        ]
+      },
+      integration.slug
+    )) })
+  ] });
+}
+export {
+  IndexPage
+};

package/dist/internal/routes/integration-layout.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/**
+ * Client, not server: the registry holds React component references, which
+ * cannot cross the server/client boundary as props. Every surface below reads
+ * the injected registry out of context instead.
+ */
+export declare function IntegrationLayout({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/internal/routes/integration-layout.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { notFound } from "next/navigation";
+import { Alert, AlertDescription, AlertTitle } from "@ekanos/ui/alert";
+import {
+  findEgressMismatch,
+  resolveEgress,
+  seedsForMode,
+  supportsLiveMode
+} from "../../registry.js";
+import { HarnessProviders } from "../components/harness-providers.js";
+import { SurfaceNav } from "../components/surface-nav.js";
+import { compileFixtures, needsSelfOrigin } from "../lib/http-fixtures.js";
+import { useToolbar } from "../lib/toolbar-context.js";
+import { useHarnessIntegration } from "../registry-context.js";
+function IntegrationLayout({ children }) {
+  const { state } = useToolbar();
+  const integration = useHarnessIntegration();
+  const egressMismatch = useMemo(
+    () => integration ? findEgressMismatch(integration) : null,
+    [integration]
+  );
+  const mode = supportsLiveMode(integration) && !egressMismatch ? state.dataMode : "fixtures";
+  const seeds = useMemo(
+    () => integration ? seedsForMode(integration, state.variant, mode) : [],
+    [integration, state.variant, mode]
+  );
+  const egress = useMemo(
+    () => integration ? resolveEgress(integration) : [],
+    [integration]
+  );
+  const httpFixtures = useMemo(() => {
+    if (!integration) return [];
+    const declared = integration.fixtures?.[state.variant] ?? [];
+    const selfOrigin = globalThis.location?.origin;
+    if (selfOrigin !== void 0) {
+      return compileFixtures(declared, egress, selfOrigin);
+    }
+    return compileFixtures(
+      declared.filter((fixture) => !needsSelfOrigin(fixture)),
+      egress
+    );
+  }, [integration, state.variant, egress]);
+  if (!integration) notFound();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(SurfaceNav, { integration }),
+    egressMismatch ? /* @__PURE__ */ jsx(EgressMismatchNotice, { mismatch: egressMismatch }) : null,
+    /* @__PURE__ */ jsx(
+      HarnessProviders,
+      {
+        seeds,
+        mode,
+        ...integration.live && !egressMismatch ? { live: integration.live } : {},
+        egress,
+        httpFixtures,
+        slug: integration.slug,
+        children
+      },
+      `${mode}-${state.variant}`
+    )
+  ] });
+}
+function EgressMismatchNotice({ mismatch }) {
+  return /* @__PURE__ */ jsx("div", { className: "px-6 pt-6", "data-test": "egress-mismatch", children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: "Live mode is disabled: `live.egress` declares origins your integration does not" }),
+    /* @__PURE__ */ jsxs(AlertDescription, { children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "These origins are in your harness entry's",
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "live.egress" }),
+        " but not in",
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "defineIntegration({ egress })" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-1", children: mismatch.undeclared.map((origin) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { className: "text-sm", children: origin }) }, origin)) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3", children: "The definition is what a reviewer reads and what production enforces, so running live against a wider list would prove nothing about the integration we actually ship. Import the same constant into both \u2014 never retype it \u2014 and this goes away." })
+    ] })
+  ] }) });
+}
+export {
+  IntegrationLayout
+};

package/dist/internal/routes/root-layout.d.ts

@@ -0,0 +1,34 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import type { HarnessIntegration } from '../../registry.js';
+/**
+ * The `<html>`/`<body>` shell and every provider that has to sit above all
+ * routes.
+ *
+ * THE CLIENT BOUNDARY OF THE WHOLE HARNESS, and it has to be — the registry is
+ * the reason. A `HarnessIntegration` holds live React component references
+ * (`widgets[].component`, `tile`, `activationForm`) and, once a definition is
+ * linked, MCP tool `run` functions. Functions cannot be serialized across the
+ * server/client boundary, so a SERVER `RootLayout` handing this array to the
+ * client `HarnessRegistryProvider` fails the build outright:
+ *
+ *     Functions cannot be passed directly to Client Components …
+ *       {name: …, description: …, parameters: …, run: function run, …}
+ *
+ * The old app dodged this by having each client route import the registry
+ * module directly — the exact coupling this package exists to break. Injecting
+ * it instead means the boundary must sit ABOVE the injection point, which is
+ * here.
+ *
+ * Almost nothing is lost: every route, the toolbar and all four providers were
+ * already `'use client'`. `metadata` is unaffected — it is exported from the
+ * shell's own `app/layout.tsx`, which stays a server module, and `IndexPage`
+ * stays a server component because the shell's `app/page.tsx` renders it and
+ * passes the result down as `children`.
+ *
+ * `integrations` is the partner's registry, handed down from the shell's
+ * `app/layout.tsx`. Nothing in this package imports it.
+ */
+export declare function RootLayout({ integrations, children, }: {
+    integrations: HarnessIntegration[];
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/internal/routes/root-layout.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconStyleOverrideProvider } from "@ekanos/ui/icon";
+import { cn } from "@ekanos/ui/utils";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import { ThemeProvider } from "next-themes";
+import { DevToolbar } from "../components/dev-toolbar.js";
+import { I18nProvider } from "../components/i18n-provider.js";
+import { fontVariables } from "../lib/fonts.js";
+import { ToolbarProvider } from "../lib/toolbar-context.js";
+import { HarnessRegistryProvider } from "../registry-context.js";
+function RootLayout({
+  integrations,
+  children
+}) {
+  return /* @__PURE__ */ jsx("html", { lang: "en", className: fontVariables, suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(
+    "body",
+    {
+      className: cn("bg-background text-foreground min-h-screen antialiased"),
+      children: /* @__PURE__ */ jsx(IconStyleOverrideProvider, { value: "solid", children: /* @__PURE__ */ jsx(HarnessRegistryProvider, { integrations, children: /* @__PURE__ */ jsx(I18nProvider, { children: /* @__PURE__ */ jsx(
+        ThemeProvider,
+        {
+          attribute: "class",
+          defaultTheme: "light",
+          enableSystem: false,
+          enableColorScheme: false,
+          disableTransitionOnChange: true,
+          children: /* @__PURE__ */ jsxs(ToolbarProvider, { children: [
+            /* @__PURE__ */ jsx(DevToolbar, {}),
+            children
+          ] })
+        }
+      ) }) }) })
+    }
+  ) });
+}
+export {
+  RootLayout
+};

package/dist/internal/routes/single-widget-page.d.ts

@@ -0,0 +1,6 @@
+/**
+ * One widget, full width, for focused iteration. Uses the same grid as the
+ * multi-widget page — a single `full`-width entry — so what you tune here is
+ * what you get over there.
+ */
+export declare function SingleWidgetPage(): import("react").JSX.Element;

package/dist/internal/routes/single-widget-page.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { notFound } from "next/navigation";
+import { findWidget } from "../../registry.js";
+import { WidgetSurface } from "../components/widget-surface.js";
+import { useHarnessIntegration, useHarnessWidgetId } from "../registry-context.js";
+function SingleWidgetPage() {
+  const integration = useHarnessIntegration();
+  const widgetId = useHarnessWidgetId();
+  if (!integration) notFound();
+  const widget = findWidget(integration, widgetId);
+  if (!widget) notFound();
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      className: "mx-auto w-full max-w-4xl px-6 py-8",
+      "data-test": "single-widget",
+      children: /* @__PURE__ */ jsx(
+        WidgetSurface,
+        {
+          widgets: [{ ...widget, width: "full" }],
+          productSlug: integration.slug
+        }
+      )
+    }
+  );
+}
+export {
+  SingleWidgetPage
+};

package/dist/internal/routes/tile-page.d.ts

@@ -0,0 +1 @@
+export declare function TilePage(): import("react").JSX.Element;

package/dist/internal/routes/tile-page.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { notFound } from "next/navigation";
+import { Alert, AlertDescription, AlertTitle } from "@ekanos/ui/alert";
+import { HARNESS_ACCOUNT_ID } from "../../registry.js";
+import { ViewportFrame } from "../components/viewport-frame.js";
+import { useHarnessIntegration } from "../registry-context.js";
+const NEIGHBOURS = [
+  {
+    name: "Google Workspace",
+    description: "Mail, calendar and drive on the dashboard, and available to the assistant.",
+    vendor: "Google"
+  },
+  {
+    name: "HubSpot",
+    description: "Deals, contacts and pipeline stages, kept in step with your CRM.",
+    vendor: "HubSpot"
+  }
+];
+function TilePage() {
+  const integration = useHarnessIntegration();
+  if (!integration) notFound();
+  const Tile = integration.tile;
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: "mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-8",
+      "data-test": "tile",
+      children: [
+        /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "The marketplace does not currently render this" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsxs("p", { children: [
+            "22 of 23 shipped integrations return ",
+            /* @__PURE__ */ jsx("code", { children: "null" }),
+            " from",
+            " ",
+            /* @__PURE__ */ jsx("code", { children: "getMarketplaceTile()" }),
+            ", and the live marketplace route renders a generic product card that ignores the tile entirely. Treat this surface as a preview of a component that is, today, effectively unused \u2014 worth keeping correct, not worth investing heavily in."
+          ] }) })
+        ] }),
+        Tile ? /* @__PURE__ */ jsx(ViewportFrame, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("header", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5", children: [
+              /* @__PURE__ */ jsx("h2", { className: "font-heading text-foreground text-xl font-semibold tracking-tight", children: "Available integrations" }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: "3" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 max-w-prose text-sm", children: "Your tile in the catalogue grid, with two inert neighbours for scale. Column width, gap and heading come from the real marketplace." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-4", children: [
+            /* @__PURE__ */ jsx(
+              Tile,
+              {
+                accountId: HARNESS_ACCOUNT_ID,
+                productSlug: integration.slug,
+                href: `/${integration.slug}/activation`
+              }
+            ),
+            NEIGHBOURS.map((neighbour) => /* @__PURE__ */ jsx(NeighbourCard, { ...neighbour }, neighbour.name))
+          ] })
+        ] }) }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "This integration registers no marketplace tile." })
+      ]
+    }
+  );
+}
+function NeighbourCard({
+  name,
+  description,
+  vendor
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "bg-card text-card-foreground shadow-card flex h-full flex-col gap-0 rounded-xl border p-5 opacity-60",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-heading bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-base font-semibold", children: name.charAt(0) }),
+          /* @__PURE__ */ jsx("span", { className: "font-heading truncate text-base font-semibold tracking-tight", children: name })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-3 line-clamp-2 text-sm", children: description }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-auto pt-4 text-sm", children: vendor })
+      ]
+    }
+  );
+}
+export {
+  TilePage
+};

package/dist/internal/routes/triggers-page.d.ts

@@ -0,0 +1 @@
+export declare function TriggersPage(): import("react").JSX.Element;