sanad: worker runtime p0 — walking skeleton (deploy, invoke, trace, pause)

control-plane/artifacts/sanad-web/app/agents/[name]/page.tsx

@@ -0,0 +1,180 @@
+import { auth } from "@clerk/nextjs/server";
+import { notFound, redirect } from "next/navigation";
+import Link from "next/link";
+import type { CSSProperties } from "react";
+import Nav from "../../ui/Nav";
+import { chip, surface, type } from "../../ui/theme";
+import { getAgentDetailByName, getLiveDeployment } from "@/lib/agents/registry";
+import { listRuns } from "@/lib/runs/store";
+import { formatAge, formatUsd } from "../format";
+
+export const metadata = { title: "sanad — agent" };
+
+/**
+ * Agent detail (P0 minimal page, Task 14): owner + status + the live
+ * deployment per env, and the last 20 runs — read-only, server rendered.
+ * No pause/resume affordance here; those stay CLI verbs (`sanad agent
+ * pause`/`resume`) in P0.
+ */
+export default async function AgentDetailPage({
+  params,
+}: {
+  params: Promise<{ name: string }>;
+}) {
+  const { userId } = await auth();
+  if (!userId) redirect("/");
+
+  const orgId = `personal_${userId}`;
+  const { name } = await params;
+  const agent = await getAgentDetailByName(orgId, name);
+  if (!agent) notFound();
+
+  const [dev, prod, runs] = await Promise.all([
+    getLiveDeployment(agent.id, "dev"),
+    getLiveDeployment(agent.id, "prod"),
+    listRuns({ orgId, agentId: agent.id, limit: 20 }),
+  ]);
+
+  const deployments = [
+    { env: "dev", deployment: dev },
+    { env: "prod", deployment: prod },
+  ];
+
+  return (
+    <div style={surface.page}>
+      <Nav />
+      <main className="pad-x" style={s.main}>
+        <p style={s.breadcrumb}>
+          <Link href="/agents" className="link">
+            Agents
+          </Link>
+        </p>
+
+        <header style={s.header}>
+          <h1 style={type.h1}>{agent.name}</h1>
+          <p style={s.sub}>
+            {agent.ownerEmail}
+            <span style={s.dot}>·</span>
+            <span style={chip}>{agent.status}</span>
+          </p>
+        </header>
+
+        <section style={s.section}>
+          <h2 style={type.eyebrow}>Deployments</h2>
+          <table style={s.table}>
+            <thead>
+              <tr>
+                <th style={s.th}>Env</th>
+                <th style={s.th}>Status</th>
+                <th style={s.th}>Version</th>
+                <th style={s.th}>Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {deployments.map(({ env, deployment }) => (
+                <tr key={env}>
+                  <td style={s.td}>{env}</td>
+                  <td style={s.td}>{deployment?.status ?? "not deployed"}</td>
+                  <td style={s.td}>
+                    {deployment ? (
+                      <code style={s.mono}>{deployment.agentVersionId}</code>
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td style={s.td}>
+                    {deployment ? formatAge(deployment.updatedAt) : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+
+        <section style={s.section}>
+          <h2 style={type.eyebrow}>Last runs</h2>
+          {runs.length === 0 ? (
+            <p style={s.empty}>No runs yet.</p>
+          ) : (
+            <table style={s.table}>
+              <thead>
+                <tr>
+                  <th style={s.th}>Run</th>
+                  <th style={s.th}>Status</th>
+                  <th style={{ ...s.th, textAlign: "right" }}>Cost</th>
+                  <th style={{ ...s.th, textAlign: "right" }}>Tokens in</th>
+                  <th style={{ ...s.th, textAlign: "right" }}>Tokens out</th>
+                  <th style={s.th}>Age</th>
+                </tr>
+              </thead>
+              <tbody>
+                {runs.map((run) => (
+                  <tr key={run.id}>
+                    <td style={s.td}>
+                      <code style={s.mono}>{run.id}</code>
+                    </td>
+                    <td style={s.td}>{run.status}</td>
+                    <td style={{ ...s.td, textAlign: "right" }}>
+                      {formatUsd(run.costUsdMicros)}
+                    </td>
+                    <td style={{ ...s.td, textAlign: "right" }}>
+                      {run.tokensIn.toLocaleString()}
+                    </td>
+                    <td style={{ ...s.td, textAlign: "right" }}>
+                      {run.tokensOut.toLocaleString()}
+                    </td>
+                    <td style={s.td}>{formatAge(run.createdAt)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
+
+const s: Record<string, CSSProperties> = {
+  main: {
+    maxWidth: "1000px",
+    margin: "0 auto",
+    padding: "2.5rem 2.5rem 5rem",
+    width: "100%",
+  },
+  breadcrumb: { ...type.small, marginBottom: "1.5rem" },
+  header: { marginBottom: "2.5rem" },
+  sub: {
+    margin: "0.5rem 0 0",
+    display: "flex",
+    alignItems: "center",
+    color: "var(--ink-muted)",
+    fontSize: "0.875rem",
+  },
+  dot: { margin: "0 0.55rem", color: "var(--rule-strong)" },
+  section: { marginBottom: "3rem" },
+  empty: { ...type.small },
+  mono: {
+    fontFamily: "var(--font-mono)",
+    fontSize: "0.8rem",
+    color: "var(--ink)",
+  },
+  table: { width: "100%", borderCollapse: "collapse" },
+  th: {
+    padding: "0 0.25rem 0.5rem",
+    fontFamily: "var(--font-mono)",
+    fontSize: "0.68rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.12em",
+    color: "var(--ink-muted)",
+    fontWeight: 500,
+    textAlign: "left",
+    borderBottom: "1px solid var(--rule)",
+  },
+  td: {
+    padding: "0.7rem 0.25rem",
+    fontSize: "0.875rem",
+    color: "var(--ink-soft)",
+    borderBottom: "1px solid var(--rule)",
+  },
+};

control-plane/artifacts/sanad-web/app/agents/format.ts

@@ -0,0 +1,23 @@
+/**
+ * Display formatting for the agents pages. Colocated rather than in lib/ —
+ * nothing else in the app needs a relative-age string or a run's dollar cost
+ * formatted this way yet, so this stays local until a second caller shows up.
+ */
+
+/** "3m ago" / "2h ago" / "5d ago" — coarse relative age, newest unit only. */
+export function formatAge(date: Date): string {
+  const ms = Date.now() - date.getTime();
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/** A run's cost, stored in micros (1 USD = 1_000_000 micros), as "$0.0031". */
+export function formatUsd(micros: number): string {
+  return `$${(micros / 1e6).toFixed(4)}`;
+}

control-plane/artifacts/sanad-web/app/agents/page.tsx

@@ -0,0 +1,140 @@
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import type { CSSProperties } from "react";
+import Nav from "../ui/Nav";
+import { chip, surface, type } from "../ui/theme";
+import { getLiveDeployment, listAgentsForOrgWithOwnerEmail } from "@/lib/agents/registry";
+import { listRuns } from "@/lib/runs/store";
+import { formatAge } from "./format";
+
+export const metadata = { title: "sanad — agents" };
+
+/**
+ * Agents (P0 minimal page, Task 14): every agent in the org with its owner,
+ * status, live deployment per env, and last run — read-only, server
+ * rendered. Per-agent deployment/run lookups run in parallel (Promise.all)
+ * rather than one mega-join, matching the same N-small-queries convention
+ * ProjectsPage uses for its per-project session counts; P0's agent counts
+ * are small enough that this stays cheap.
+ */
+export default async function AgentsPage() {
+  const { userId } = await auth();
+  if (!userId) redirect("/");
+
+  const orgId = `personal_${userId}`;
+  const agentRows = await listAgentsForOrgWithOwnerEmail(orgId);
+
+  const rows = await Promise.all(
+    agentRows.map(async (agent) => {
+      const [dev, prod, lastRuns] = await Promise.all([
+        getLiveDeployment(agent.id, "dev"),
+        getLiveDeployment(agent.id, "prod"),
+        listRuns({ orgId, agentId: agent.id, limit: 1 }),
+      ]);
+      return {
+        ...agent,
+        devStatus: dev?.status ?? null,
+        prodStatus: prod?.status ?? null,
+        lastRun: lastRuns[0] ?? null,
+      };
+    })
+  );
+
+  return (
+    <div style={surface.page}>
+      <Nav />
+      <main className="pad-x" style={s.main}>
+        <header style={s.header}>
+          <h1 style={type.h1}>Agents</h1>
+          <p style={{ ...type.small, marginTop: "0.5rem" }}>
+            {rows.length} agent{rows.length === 1 ? "" : "s"} across this org.
+          </p>
+        </header>
+
+        {rows.length === 0 ? (
+          <p style={s.empty}>
+            No agents yet — push one with{" "}
+            <code style={s.inlineCode}>sanad agent deploy</code>.
+          </p>
+        ) : (
+          <table style={s.table}>
+            <thead>
+              <tr>
+                <th style={s.th}>Name</th>
+                <th style={s.th}>Owner</th>
+                <th style={s.th}>Status</th>
+                <th style={s.th}>Dev</th>
+                <th style={s.th}>Prod</th>
+                <th style={s.th}>Last run</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((agent) => (
+                <tr key={agent.id}>
+                  <td style={s.td}>
+                    <Link
+                      href={`/agents/${encodeURIComponent(agent.name)}`}
+                      className="link"
+                    >
+                      {agent.name}
+                    </Link>
+                  </td>
+                  <td style={s.td}>{agent.ownerEmail}</td>
+                  <td style={s.td}>
+                    <span style={chip}>{agent.status}</span>
+                  </td>
+                  <td style={s.td}>{agent.devStatus ?? "—"}</td>
+                  <td style={s.td}>{agent.prodStatus ?? "—"}</td>
+                  <td style={s.td}>
+                    {agent.lastRun
+                      ? `${agent.lastRun.status} · ${formatAge(agent.lastRun.createdAt)}`
+                      : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </main>
+    </div>
+  );
+}
+
+const s: Record<string, CSSProperties> = {
+  main: {
+    maxWidth: "1000px",
+    margin: "0 auto",
+    padding: "3.5rem 2.5rem 5rem",
+    width: "100%",
+  },
+  header: { marginBottom: "2.5rem" },
+  empty: { ...type.small },
+  inlineCode: {
+    fontFamily: "var(--font-mono)",
+    fontSize: "0.85em",
+    background: "var(--paper-sunken)",
+    border: "1px solid var(--rule)",
+    borderRadius: "5px",
+    padding: "0.05rem 0.35rem",
+    color: "var(--ink)",
+  },
+  table: { width: "100%", borderCollapse: "collapse" },
+  th: {
+    padding: "0 0.25rem 0.5rem",
+    fontFamily: "var(--font-mono)",
+    fontSize: "0.68rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.12em",
+    color: "var(--ink-muted)",
+    fontWeight: 500,
+    textAlign: "left",
+    borderBottom: "1px solid var(--rule)",
+  },
+  td: {
+    padding: "0.7rem 0.25rem",
+    fontSize: "0.875rem",
+    color: "var(--ink-soft)",
+    borderBottom: "1px solid var(--rule)",
+  },
+};

control-plane/artifacts/sanad-web/app/api/internal/cron/reap-runs/route.ts

@@ -0,0 +1,35 @@
+import { timingSafeEqual } from "crypto";
+import { NextRequest } from "next/server";
+import { ok, err } from "@/lib/http/envelope";
+import { DEFAULT_STALE_MS, sweepLostRuns } from "@/lib/runs/reaper";
+
+// Floor for staleAfterMs — a caller-supplied 0 or negative value must not
+// reap every currently-running run instantly.
+const MIN_STALE_MS = 60_000;
+
+function secretMatches(header: string | null): boolean {
+  const secret = process.env.CRON_SECRET;
+  if (!secret || !header) return false; // unset CRON_SECRET => always 401, fail closed
+  const a = Buffer.from(header);
+  const b = Buffer.from(secret);
+  return a.length === b.length && timingSafeEqual(a, b);
+}
+
+/**
+ * Cron entrypoint for the lost-run reaper — not session- or machine-authed,
+ * just a shared secret the scheduler holds (same shape as
+ * ROUTER_SHARED_SECRET's x-router-secret check in
+ * app/api/v1/compute/route/route.ts).
+ */
+export async function POST(req: NextRequest) {
+  if (!secretMatches(req.headers.get("x-cron-secret"))) {
+    return err(401, "unauthorized", "Invalid cron credential");
+  }
+
+  const raw = (await req.json().catch(() => ({}))) as { staleAfterMs?: unknown };
+  const requested = typeof raw.staleAfterMs === "number" ? raw.staleAfterMs : DEFAULT_STALE_MS;
+  const staleAfterMs = Math.max(requested, MIN_STALE_MS);
+
+  const reaped = await sweepLostRuns(staleAfterMs);
+  return ok({ reaped });
+}