spb/autoscholar

1import Link from "next/link";2import { IconArrow, IconCpu, IconShield } from "./Icons";34const FACTS: Array<[string, string, "cpu" | "shield" | "layers" | "db"]> = [5  [6    "Apple Silicon nodes",7    "Research jobs run on a private cluster of Apple Silicon Macs with unified memory, suited to numerical work and LaTeX builds.",8    "cpu",9  ],10  [11    "Isolated per-run workspaces",12    "Each run executes under a dedicated low-privilege service identity with OS-enforced sandboxing (Seatbelt), hostname-allowlisted egress and budgets for time, disk and spend.",13    "shield",14  ],15  [16    "Durable scheduling",17    "A PostgreSQL-backed queue with leases, heartbeats and fencing tokens: runs survive reloads, network blips and worker restarts; stale workers can never publish.",18    "layers",19  ],20  [21    "Evidence first",22    "Every artifact is hashed on write and versioned. Publication is a separate service the research agent cannot call.",23    "db",24  ],25];2627function Glyph({ k }: { k: "cpu" | "shield" | "layers" | "db" }) {28  if (k === "cpu") return <IconCpu />;29  if (k === "shield") return <IconShield />;30  if (k === "layers")31    return (32      <svg33        width="18"34        height="18"35        viewBox="0 0 24 24"36        fill="none"37        stroke="currentColor"38        strokeWidth="1.6"39        strokeLinecap="round"40        strokeLinejoin="round"41        aria-hidden="true"42      >43        <path d="m12 4 8 4-8 4-8-4z" />44        <path d="m4 12 8 4 8-4M4 16l8 4 8-4" />45      </svg>46    );47  return (48    <svg49      width="18"50      height="18"51      viewBox="0 0 24 24"52      fill="none"53      stroke="currentColor"54      strokeWidth="1.6"55      strokeLinecap="round"56      strokeLinejoin="round"57      aria-hidden="true"58    >59      <rect x="4" y="4" width="16" height="16" rx="2" />60      <path d="M4 10h16M10 10v10" />61    </svg>62  );63}6465/** Abstract, data-free motif: a schematic of a control plane dispatching to isolated nodes. */66export function ClusterMotif({ className = "" }: { className?: string }) {67  const nodes: Array<[number, number]> = [68    [40, 30],69    [120, 22],70    [200, 34],71    [280, 26],72    [60, 110],73    [150, 118],74    [240, 106],75    [100, 190],76    [190, 196],77    [280, 184],78  ];79  return (80    <svg81      viewBox="0 0 320 220"82      className={className}83      role="img"84      aria-label="Schematic of a control plane dispatching isolated research runs to compute nodes"85    >86      <defs>87        <linearGradient id="mg" x1="0" x2="1" y1="0" y2="1">88          <stop offset="0" stopColor="var(--sci)" stopOpacity="0.9" />89          <stop offset="1" stopColor="var(--accent)" stopOpacity="0.9" />90        </linearGradient>91      </defs>92      {nodes.map(([x, y]) => (93        <line94          key={`l-${x}-${y}`}95          x1="160"96          y1="110"97          x2={x}98          y2={y}99          stroke="var(--line-strong)"100          strokeWidth="1"101          strokeDasharray="2 3"102        />103      ))}104      {nodes.map(([x, y], i) => (105        <g key={`n-${x}-${y}`}>106          <rect107            x={x - 11}108            y={y - 11}109            width="22"110            height="22"111            rx="5"112            fill="var(--bg-elev)"113            stroke="var(--line-strong)"114          />115          <rect116            x={x - 5}117            y={y - 5}118            width="10"119            height="10"120            rx="2"121            fill={i % 3 === 0 ? "url(#mg)" : "var(--line-strong)"}122          />123        </g>124      ))}125      <circle cx="160" cy="110" r="17" fill="var(--bg-elev)" stroke="url(#mg)" strokeWidth="1.5" />126      <circle cx="160" cy="110" r="5" fill="url(#mg)" />127    </svg>128  );129}130131/** MacLustrInfrastructure — factual compute-credit section. */132export function MacLustrInfrastructure({ full = false }: { full?: boolean }) {133  return (134    <section aria-labelledby="maclustr" className="surface-ink overflow-hidden">135      <div className="grid gap-8 p-6 sm:p-8 lg:grid-cols-12 lg:p-12">136        <div className="lg:col-span-7">137          <p className="eyebrow" style={{ color: "#e8a885" }}>138            Powered by MacLustr139          </p>140          <h2 id="maclustr" className="title-1 mt-2">141            Research computed on MacLustr, an Apple Silicon research compute infrastructure.142          </h2>143          <p className="mt-4 max-w-xl text-sm leading-relaxed" style={{ color: "#c9c2b4" }}>144            AutoScholar is the research institution; MacLustr is the private cluster it runs on. Every study145            executes in its own sandboxed workspace, under budgets enforced outside the model, with every146            artifact hashed the moment it is written.147          </p>148          <ul className="mt-6 grid gap-4 sm:grid-cols-2">149            {FACTS.map(([h, p, k]) => (150              <li key={h} className="flex gap-3">151                <span className="mt-0.5 flex-none" style={{ color: "#e8a885" }}>152                  <Glyph k={k} />153                </span>154                <span>155                  <span className="block text-sm font-medium">{h}</span>156                  <span className="mt-1 block text-xs leading-relaxed" style={{ color: "#b5ac9c" }}>157                    {p}158                  </span>159                </span>160              </li>161            ))}162          </ul>163          {!full && (164            <Link165              href="/infrastructure"166              className="btn mt-7"167              style={{ background: "transparent", color: "#efeadf", borderColor: "#46423a" }}168            >169              About the infrastructure <IconArrow size={16} />170            </Link>171          )}172        </div>173        <div className="hidden items-center lg:col-span-5 lg:flex">174          <ClusterMotif className="w-full opacity-90" />175        </div>176      </div>177    </section>178  );179}180