Microservices

Route handler and its call site

// ==================================================================
// src/app/api/lab/identity/route.js
// ==================================================================

import { NextResponse } from "next/server";

function base64UrlDecode(segment) {
  const padded = segment.replace(/-/g, "+").replace(/_/g, "/");
  const padding = "=".repeat((4 - (padded.length % 4)) % 4);
  return Buffer.from(padded + padding, "base64").toString("utf-8");
}

export async function POST(request) {
  const body = await request.json().catch(() => ({}));
  const { token } = body ?? {};
  const checkedAt = new Date().toISOString();

  if (typeof token !== "string" || !token.trim()) {
    return NextResponse.json(
      { valid: false, reason: "missing token", checkedAt },
      { status: 400 }
    );
  }

  const parts = token.trim().split(".");
  if (parts.length !== 3) {
    return NextResponse.json({
      valid: false,
      reason: `expected 3 dot-separated segments, got ${parts.length}`,
      checkedAt,
    });
  }

  try {
    const header = JSON.parse(base64UrlDecode(parts[0]));
    const payload = JSON.parse(base64UrlDecode(parts[1]));
    return NextResponse.json({
      valid: true,
      reason:
        "well-formed header/payload (signature not verified, no server secret in this demo)",
      header,
      payload,
      checkedAt,
    });
  } catch {
    return NextResponse.json({
      valid: false,
      reason: "segments are not valid base64url JSON",
      checkedAt,
    });
  }
}

// ==================================================================
// src/components/lab/microservices/IdentityInstrument.jsx
// ==================================================================

"use client";

import { useState } from "react";
import InstrumentShell from "../InstrumentShell";
import ReadoutMono from "../ReadoutMono";

const SAMPLE =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkZXZtb3MiLCJyb2xlIjoiZW5naW5lZXIifQ.not-a-real-signature";

export default function IdentityInstrument({ code, filename }) {
  const [token, setToken] = useState(SAMPLE);
  const [state, setState] = useState("idle");
  const [result, setResult] = useState(null);
  const [latency, setLatency] = useState(null);

  const check = async () => {
    setState("loading");
    const start = performance.now();
    try {
      const res = await fetch("/api/lab/identity", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
      });
      const data = await res.json();
      setLatency(Math.round(performance.now() - start));
      setResult(data);
      setState("done");
    } catch {
      setState("error");
    }
  };

  return (
    <InstrumentShell
      code={code}
      filename={filename}
      id="identity-token"
      title="Identity Token Validator"
      note="A real Next.js API route decodes and checks the token shape. This hits an actual server, not mock data."
      specimen={
        <div className="w-full max-w-xl flex flex-col gap-4">
          <textarea
            value={token}
            onChange={(e) => setToken(e.target.value)}
            rows={3}
            spellCheck={false}
            className="w-full bg-[#18292dc4] border border-[#177c6f] rounded-xl px-3 py-2 text-text_normal text-xs focus-ring focus:border-[#19E3C7] transition-all duration-300"
            style={{ fontFamily: "var(--font-geist-mono)" }}
          />
          <button
            onClick={check}
            disabled={state === "loading"}
            className="self-center border-2 border-active_hover bg-active_hover hover:bg-[#182220] text-black hover:text-active_hover font-black py-2 px-6 rounded-xl transition-all duration-300 disabled:opacity-50"
          >
            {state === "loading" ? "Checking…" : "Validate token"}
          </button>
        </div>
      }
      readout={
        <div className="flex flex-wrap gap-3 justify-center max-w-2xl">
          {state === "idle" && <ReadoutMono label="status" value="idle" />}
          {state === "loading" && (
            <ReadoutMono label="status" value="checking…" />
          )}
          {state === "done" && result && (
            <>
              <ReadoutMono
                label="valid"
                value={String(result.valid)}
                tone={result.valid ? "active" : "error"}
              />
              <ReadoutMono label="reason" value={result.reason} />
              <ReadoutMono label="latency" value={`${latency}ms`} />
            </>
          )}
          {state === "error" && (
            <ReadoutMono label="status" value="request failed" tone="error" />
          )}
        </div>
      }
    />
  );
}

Route handler and its call site

