minutework 0.1.0

package/assets/templates/next-tenant-app/src/features/examples/runtime-command-demo/components/runtime-command-demo.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useEffect, useEffectEvent, useState } from "react";
+import { ArrowRight, Loader2, Orbit, Sparkles, Terminal } from "lucide-react";
+
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+import { StatusBadge } from "@/design-system/patterns/status-badge";
+import { Button } from "@/design-system/primitives/button";
+import type {
+  ActiveTenant,
+  CommandRun,
+  CommandTemplateKey,
+} from "@/lib/platform/contracts";
+import { commandTemplateKeys } from "@/lib/platform/contracts";
+import { cn } from "@/lib/utils";
+
+const commandTemplates: Array<{
+  key: CommandTemplateKey;
+  label: string;
+  helper: string;
+}> = [
+  {
+    key: commandTemplateKeys[0],
+    label: "Python Version",
+    helper: "Check runtime interpreter availability.",
+  },
+  {
+    key: commandTemplateKeys[1],
+    label: "Echo Hello",
+    helper: "Validate command dispatch and echo output.",
+  },
+  {
+    key: commandTemplateKeys[2],
+    label: "System Info",
+    helper: "Inspect the runtime host environment.",
+  },
+  {
+    key: commandTemplateKeys[3],
+    label: "List Apps",
+    helper: "Enumerate app workloads visible to the runtime.",
+  },
+];
+
+function commandTone(status: string) {
+  switch (status) {
+    case "succeeded":
+    case "completed":
+      return "success" as const;
+    case "queued":
+    case "running":
+      return "info" as const;
+    case "failed":
+    case "canceled":
+      return "danger" as const;
+    default:
+      return "default" as const;
+  }
+}
+
+async function readErrorDetail(response: Response, fallback: string) {
+  const payload = (await response.json().catch(() => null)) as
+    | { detail?: string }
+    | null;
+
+  return payload?.detail || fallback;
+}
+
+function Metric({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <PanelFrame tone="raised" padding="md" className="min-w-36 space-y-2">
+      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {label}
+      </p>
+      <p className="text-sm font-semibold text-foreground">{value}</p>
+    </PanelFrame>
+  );
+}
+
+function OutputCard({
+  title,
+  body,
+}: {
+  title: string;
+  body: string;
+}) {
+  return (
+    <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-semibold text-foreground">{title}</p>
+        <StatusBadge tone="default">Stream</StatusBadge>
+      </div>
+      <div className="overflow-hidden rounded-lg border border-border bg-background">
+        <pre className="max-h-80 overflow-auto p-4 font-mono text-xs leading-6 whitespace-pre-wrap text-foreground">
+          {body}
+        </pre>
+      </div>
+    </PanelFrame>
+  );
+}
+
+export function RuntimeCommandDemo({
+  activeTenant,
+  onUnauthorized,
+  viewerName,
+}: {
+  activeTenant: ActiveTenant;
+  onUnauthorized: () => void;
+  viewerName: string;
+}) {
+  const [selectedTemplate, setSelectedTemplate] = useState<CommandTemplateKey>(
+    commandTemplates[0].key,
+  );
+  const [run, setRun] = useState<CommandRun | null>(null);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+
+  const selectedTemplateMeta =
+    commandTemplates.find((template) => template.key === selectedTemplate) ??
+    commandTemplates[0];
+
+  const refreshRun = useEffectEvent(async (runId: string, tenantId: string) => {
+    const response = await fetch(`/api/gateway/commands/${runId}?tenant_id=${tenantId}`);
+
+    if (response.status === 401) {
+      onUnauthorized();
+      return;
+    }
+
+    if (!response.ok) {
+      return;
+    }
+
+    const payload = (await response.json()) as CommandRun;
+    setRun(payload);
+  });
+
+  useEffect(() => {
+    if (!run || !["queued", "running"].includes(run.status)) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      void refreshRun(run.run_id, activeTenant.tenant_id);
+    }, 1500);
+
+    return () => window.clearTimeout(timeout);
+  }, [activeTenant.tenant_id, run]);
+
+  async function dispatchCommand() {
+    setPending(true);
+    setError("");
+    setRun(null);
+
+    try {
+      const response = await fetch("/api/gateway/commands", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          tenant_id: activeTenant.tenant_id,
+          template_key: selectedTemplate,
+        }),
+      });
+
+      if (response.status === 401) {
+        onUnauthorized();
+        return;
+      }
+
+      if (!response.ok) {
+        setError(
+          await readErrorDetail(response, "Command dispatch failed."),
+        );
+        return;
+      }
+
+      const payload = (await response.json()) as CommandRun;
+      setRun(payload);
+    } catch {
+      setError("Unable to dispatch the command right now.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="grid gap-6">
+      <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-6">
+        <div className="space-y-2">
+          <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+            Example gateway flow
+          </p>
+          <h2 className="text-3xl font-semibold tracking-tight">
+            Optional runtime command demo
+          </h2>
+          <p className="max-w-3xl text-sm leading-7 text-muted-foreground">
+            This is example code bundled with the template, not the template&apos;s
+            default product identity. It demonstrates an authenticated gateway
+            proxy flow that stays tenant-scoped and CSRF-safe through the BFF.
+          </p>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+          {commandTemplates.map((template) => {
+            const isActive = template.key === selectedTemplate;
+
+            return (
+              <button
+                key={template.key}
+                type="button"
+                onClick={() => setSelectedTemplate(template.key)}
+                className={cn(
+                  "rounded-xl border p-4 text-left transition-colors",
+                  isActive
+                    ? "border-primary/30 bg-primary/10 text-foreground shadow-sm"
+                    : "border-border bg-surface-raised text-foreground hover:bg-muted",
+                )}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold">{template.label}</p>
+                  {isActive ? <StatusBadge tone="primary">Selected</StatusBadge> : null}
+                </div>
+                <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                  {template.helper}
+                </p>
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">
+              Ready to run {selectedTemplateMeta.label}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {selectedTemplateMeta.helper}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            {error ? <p className="text-sm text-destructive">{error}</p> : null}
+            <Button onClick={dispatchCommand} disabled={pending} className="gap-2">
+              {pending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <ArrowRight className="size-4" />
+              )}
+              {pending ? "Dispatching" : `Run ${selectedTemplateMeta.label}`}
+            </Button>
+          </div>
+        </div>
+      </PanelFrame>
+
+      <section className="grid gap-6 xl:grid-cols-[0.95fr,1.05fr]">
+        <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-4">
+          <div className="flex items-center justify-between gap-3">
+            <div className="space-y-1">
+              <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+                Projection
+              </p>
+              <h2 className="text-2xl font-semibold tracking-tight">
+                {run ? "Latest projected run" : "No projected run yet"}
+              </h2>
+            </div>
+            <Orbit className="size-5 text-primary" />
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-3">
+            <Metric label="Viewer" value={viewerName} />
+            <Metric label="Tenant" value={activeTenant.tenant_slug} />
+            <Metric label="Template" value={selectedTemplateMeta.label} />
+          </div>
+
+          {run ? (
+            <>
+              <div className="flex flex-wrap gap-3">
+                <StatusBadge tone={commandTone(run.status)}>{run.status}</StatusBadge>
+                <StatusBadge tone="primary">{run.template_key}</StatusBadge>
+                <StatusBadge
+                  tone={
+                    run.exit_code === null
+                      ? "info"
+                      : run.exit_code === 0
+                        ? "success"
+                        : "danger"
+                  }
+                >
+                  Exit code {run.exit_code === null ? "pending" : run.exit_code}
+                </StatusBadge>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3">
+                <Metric label="Run ID" value={run.run_id} />
+                <Metric label="Runtime" value={run.runtime_id} />
+                <Metric label="Source" value={run.source_ref} />
+              </div>
+
+              <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Sparkles className="size-4 text-primary" />
+                  <p className="text-sm font-semibold text-foreground">Safe summary</p>
+                </div>
+                <p className="text-sm leading-6 text-muted-foreground">
+                  {run.safe_summary}
+                </p>
+                {run.dispatch_error ? (
+                  <p className="text-sm leading-6 text-destructive">
+                    {run.dispatch_error}
+                  </p>
+                ) : null}
+              </PanelFrame>
+            </>
+          ) : (
+            <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Terminal className="size-4 text-primary" />
+                <p className="text-sm font-semibold text-foreground">
+                  Dispatch to begin
+                </p>
+              </div>
+              <p className="text-sm leading-6 text-muted-foreground">
+                Choose a template above and run it to demonstrate a browser →
+                platform → runtime → platform round trip through the example
+                gateway surface.
+              </p>
+            </PanelFrame>
+          )}
+        </PanelFrame>
+
+        <div className="grid gap-6">
+          <OutputCard title="Stdout tail" body={run?.stdout_tail || "(empty)"} />
+          <OutputCard title="Stderr tail" body={run?.stderr_tail || "(empty)"} />
+        </div>
+      </section>
+    </div>
+  );
+}

package/assets/templates/next-tenant-app/src/features/public-shell/components/content-article.tsx

@@ -0,0 +1,66 @@
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+import type { PublicEntry } from "@/lib/content/contracts";
+
+function formatPublishedAt(value?: string | null) {
+  if (!value) {
+    return null;
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+  }).format(new Date(value));
+}
+
+export function ContentArticle({
+  entry,
+}: {
+  entry: PublicEntry;
+}) {
+  const publishedAt = formatPublishedAt(entry.publishedAt);
+
+  return (
+    <article className="grid gap-6">
+      <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-4 border-border/70">
+        <div className="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+          {entry.eyebrow ? <span>{entry.eyebrow}</span> : null}
+          {publishedAt ? <span>{publishedAt}</span> : null}
+          {entry.readingTime ? <span>{entry.readingTime}</span> : null}
+        </div>
+        <div className="space-y-3">
+          <h1 className="max-w-4xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+            {entry.title}
+          </h1>
+          <p className="max-w-3xl text-base leading-8 text-muted-foreground sm:text-lg">
+            {entry.description}
+          </p>
+        </div>
+      </PanelFrame>
+
+      <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-8 border-border/70">
+        <p className="max-w-3xl text-base leading-8 text-foreground">
+          {entry.body.intro}
+        </p>
+
+        <div className="grid gap-8">
+          {entry.body.sections.map((section) => (
+            <section key={section.heading} className="space-y-4">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                {section.heading}
+              </h2>
+              <div className="space-y-4">
+                {section.paragraphs.map((paragraph) => (
+                  <p
+                    key={paragraph}
+                    className="max-w-3xl text-sm leading-7 text-muted-foreground sm:text-base"
+                  >
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      </PanelFrame>
+    </article>
+  );
+}

package/assets/templates/next-tenant-app/src/features/public-shell/components/content-collection.tsx

@@ -0,0 +1,108 @@
+import type { Route } from "next";
+import Link from "next/link";
+
+import { ArrowRight } from "lucide-react";
+
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+import type { PublicContentKind, PublicEntrySummary } from "@/lib/content/contracts";
+import { appRoutes } from "@/lib/app-routes";
+
+function entryHref(entry: PublicEntrySummary) {
+  if (entry.kind === "docs") {
+    return appRoutes.docsPage(entry.slug);
+  }
+
+  return appRoutes.blogPost(entry.slug);
+}
+
+function formatPublishedAt(value?: string | null) {
+  if (!value) {
+    return null;
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+  }).format(new Date(value));
+}
+
+export function ContentCollection({
+  description,
+  entries,
+  eyebrow,
+  kind,
+  title,
+}: {
+  description: string;
+  entries: PublicEntrySummary[];
+  eyebrow: string;
+  kind: PublicContentKind;
+  title: string;
+}) {
+  return (
+    <div className="grid gap-6">
+      <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-4 border-border/70">
+        <p className="text-sm font-semibold uppercase tracking-[0.28em] text-muted-foreground">
+          {eyebrow}
+        </p>
+        <div className="space-y-3">
+          <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+            {title}
+          </h1>
+          <p className="max-w-3xl text-base leading-8 text-muted-foreground sm:text-lg">
+            {description}
+          </p>
+        </div>
+      </PanelFrame>
+
+      <div className="grid gap-4">
+        {entries.map((entry) => {
+          const publishedAt = formatPublishedAt(entry.publishedAt);
+
+          return (
+            <Link
+              key={`${kind}-${entry.slug.join("/")}`}
+              href={entryHref(entry) as Route}
+              className="group"
+            >
+              <PanelFrame
+                tone="raised"
+                radius="xl"
+                padding="lg"
+                className="grid gap-4 border-border/70 transition-transform duration-200 group-hover:-translate-y-0.5 md:grid-cols-[1fr,auto]"
+              >
+                <div className="space-y-3">
+                  <div className="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                    {entry.eyebrow ? <span>{entry.eyebrow}</span> : null}
+                    {publishedAt ? <span>{publishedAt}</span> : null}
+                    {entry.readingTime ? <span>{entry.readingTime}</span> : null}
+                  </div>
+                  <div className="space-y-2">
+                    <h2 className="text-2xl font-semibold tracking-tight">
+                      {entry.title}
+                    </h2>
+                    <p className="text-sm leading-7 text-muted-foreground">
+                      {entry.description}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center text-sm font-semibold text-foreground">
+                  Read more
+                  <ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-0.5" />
+                </div>
+              </PanelFrame>
+            </Link>
+          );
+        })}
+
+        {entries.length === 0 ? (
+          <PanelFrame tone="raised" radius="xl" padding="lg" className="border-border/70">
+            <p className="text-sm leading-7 text-muted-foreground">
+              No {kind} entries are available for the current content adapter.
+            </p>
+          </PanelFrame>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/assets/templates/next-tenant-app/src/features/public-shell/components/marketing-page-canvas.tsx

@@ -0,0 +1,111 @@
+import type { Route } from "next";
+import Link from "next/link";
+
+import { ArrowRight } from "lucide-react";
+
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+import { Button } from "@/design-system/primitives/button";
+import type { MarketingPage } from "@/lib/content/contracts";
+
+export function MarketingPageCanvas({
+  page,
+}: {
+  page: MarketingPage;
+}) {
+  return (
+    <div className="grid gap-8">
+      <section className="grid gap-6 lg:grid-cols-[1.15fr,0.85fr]">
+        <PanelFrame
+          tone="floating"
+          radius="xl"
+          padding="lg"
+          className="marketing-hero-surface relative overflow-hidden border-border/70"
+        >
+          <div className="marketing-hero-orb absolute inset-y-0 right-0 w-1/2 opacity-80" />
+          <div className="relative space-y-6">
+            <div className="space-y-3">
+              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-muted-foreground">
+                {page.heroEyebrow}
+              </p>
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+                {page.heroTitle}
+              </h1>
+              <p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
+                {page.heroBody}
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-3">
+              <Button asChild type="button">
+                <Link href={page.primaryCta.href as Route}>
+                  {page.primaryCta.label}
+                  <ArrowRight className="size-4" />
+                </Link>
+              </Button>
+              {page.secondaryCta ? (
+                <Button asChild type="button" variant="outline">
+                  <Link href={page.secondaryCta.href as Route}>
+                    {page.secondaryCta.label}
+                  </Link>
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </PanelFrame>
+
+        <div className="grid gap-4">
+          {page.sections.slice(0, 3).map((section) => (
+            <PanelFrame
+              key={section.title}
+              tone="raised"
+              radius="xl"
+              padding="lg"
+              className="space-y-3 border-border/70"
+            >
+              {section.eyebrow ? (
+                <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+                  {section.eyebrow}
+                </p>
+              ) : null}
+              <h2 className="text-xl font-semibold tracking-tight">{section.title}</h2>
+              <p className="text-sm leading-7 text-muted-foreground">{section.body}</p>
+            </PanelFrame>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4 lg:grid-cols-3">
+        {page.sections.map((section) => (
+          <PanelFrame
+            key={`${page.pageKey}-${section.title}`}
+            tone="raised"
+            radius="xl"
+            padding="lg"
+            className="space-y-4 border-border/70"
+          >
+            {section.eyebrow ? (
+              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+                {section.eyebrow}
+              </p>
+            ) : null}
+            <div className="space-y-2">
+              <h3 className="text-2xl font-semibold tracking-tight">{section.title}</h3>
+              <p className="text-sm leading-7 text-muted-foreground">{section.body}</p>
+            </div>
+
+            {section.points?.length ? (
+              <ul className="space-y-2 text-sm leading-6 text-muted-foreground">
+                {section.points.map((point) => (
+                  <li key={point} className="flex gap-3">
+                    <span className="mt-2 size-2 rounded-full bg-primary" />
+                    <span>{point}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </PanelFrame>
+        ))}
+      </section>
+    </div>
+  );
+}