diff --git a/web/app/chief/chief.module.css b/web/app/chief/chief.module.css new file mode 100644 index 0000000..f755055 --- /dev/null +++ b/web/app/chief/chief.module.css @@ -0,0 +1,221 @@ +.page { + --chief-bg: #08111a; + --chief-surface: #0f1b29; + --chief-surface-strong: #13283b; + --chief-line: rgba(116, 184, 226, 0.18); + --chief-line-strong: rgba(116, 184, 226, 0.36); + --chief-text: #edf4fb; + --chief-muted: #a8b8c8; + --chief-faint: #77879a; + --chief-accent: #74b8e2; + min-height: 100vh; + overflow-x: clip; + background: var(--chief-bg); + color: var(--chief-text); +} + +.hero { + min-height: min(700px, calc(100dvh - 72px)); + display: flex; + align-items: center; + padding: 88px 40px 64px; + background: + radial-gradient(circle at 78% 25%, rgba(116, 184, 226, 0.13), transparent 34rem), + linear-gradient(180deg, #10283b 0%, var(--chief-bg) 100%); + border-bottom: 1px solid var(--chief-line); +} + +.heroInner { + width: 100%; + max-width: 1180px; + margin: 0 auto; +} + +.heroCopy { max-width: 920px; } + +.hero h1, +.problemInner h2, +.sectionIntro h2, +.responsibilityIntro h2, +.infrastructureCopy h2, +.evolutionInner h2, +.ctaInner h2 { + margin: 0; + font-family: var(--font-heading), sans-serif; + font-weight: 520; + letter-spacing: -0.055em; + line-height: 1.02; +} + +.hero h1 { + max-width: 16ch; + font-size: clamp(3.5rem, 6.2vw, 6.5rem); +} + +.heroLead { + max-width: 54ch; + margin: 26px 0 0; + color: var(--chief-muted); + font-size: clamp(1.02rem, 1.2vw, 1.16rem); + line-height: 1.65; +} + +.heroActions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } + +.pilotButton, +.pilotButtonCompact, +.secondaryButton { + min-height: 48px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + padding: 12px 24px; + border: 1.5px solid #234969; + border-radius: 999px; + background: #2d6a9c; + color: #fff; + font-size: 0.91rem; + font-weight: 650; + line-height: 1; + text-decoration: none; + white-space: nowrap; + transition: transform 180ms var(--ease-out-quint), background 180ms ease, border-color 180ms ease; +} + +.pilotButtonCompact { min-height: 38px; padding: 9px 17px; background: #edf7fd; border-color: #d8ebf8; color: #0b2233; } +.secondaryButton { background: transparent; border-color: var(--chief-line-strong); color: var(--chief-text); } +.pilotButton svg, .pilotButtonCompact svg, .secondaryButton svg { width: 16px; height: 16px; stroke-width: 1.8; } +.pilotButton:hover { background: #4a90c2; } +.secondaryButton:hover { border-color: var(--chief-accent); color: var(--chief-accent); } +.pilotButton:hover, .pilotButtonCompact:hover, .secondaryButton:hover { transform: translateY(-1px); } +.pilotButton:active, .pilotButtonCompact:active, .secondaryButton:active { transform: scale(0.97); } +.pilotButton:focus-visible, .pilotButtonCompact:focus-visible, .secondaryButton:focus-visible { outline: 3px solid var(--chief-accent); outline-offset: 4px; } + +.problemSection { padding: 118px 40px; background: #0b1723; border-bottom: 1px solid var(--chief-line); } +.problemInner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 96px; align-items: end; } +.problemInner h2, .sectionIntro h2, .responsibilityIntro h2, .infrastructureCopy h2, .evolutionInner h2, .ctaInner h2 { font-size: clamp(2.35rem, 4.2vw, 4.5rem); } +.problemCopy { padding-left: 28px; border-left: 1px solid var(--chief-line-strong); } +.problemCopy p, .sectionIntro p, .responsibilityIntro p, .infrastructureCopy p, .evolutionInner p, .ctaInner > p { color: var(--chief-muted); line-height: 1.7; } +.problemCopy p { margin: 0; } +.problemCopy p + p { margin-top: 20px; color: var(--chief-text); } + +.workflowSection { max-width: 1280px; margin: 0 auto; padding: 128px 40px 140px; } +.sectionIntro { max-width: 760px; } +.sectionIntro p { max-width: 61ch; margin: 24px 0 0; } +.workflowTrack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 76px; } +.workflowItem { position: relative; padding: 0 32px 0 0; } +.workflowItem:not(:last-child) { border-right: 1px solid var(--chief-line); margin-right: 32px; } +.workflowRail { height: 2px; margin-bottom: 30px; background: var(--chief-line); } +.workflowRail span { display: block; width: 38%; height: 100%; background: var(--chief-accent); } +.workflowIcon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--chief-line-strong); border-radius: 12px; background: var(--chief-surface); color: var(--chief-accent); } +.workflowIcon svg { width: 20px; height: 20px; stroke-width: 1.7; } +.workflowDetail { margin: 24px 0 0; color: var(--chief-accent) !important; font: 0.7rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .07em; } +.workflowItem h3 { margin: 12px 0 0; font-size: 1.16rem; letter-spacing: -.025em; } +.workflowItem > p:last-child { margin: 13px 0 0; color: var(--chief-muted); font-size: .92rem; line-height: 1.65; } + +.responsibilitySection { padding: 128px 40px; background: #10283b; border-block: 1px solid var(--chief-line); } +.responsibilitySection > * { max-width: 1160px; margin-inline: auto; } +.responsibilityIntro { max-width: 770px; } +.responsibilityIntro p { max-width: 66ch; margin: 22px 0 0; } +.responsibilityIntro p + p { margin-top: 10px; color: var(--chief-text); } +.responsibilityDiagram { margin-top: 68px; display: grid; grid-template-columns: 1fr 50px 1fr; gap: 22px; align-items: center; } +.beforeDiagram, .afterDiagram { min-height: 390px; padding: 28px; border: 1px solid var(--chief-line); border-radius: 16px; background: #0b1b29; } +.beforeDiagram h3, .afterDiagram h3 { margin: 0; color: var(--chief-muted); font: .72rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; } +.beforeDiagram > p, .afterDiagram > p { margin: 20px 0 0; color: var(--chief-muted); font-size: .86rem; text-align: center; } +.manualMap { position: relative; width: 260px; height: 245px; margin: 22px auto 0; } +.personNode, .manualNode, .managedChief, .returnNode { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--chief-line-strong); border-radius: 12px; background: var(--chief-surface-strong); font: .7rem/1.2 var(--font-geist-mono), monospace; } +.personNode { padding: 12px 14px; color: var(--chief-text); } +.personNode svg, .returnNode svg { width: 15px; height: 15px; color: var(--chief-accent); } +.manualMap .personNode { position: absolute; left: 82px; top: 96px; z-index: 2; } +.manualNode { position: absolute; width: 68px; height: 42px; color: var(--chief-muted); } +.manualNode::after { content: ''; position: absolute; width: 66px; height: 1px; background: var(--chief-line-strong); transform-origin: left; } +.manualNode:nth-child(2) { left: 0; top: 16px; } .manualNode:nth-child(2)::after { left: 58px; top: 35px; transform: rotate(35deg); } +.manualNode:nth-child(3) { right: 0; top: 16px; } .manualNode:nth-child(3)::after { right: 58px; top: 35px; transform: rotate(-35deg); transform-origin: right; } +.manualNode:nth-child(4) { left: 0; bottom: 10px; } .manualNode:nth-child(4)::after { left: 58px; bottom: 35px; transform: rotate(-35deg); } +.manualNode:nth-child(5) { right: 0; bottom: 10px; } .manualNode:nth-child(5)::after { right: 58px; bottom: 35px; transform: rotate(35deg); transform-origin: right; } +.manualNode:nth-child(6) { left: 96px; top: 0; } .manualNode:nth-child(6)::after { left: 34px; top: 42px; transform: rotate(90deg); } +.manualNode:nth-child(7) { left: 96px; bottom: 0; } .manualNode:nth-child(7)::after { left: 34px; bottom: 42px; transform: rotate(-90deg); } +.compareArrow { width: 24px; margin: auto; color: var(--chief-accent); } +.managedMap { min-height: 245px; margin-top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; } +.managedMap > svg { width: 18px; color: var(--chief-faint); } +.managedChief { padding: 13px 28px; border-color: var(--chief-accent); background: #12334b; color: var(--chief-text); font-size: .85rem; } +.managedTeams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } +.managedTeams span { padding: 9px 13px; border: 1px solid var(--chief-line); border-radius: 10px; color: var(--chief-muted); font: .65rem/1 var(--font-geist-mono), monospace; } +.returnNode { padding: 10px 15px; color: var(--chief-accent); } + +.infrastructureSection { padding: 136px 40px; } +.infrastructureInner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; align-items: center; } +.infrastructureCopy p { max-width: 55ch; margin: 24px 0 0; } +.infrastructureCopy p + p { margin-top: 14px; color: var(--chief-text); } +.layerDiagram { display: grid; gap: 10px; } +.chiefLayer, .relayLayer { padding: 28px; border: 1px solid var(--chief-line-strong); border-radius: 16px; } +.chiefLayer { width: 82%; margin: 0 auto; background: #15344a; } +.relayLayer { background: var(--chief-surface); } +.chiefLayer > span, .relayLayer > span { color: var(--chief-accent); font: .68rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; } +.chiefLayer strong, .relayLayer strong { display: block; margin-top: 10px; font: 520 1.5rem/1.1 var(--font-heading), sans-serif; } +.chiefLayer p { margin: 13px 0 0; color: var(--chief-muted); font-size: .84rem; line-height: 1.55; } +.capabilityGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 22px; } +.capabilityGrid span { display: flex; align-items: center; gap: 8px; color: var(--chief-muted); font-size: .78rem; } +.capabilityGrid svg { width: 15px; height: 15px; color: var(--chief-accent); stroke-width: 1.7; } + +.evolutionSection { padding: 94px 40px; background: #0c1c2a; border-block: 1px solid var(--chief-line); } +.evolutionInner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 90px 1fr; gap: 40px; align-items: start; } +.evolutionInner > svg { width: 70px; height: 70px; padding: 18px; border: 1px solid var(--chief-line-strong); border-radius: 16px; color: var(--chief-accent); } +.evolutionInner h2 { font-size: clamp(2.2rem, 3.8vw, 4rem); } +.evolutionInner p { max-width: 65ch; margin: 22px 0 0; } +.evolutionInner p + p { margin-top: 12px; color: var(--chief-text); font-weight: 600; } + +.ctaSection { padding: 140px 40px; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(116, 184, 226, .13), transparent 32rem); } +.ctaInner { max-width: 820px; margin: 0 auto; } +.ctaInner > p { margin: 24px auto 0; font-size: 1.08rem; } +.ctaInner .pilotButton { margin-top: 34px; } +.ctaInner > span { display: block; margin-top: 18px; color: var(--chief-faint); font-size: .83rem; } + +@media (max-width: 1120px) { + .hero { padding-top: 72px; } + .heroCopy { max-width: 860px; } + .workflowTrack { grid-template-columns: repeat(2, 1fr); gap: 52px 0; } + .workflowItem:nth-child(2) { border-right: 0; margin-right: 0; } + .infrastructureInner { gap: 60px; } +} + +@media (max-width: 760px) { + .hero, .problemSection, .workflowSection, .responsibilitySection, .infrastructureSection, .evolutionSection, .ctaSection { padding-left: 20px; padding-right: 20px; } + .hero { min-height: auto; padding-top: 76px; padding-bottom: 52px; } + .hero h1 { max-width: 12ch; font-size: clamp(3rem, 15vw, 4.3rem); } + .heroLead { font-size: 1rem; } + .problemSection { padding-top: 88px; padding-bottom: 88px; } + .problemInner { grid-template-columns: 1fr; gap: 38px; } + .problemCopy { padding-left: 20px; } + .workflowSection { padding-top: 96px; padding-bottom: 104px; } + .workflowTrack { grid-template-columns: 1fr; gap: 0; margin-top: 54px; } + .workflowItem, .workflowItem:not(:last-child), .workflowItem:nth-child(2) { margin: 0; padding: 0 0 44px; border-right: 0; } + .workflowItem:last-child { padding-bottom: 0; } + .workflowRail { width: 48%; } + .responsibilitySection { padding-top: 96px; padding-bottom: 96px; } + .responsibilityDiagram { grid-template-columns: 1fr; margin-top: 48px; } + .compareArrow { transform: rotate(90deg); } + .beforeDiagram, .afterDiagram { min-height: 370px; padding: 22px; } + .infrastructureSection { padding-top: 102px; padding-bottom: 102px; } + .infrastructureInner { grid-template-columns: 1fr; gap: 52px; } + .chiefLayer { width: 88%; } + .evolutionSection { padding-top: 78px; padding-bottom: 78px; } + .evolutionInner { grid-template-columns: 1fr; gap: 26px; } + .evolutionInner > svg { width: 58px; height: 58px; padding: 15px; } + .ctaSection { padding-top: 104px; padding-bottom: 104px; } +} + +@media (max-width: 440px) { + .hero h1 { max-width: 10ch; } + .heroActions { align-items: stretch; flex-direction: column; } + .pilotButton, .secondaryButton { width: 100%; } + .problemInner h2, .sectionIntro h2, .responsibilityIntro h2, .infrastructureCopy h2, .evolutionInner h2, .ctaInner h2 { font-size: 2.35rem; } + .manualMap { transform: scale(.92); transform-origin: center; margin-inline: -2px; } + .capabilityGrid { grid-template-columns: 1fr; } +} + +@media (prefers-reduced-motion: reduce) { + .pilotButton, .pilotButtonCompact, .secondaryButton { transition: none; } + .pilotButton:hover, .pilotButtonCompact:hover, .secondaryButton:hover, .pilotButton:active, .pilotButtonCompact:active, .secondaryButton:active { transform: none; } +} diff --git a/web/app/chief/og.png/route.tsx b/web/app/chief/og.png/route.tsx new file mode 100644 index 0000000..8f83632 --- /dev/null +++ b/web/app/chief/og.png/route.tsx @@ -0,0 +1,24 @@ +import { ImageResponse } from 'next/og'; + +import { DefaultVariant, loadBrandFonts, OG_SIZE } from '../../../lib/og/template'; + +export const runtime = 'nodejs'; +export const dynamic = 'force-static'; + +export async function GET() { + const { fonts, headingFamily, bodyFamily } = await loadBrandFonts(); + + return new ImageResponse( + , + { + ...OG_SIZE, + ...(fonts.length > 0 ? { fonts } : {}), + } + ); +} diff --git a/web/app/chief/page.tsx b/web/app/chief/page.tsx new file mode 100644 index 0000000..ee1d793 --- /dev/null +++ b/web/app/chief/page.tsx @@ -0,0 +1,256 @@ +import type { Metadata } from 'next'; +import Link from 'next/link'; +import { + ArrowDown, + ArrowRight, + Bot, + FileCode2, + Files, + GitBranch, + GitPullRequest, + KeyRound, + ListTodo, + MessagesSquare, + ShieldCheck, + UserRound, + Workflow, +} from 'lucide-react'; + +import { FadeIn } from '../../components/FadeIn'; +import { SiteFooter } from '../../components/SiteFooter'; +import { SiteNav } from '../../components/SiteNav'; +import { ogImage } from '../../lib/og-meta'; +import { absoluteUrl } from '../../lib/site'; +import s from './chief.module.css'; + +const pilotHref = 'https://agentrelay.com/will'; +const description = + 'Chief manages coding-agent teams across your Linear or GitHub backlog and returns pull requests ready for review.'; +const ogPath = '/chief/og.png'; + +export const metadata: Metadata = { + title: { absolute: 'Chief by Agent Relay | Run your engineering backlog with agent teams' }, + description, + alternates: { canonical: absoluteUrl('/chief') }, + robots: { index: true, follow: true }, + openGraph: { + title: 'Chief by Agent Relay | The Agent Software Manager', + description, + url: absoluteUrl('/chief'), + type: 'website', + images: [ogImage(ogPath, 'Chief coordinates coding-agent teams across an engineering backlog')], + }, + twitter: { + card: 'summary_large_image', + title: 'Chief by Agent Relay | The Agent Software Manager', + description, + images: [absoluteUrl(ogPath)], + }, +}; + +const workflow = [ + { + icon: ListTodo, + title: 'Import the work', + body: 'Chief takes issues from Linear or GitHub and determines what can run in parallel.', + detail: 'Backlog in', + }, + { + icon: Bot, + title: 'Start the right team', + body: 'For each issue, Chief assembles and directs the coding agents needed to implement and review it.', + detail: 'Teams assigned', + }, + { + icon: Workflow, + title: 'Keep the work moving', + body: 'Chief passes context, monitors progress, handles handoffs, and escalates decisions that need human judgment.', + detail: 'Work managed', + }, + { + icon: GitPullRequest, + title: 'Review the result', + body: 'You receive pull requests ready for review instead of a collection of unfinished agent sessions.', + detail: 'PRs returned', + }, +]; + +const relayCapabilities = [ + { icon: MessagesSquare, label: 'Real-time messaging' }, + { icon: Files, label: 'Shared context and files' }, + { icon: ShieldCheck, label: 'Scoped permissions' }, + { icon: KeyRound, label: 'Authentication' }, + { icon: GitBranch, label: 'Workflow state' }, +]; + +function PilotButton({ compact = false }: { compact?: boolean }) { + return ( + + Request a pilot + + ); +} + +function ResponsibilityDiagram() { + return ( +
+
+

Before Chief

+
+ + Agent + Agent + Agent + Task + Review + Context +
+

Every handoff runs through you.

+
+ +
+ ); +} + +export default function ChiefPage() { + const navAction = ; + + return ( +
+ + +
+
+
+
+

The Agent Software Manager

+

Let an agent manage the coordination of your agents. Step in when you need to.

+
+ + + See how Chief works +
+
+
+
+ +
+ +

Coding agents created a new management job.

+
+

You can run eight coding agents at once. But then you spend the day starting them, passing context, checking progress, recovering failures, and deciding what happens next.

+

The agents may be writing the code, but you are still managing every handoff.

+
+ +
+ +
+
+ +

Give Chief the backlog.

+

Chief turns a queue of issues into coordinated work that comes back in a form engineers already know how to review.

+ +
+ +
+ {workflow.map((item, index) => { + const Icon = item.icon; + return ( + + +
+

{item.detail}

+

{item.title}

+

{item.body}

+ + ); + })} +
+
+ +
+ +

You review the work. Chief manages the work.

+

Chief does not remove engineering judgment. It removes engineers from the coordination loop.

+

You set priorities, permissions, and approval boundaries. Chief manages the agents. You review the pull requests and make the decisions that matter.

+ + + + +
+ +
+
+ +

Relay underneath. Chief on top.

+

Agent Relay provides the durable communication layer beneath Chief across models, harnesses, and environments.

+

Chief uses that infrastructure to coordinate long-running software work without requiring a human to relay every message.

+ + + +
+ Management layer + Chief +

Backlog planning, team direction, progress, handoffs, escalation

+
+
+ Communication layer + Agent Relay +
+ {relayCapabilities.map((capability) => { + const Icon = capability.icon; + return ; + })} +
+
+ +
+
+ +
+ + +
+ +
+ +

Stop managing every agent.

+

Run more of your engineering backlog without becoming the bottleneck.

+ + We are onboarding a small number of engineering teams as design partners. + +
+
+ + +
+ ); +} diff --git a/web/app/sitemap.ts b/web/app/sitemap.ts index b321fce..e2c7bad 100644 --- a/web/app/sitemap.ts +++ b/web/app/sitemap.ts @@ -73,6 +73,12 @@ export default function sitemap(): MetadataRoute.Sitemap { changeFrequency: 'monthly', priority: 0.8, }, + { + url: absoluteUrl('/chief'), + lastModified: now, + changeFrequency: 'weekly', + priority: 0.9, + }, { url: absoluteUrl('/primitives'), lastModified: now,