// ==================================================================
// src/app/api/lab/file-metadata/route.js
// ==================================================================

import { NextResponse } from "next/server";
import { createHash } from "node:crypto";

const MAX_BYTES = 5 * 1024 * 1024;

export async function POST(request) {
  const checkedAt = new Date().toISOString();
  const formData = await request.formData().catch(() => null);
  const file = formData?.get("file");

  if (!file || typeof file === "string") {
    return NextResponse.json(
      { error: "no file provided", checkedAt },
      { status: 400 }
    );
  }

  if (file.size > MAX_BYTES) {
    return NextResponse.json(
      {
        error: `file exceeds the ${MAX_BYTES / (1024 * 1024)}MB limit`,
        checkedAt,
      },
      { status: 413 }
    );
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const sha256 = createHash("sha256").update(buffer).digest("hex");

  return NextResponse.json({
    name: file.name,
    size: file.size,
    type: file.type || "application/octet-stream",
    sha256,
    checkedAt,
  });
}

// ==================================================================
// src/components/lab/microservices/FileMetadataInstrument.jsx
// ==================================================================

"use client";

import { useRef, useState } from "react";
import InstrumentShell from "../InstrumentShell";
import ReadoutMono from "../ReadoutMono";

export default function FileMetadataInstrument({ code, filename }) {
  const inputRef = useRef(null);
  const [state, setState] = useState("idle");
  const [result, setResult] = useState(null);
  const [latency, setLatency] = useState(null);

  const onFile = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setState("loading");
    const start = performance.now();
    const formData = new FormData();
    formData.append("file", file);
    try {
      const res = await fetch("/api/lab/file-metadata", {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      setLatency(Math.round(performance.now() - start));
      setResult(data);
      setState(res.ok ? "done" : "error");
    } catch {
      setState("error");
      setResult({ error: "request failed" });
    }
  };

  return (
    <InstrumentShell
      code={code}
      filename={filename}
      id="file-metadata"
      title="File Metadata Service"
      note="A real API route hashes and inspects whatever file you drop. Nothing is stored, only computed in memory."
      specimen={
        <div className="w-full max-w-md flex flex-col items-center gap-4">
          <input
            ref={inputRef}
            type="file"
            onChange={onFile}
            className="hidden"
          />
          <button
            onClick={() => inputRef.current?.click()}
            className="border-2 border-active_hover bg-active_hover hover:bg-[#182220] text-black hover:text-active_hover font-black py-2 px-6 rounded-xl transition-all duration-300"
          >
            Choose a file
          </button>
          <p className="text-description text-xs">
            Max 5MB. Processed in-memory, never saved.
          </p>
        </div>
      }
      readout={
        <div className="flex flex-wrap gap-3 justify-center max-w-2xl">
          {state === "idle" && (
            <ReadoutMono label="status" value="waiting for a file" />
          )}
          {state === "loading" && (
            <ReadoutMono label="status" value="hashing…" />
          )}
          {state === "done" && result && (
            <>
              <ReadoutMono label="name" value={result.name} />
              <ReadoutMono label="size" value={`${result.size}B`} />
              <ReadoutMono label="type" value={result.type} />
              <ReadoutMono label="sha256" value={`${result.sha256.slice(0, 16)}…`} />
              <ReadoutMono label="latency" value={`${latency}ms`} />
            </>
          )}
          {state === "error" && (
            <ReadoutMono
              label="status"
              value={result?.error || "request failed"}
              tone="error"
            />
          )}
        </div>
      }
    />
  );
}

Route handler and its call site

// ==================================================================
// src/app/api/lab/notify-dryrun/route.js
// ==================================================================

import { NextResponse } from "next/server";

const LIMITS = { email: 500, sms: 160, push: 178 };
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const E164_RE = /^\+[1-9]\d{7,14}$/;

export async function POST(request) {
  const body = await request.json().catch(() => ({}));
  const { channel, recipient = "", message = "" } = body ?? {};
  const checkedAt = new Date().toISOString();
  const errors = [];

  if (!["email", "sms", "push"].includes(channel)) {
    errors.push("channel must be email, sms, or push");
  }
  if (channel === "email" && !EMAIL_RE.test(recipient)) {
    errors.push("recipient is not a valid email address");
  }
  if (channel === "sms" && !E164_RE.test(recipient)) {
    errors.push(
      "recipient is not a valid E.164 phone number (e.g. +14155550123)"
    );
  }
  if (channel === "push" && recipient.trim().length < 8) {
    errors.push("recipient (device token) looks too short");
  }

  const limit = LIMITS[channel] ?? 160;
  if (message.length === 0) {
    errors.push("message is empty");
  } else if (message.length > limit) {
    errors.push(`message exceeds the ${limit}-character limit for ${channel}`);
  }

  const valid = errors.length === 0;

  return NextResponse.json({
    valid,
    errors,
    dryRun: true,
    channel: channel ?? null,
    renderedPayload: valid
      ? { to: recipient, body: message, channel, length: message.length, limit }
      : null,
    checkedAt,
  });
}

// ==================================================================
// src/components/lab/microservices/NotifyDryRunInstrument.jsx
// ==================================================================

"use client";

import { useState } from "react";
import InstrumentShell from "../InstrumentShell";
import LabToggleGroup from "../LabToggleGroup";
import ReadoutMono from "../ReadoutMono";

export default function NotifyDryRunInstrument({ code, filename }) {
  const [channel, setChannel] = useState("email");
  const [recipient, setRecipient] = useState("engineer@example.com");
  const [message, setMessage] = useState(
    "Your build finished in 42s. Deploy is live."
  );
  const [state, setState] = useState("idle");
  const [result, setResult] = useState(null);

  const check = async () => {
    setState("loading");
    try {
      const res = await fetch("/api/lab/notify-dryrun", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ channel, recipient, message }),
      });
      const data = await res.json();
      setResult(data);
      setState("done");
    } catch {
      setState("error");
    }
  };

  return (
    <InstrumentShell
      code={code}
      filename={filename}
      id="notify-dry-run"
      title="Notification Dry-Run Service"
      note="Validates and renders a real payload through a real API route. Dry-run only, it never actually sends anything."
      specimen={
        <div className="w-full max-w-lg flex flex-col gap-3">
          <input
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            placeholder="recipient"
            className="w-full bg-[#18292dc4] border border-[#177c6f] rounded-xl px-3 py-2 text-text_normal text-sm focus-ring focus:border-[#19E3C7] transition-all duration-300"
          />
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            rows={2}
            className="w-full bg-[#18292dc4] border border-[#177c6f] rounded-xl px-3 py-2 text-text_normal text-sm focus-ring focus:border-[#19E3C7] transition-all duration-300"
          />
          <button
            onClick={check}
            disabled={state === "loading"}
            className="self-center border-2 border-active_hover bg-active_hover hover:bg-[#182220] text-black hover:text-active_hover font-black py-2 px-6 rounded-xl transition-all duration-300 disabled:opacity-50"
          >
            {state === "loading" ? "Validating…" : "Dry-run send"}
          </button>
        </div>
      }
      controls={
        <LabToggleGroup
          label="channel"
          value={channel}
          onChange={setChannel}
          options={[
            { value: "email", label: "Email" },
            { value: "sms", label: "SMS" },
            { value: "push", label: "Push" },
          ]}
        />
      }
      readout={
        <div className="flex flex-wrap gap-3 justify-center max-w-2xl">
          {state === "idle" && <ReadoutMono label="status" value="idle" />}
          {state === "loading" && (
            <ReadoutMono label="status" value="validating…" />
          )}
          {state === "done" && result && (
            <>
              <ReadoutMono
                label="valid"
                value={String(result.valid)}
                tone={result.valid ? "active" : "error"}
              />
              {result.errors?.map((err) => (
                <ReadoutMono key={err} label="error" value={err} tone="error" />
              ))}
              {result.valid && result.renderedPayload && (
                <ReadoutMono
                  label="length"
                  value={`${result.renderedPayload.length}/${result.renderedPayload.limit}`}
                />
              )}
            </>
          )}
          {state === "error" && (
            <ReadoutMono label="status" value="request failed" tone="error" />
          )}
        </div>
      }
    />
  );
}