Hop
0cb027737e
Hop-State: A_06FN6S8S3T184C0AS6MXQ08 Hop-Proposal: R_06FN6S5PSBAXTT4CDRPQS0R Hop-Task: T_06FN6N560GHE00H1ACBKR8G Hop-Attempt: AT_06FN6N560G6CPSCDTN8C48R
629 lines
16 KiB
Cheetah
629 lines
16 KiB
Cheetah
{{template "base/head" .}}
|
|
<style>
|
|
.hop-agent-home {
|
|
--hop-agent-accent: color-mix(in srgb, var(--color-primary) 62%, var(--color-text));
|
|
color: var(--color-text);
|
|
margin: 0 auto;
|
|
max-width: 1120px;
|
|
padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(5rem, 9vw, 8rem);
|
|
width: 100%;
|
|
}
|
|
|
|
.hop-agent-home *,
|
|
.hop-agent-home *::before,
|
|
.hop-agent-home *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hop-agent-home > :first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.hop-agent-home h1,
|
|
.hop-agent-home h2,
|
|
.hop-agent-home h3,
|
|
.hop-agent-home p,
|
|
.hop-agent-home ol,
|
|
.hop-agent-home table {
|
|
margin: 0;
|
|
}
|
|
|
|
.hop-agent-home h1,
|
|
.hop-agent-home h2,
|
|
.hop-agent-home h3 {
|
|
color: var(--color-text);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hop-agent-label {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
line-height: 1.35;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hop-agent-hero {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: clamp(2.5rem, 5vw, 5rem);
|
|
grid-template-columns: minmax(0, 1fr) clamp(280px, 29vw, 400px);
|
|
}
|
|
|
|
.hop-agent-hero-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hop-agent-hero h1 {
|
|
font-size: clamp(3.2rem, 6.1vw, 5.5rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.06em;
|
|
line-height: 0.96;
|
|
margin-top: 1.35rem;
|
|
max-width: 16ch;
|
|
}
|
|
|
|
.hop-agent-hero h1 span {
|
|
display: block;
|
|
}
|
|
|
|
.hop-agent-hero h1 span:last-child {
|
|
color: var(--hop-agent-accent);
|
|
}
|
|
|
|
.hop-agent-lede {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: clamp(1.12rem, 1.7vw, 1.32rem);
|
|
line-height: 1.6;
|
|
margin-top: 2rem !important;
|
|
max-width: 68ch;
|
|
}
|
|
|
|
.hop-agent-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.hop-agent-actions .button {
|
|
margin: 0;
|
|
}
|
|
|
|
.hop-agent-note {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
margin-top: 1.2rem !important;
|
|
}
|
|
|
|
.hop-agent-mascot {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0;
|
|
min-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hop-agent-mascot img {
|
|
display: block;
|
|
filter: drop-shadow(0 1.5rem 2.5rem color-mix(in srgb, var(--color-primary) 18%, transparent));
|
|
height: auto;
|
|
max-width: 100%;
|
|
width: 400px;
|
|
}
|
|
|
|
.hop-agent-flow {
|
|
border-top: 1px solid var(--color-secondary);
|
|
display: grid;
|
|
gap: clamp(3rem, 7vw, 6rem);
|
|
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
|
|
margin-top: clamp(3.5rem, 5vw, 5rem);
|
|
padding-top: clamp(2.25rem, 3.5vw, 3.5rem);
|
|
}
|
|
|
|
.hop-agent-section-heading h2 {
|
|
font-size: clamp(2.2rem, 4vw, 3.6rem);
|
|
font-weight: 650;
|
|
letter-spacing: -0.045em;
|
|
line-height: 1.04;
|
|
margin-top: 0.9rem;
|
|
}
|
|
|
|
.hop-agent-section-heading > p:last-child {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
margin-top: 1.2rem !important;
|
|
max-width: 48ch;
|
|
}
|
|
|
|
.hop-agent-steps {
|
|
border-top: 1px solid var(--color-secondary);
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.hop-agent-steps li {
|
|
align-items: start;
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: 2rem minmax(7rem, 0.42fr) minmax(0, 1fr);
|
|
padding: 1.45rem 0;
|
|
}
|
|
|
|
.hop-agent-step-number {
|
|
color: var(--color-text-light-2);
|
|
font-family: var(--fonts-monospace);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hop-agent-steps h3 {
|
|
font-size: 1.08rem;
|
|
font-weight: 650;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.hop-agent-steps p {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: 0.96rem;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.hop-agent-why {
|
|
border-top: 1px solid var(--color-secondary);
|
|
margin-top: clamp(3.5rem, 5vw, 5rem);
|
|
padding-top: clamp(2.25rem, 3.5vw, 3.5rem);
|
|
}
|
|
|
|
.hop-agent-why .hop-agent-section-heading {
|
|
max-width: 760px;
|
|
}
|
|
|
|
.hop-agent-table-wrap {
|
|
margin-top: clamp(2.75rem, 5vw, 4.5rem);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.hop-agent-compare {
|
|
border-collapse: collapse;
|
|
min-width: 700px;
|
|
width: 100%;
|
|
}
|
|
|
|
.hop-agent-compare caption {
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
.hop-agent-compare th,
|
|
.hop-agent-compare td {
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
padding: 1.1rem 1rem 1.1rem 0;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.hop-agent-compare thead th {
|
|
color: var(--color-text-light-2);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hop-agent-compare tbody th {
|
|
color: var(--color-text);
|
|
font-size: 0.94rem;
|
|
font-weight: 650;
|
|
width: 19%;
|
|
}
|
|
|
|
.hop-agent-compare td {
|
|
color: var(--color-text-light-2);
|
|
font-size: 0.94rem;
|
|
line-height: 1.5;
|
|
width: 40.5%;
|
|
}
|
|
|
|
.hop-agent-compare td:last-child {
|
|
color: var(--color-text);
|
|
font-weight: 550;
|
|
}
|
|
|
|
.hop-agent-installs {
|
|
border-top: 1px solid var(--color-secondary);
|
|
margin-top: 1.5rem;
|
|
max-width: 100%;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.hop-agent-install-heading {
|
|
align-items: baseline;
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hop-agent-install-shell {
|
|
border: 1px solid var(--color-secondary);
|
|
border-radius: var(--border-radius);
|
|
margin-top: 0.7rem;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hop-agent-install-tabs {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.hop-agent-install-tab {
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: calc(var(--border-radius) - 2px);
|
|
color: var(--color-text-light-2);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
padding: 0.55rem 0.7rem;
|
|
}
|
|
|
|
.hop-agent-install-tab[aria-pressed="true"] {
|
|
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.hop-agent-install-tab:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.hop-agent-install-command {
|
|
align-items: center;
|
|
background: color-mix(in srgb, var(--color-secondary) 42%, transparent);
|
|
border-top: 1px solid var(--color-secondary);
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
min-width: 0;
|
|
padding: 0.75rem 0.8rem;
|
|
}
|
|
|
|
.hop-agent-copy-button {
|
|
background: transparent;
|
|
border: 1px solid var(--color-secondary);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
padding: 0.5rem 0.65rem;
|
|
}
|
|
|
|
.hop-agent-copy-button:hover {
|
|
background: color-mix(in srgb, var(--color-primary) 16%, transparent);
|
|
}
|
|
|
|
.hop-agent-copy-button:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.hop-agent-install-command code {
|
|
color: var(--color-text);
|
|
display: block;
|
|
font-family: var(--fonts-monospace);
|
|
font-size: clamp(0.72rem, 1.12vw, 0.84rem);
|
|
line-height: 1.45;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.hop-agent-copy-status {
|
|
color: var(--color-text-light-2);
|
|
display: block;
|
|
font-size: 0.78rem;
|
|
line-height: 1.3;
|
|
margin-top: 0.45rem;
|
|
}
|
|
|
|
.hop-agent-copy-status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.hop-agent-repo-link {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.hop-agent-repo-link::after {
|
|
content: '↗';
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.hop-agent-finish {
|
|
align-items: end;
|
|
border-top: 1px solid var(--color-secondary);
|
|
display: grid;
|
|
gap: 2rem;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
margin-top: clamp(3rem, 4.5vw, 4.5rem);
|
|
padding-top: clamp(2.25rem, 3.5vw, 3.5rem);
|
|
}
|
|
|
|
.hop-agent-finish h2 {
|
|
font-size: clamp(2.3rem, 4.8vw, 4.4rem);
|
|
font-weight: 650;
|
|
letter-spacing: -0.05em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.hop-agent-finish p {
|
|
color: var(--color-text-light-2) !important;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
margin-top: 1rem !important;
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.hop-agent-finish .button {
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.hop-agent-hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hop-agent-mascot img {
|
|
width: min(70vw, 320px);
|
|
}
|
|
|
|
.hop-agent-flow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hop-agent-flow .hop-agent-section-heading {
|
|
max-width: 620px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.hop-agent-home {
|
|
padding-top: 3.5rem;
|
|
}
|
|
|
|
.hop-agent-hero h1 {
|
|
font-size: clamp(2.75rem, 13vw, 4rem);
|
|
max-width: none;
|
|
}
|
|
|
|
.hop-agent-mascot img {
|
|
width: min(72vw, 260px);
|
|
}
|
|
|
|
.hop-agent-actions {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hop-agent-actions .button,
|
|
.hop-agent-finish .button {
|
|
width: 100%;
|
|
}
|
|
|
|
.hop-agent-steps li {
|
|
gap: 0.4rem 0.8rem;
|
|
grid-template-columns: 1.6rem minmax(0, 1fr);
|
|
}
|
|
|
|
.hop-agent-steps p {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.hop-agent-table-wrap {
|
|
overflow: visible;
|
|
}
|
|
|
|
.hop-agent-compare {
|
|
display: block;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hop-agent-compare thead {
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
.hop-agent-compare tbody,
|
|
.hop-agent-compare tr,
|
|
.hop-agent-compare th,
|
|
.hop-agent-compare td {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.hop-agent-compare tbody th,
|
|
.hop-agent-compare tbody td {
|
|
width: 100%;
|
|
}
|
|
|
|
.hop-agent-compare tbody tr {
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
padding: 1.35rem 0;
|
|
}
|
|
|
|
.hop-agent-compare tbody th,
|
|
.hop-agent-compare td {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.hop-agent-compare td {
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.hop-agent-compare td::before {
|
|
color: var(--color-text-light-2);
|
|
content: 'Standard Git';
|
|
display: block;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.09em;
|
|
margin-bottom: 0.2rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hop-agent-compare td:last-child::before {
|
|
color: var(--color-text-light-2);
|
|
content: 'Hop';
|
|
}
|
|
|
|
.hop-agent-finish {
|
|
align-items: start;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hop-agent-install-heading {
|
|
align-items: center;
|
|
}
|
|
|
|
.hop-agent-install-command {
|
|
align-items: start;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<main id="hop-main" tabindex="-1" role="main" aria-label="Hop, agent-first version control" class="page-content hop-agent-home">
|
|
<section class="hop-agent-hero" aria-labelledby="hop-agent-title">
|
|
<div class="hop-agent-hero-copy">
|
|
<p class="hop-agent-label">Agent-first version control</p>
|
|
<h1 id="hop-agent-title"><span>Tell agents what to build.</span><span>Hop handles the Git.</span></h1>
|
|
<p class="hop-agent-lede">Run one coding agent or many. Hop captures the request, isolates every attempt, combines concurrent edits, and routes real conflicts through an agent reconciliation loop. Once checks pass, the agent lands the result automatically by default. You do not have to manage a branch or write a commit.</p>
|
|
<div class="hop-agent-actions">
|
|
{{if .IsSigned}}
|
|
<a class="ui primary button" href="{{AppSubUrl}}/repo/create">Create a repository</a>
|
|
<a class="ui basic button" href="{{AppSubUrl}}/explore/repos">Explore repositories</a>
|
|
{{else}}
|
|
<a class="ui primary button" href="{{AppSubUrl}}/user/sign_up">Create a Hop account</a>
|
|
<a class="ui basic button" href="#why-hop">Why use Hop?</a>
|
|
{{end}}
|
|
</div>
|
|
<div class="hop-agent-installs" aria-label="Install Hop">
|
|
<div class="hop-agent-install-heading">
|
|
<p class="hop-agent-label">Install Hop</p>
|
|
<a class="hop-agent-repo-link" href="https://githop.xyz/GnosysLabs/Hop" target="_blank" rel="noreferrer">Repository</a>
|
|
</div>
|
|
<div class="hop-agent-install-shell">
|
|
<div class="hop-agent-install-tabs" role="group" aria-label="Installation platform">
|
|
<button class="hop-agent-install-tab" type="button" aria-pressed="true" data-hop-install-command="curl -fsSL https://githop.xyz/GnosysLabs/Hop/raw/branch/main/scripts/install.sh | sh" data-hop-install-platform="macOS and Linux">macOS + Linux</button>
|
|
<button class="hop-agent-install-tab" type="button" aria-pressed="false" data-hop-install-command="irm https://githop.xyz/GnosysLabs/Hop/raw/branch/main/scripts/install.ps1 | iex" data-hop-install-platform="Windows PowerShell">Windows</button>
|
|
</div>
|
|
<div class="hop-agent-install-command">
|
|
<code data-hop-install-command-output>curl -fsSL https://githop.xyz/GnosysLabs/Hop/raw/branch/main/scripts/install.sh | sh</code>
|
|
<button class="hop-agent-copy-button" type="button" data-hop-copy aria-label="Copy macOS and Linux installation command" aria-describedby="hop-install-status">Copy</button>
|
|
</div>
|
|
</div>
|
|
<span class="hop-agent-copy-status" id="hop-install-status" role="status" aria-live="polite"></span>
|
|
</div>
|
|
<p class="hop-agent-note">Git stays underneath for compatibility. The mechanics disappear from your workflow.</p>
|
|
</div>
|
|
<figure class="hop-agent-mascot">
|
|
<img src="{{AssetUrlPrefix}}/img/hop.svg?v=4" alt="Hop robot mascot" width="512" height="512" decoding="async" fetchpriority="high">
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="hop-agent-flow" aria-labelledby="hop-agent-flow-title">
|
|
<div class="hop-agent-section-heading">
|
|
<p class="hop-agent-label">One instruction in. Working code out.</p>
|
|
<h2 id="hop-agent-flow-title">From prompt to landed code, without Git ceremony.</h2>
|
|
<p>Hop runs the version-control workflow around your agents. You stay focused on the outcome.</p>
|
|
</div>
|
|
<ol class="hop-agent-steps">
|
|
<li>
|
|
<span class="hop-agent-step-number">01</span>
|
|
<h3>Prompt captured</h3>
|
|
<p>Your instruction becomes durable state before any agent touches the project.</p>
|
|
</li>
|
|
<li>
|
|
<span class="hop-agent-step-number">02</span>
|
|
<h3>Agents work in parallel</h3>
|
|
<p>Each agent runs in its own Hop workspace. Several can edit the same files at the same time.</p>
|
|
</li>
|
|
<li>
|
|
<span class="hop-agent-step-number">03</span>
|
|
<h3>Hop reconciles</h3>
|
|
<p>Compatible hunks merge automatically. A real conflict starts an agent reconciliation loop, then runs the checks again. Ordinary code conflicts never get handed back to you.</p>
|
|
</li>
|
|
<li>
|
|
<span class="hop-agent-step-number">04</span>
|
|
<h3>Code lands</h3>
|
|
<p>After required checks pass, the agent lands by default and Hop synchronizes the project. No manual commit, rebase, or merge.</p>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section class="hop-agent-why" id="why-hop" aria-labelledby="hop-agent-why-title">
|
|
<div class="hop-agent-section-heading">
|
|
<p class="hop-agent-label">Why not just Git?</p>
|
|
<h2 id="hop-agent-why-title">Git stores code. Hop runs the work.</h2>
|
|
<p>Git was designed to track and exchange source history, not to coordinate autonomous coding agents. Hop keeps Git underneath, then adds an agent workflow with state, isolation, evidence, reconciliation, and automatic landing after checks.</p>
|
|
</div>
|
|
<div class="hop-agent-table-wrap">
|
|
<table class="hop-agent-compare">
|
|
<caption>Comparison of standard Git workflows and Hop</caption>
|
|
<thead>
|
|
<tr><th scope="col">Work</th><th scope="col">Standard Git</th><th scope="col">Hop</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><th scope="row">Start</th><td>You create a branch or worktree.</td><td>Starting a task creates an isolated agent attempt.</td></tr>
|
|
<tr><th scope="row">Save progress</th><td>You decide when and how to commit.</td><td>Checks and follow-ups capture immutable checkpoints.</td></tr>
|
|
<tr><th scope="row">Parallel edits</th><td>Incompatible overlapping edits require manual conflict handling.</td><td>Hop three-way-merges compatible edits and sends unresolved conflicts through agent reconciliation.</td></tr>
|
|
<tr><th scope="row">Verify</th><td>Validation is conventionally attached to commits.</td><td>Hop records evidence for the exact checkpoint and requires checked reconciliation.</td></tr>
|
|
<tr><th scope="row">Finish</th><td>You merge, rebase, and clean up.</td><td>The agent lands checked work automatically by default.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="hop-agent-finish" aria-labelledby="hop-agent-finish-title">
|
|
<div>
|
|
<h2 id="hop-agent-finish-title">Git compatibility without Git busywork.</h2>
|
|
<p>Keep Git-compatible hosting and tooling underneath. The day-to-day branch, commit, rebase, and conflict choreography disappears.</p>
|
|
</div>
|
|
{{if .IsSigned}}
|
|
<a class="ui primary button" href="{{AppSubUrl}}/repo/create">Create a repository</a>
|
|
{{else}}
|
|
<a class="ui primary button" href="{{AppSubUrl}}/user/sign_up">Create a Hop account</a>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
{{template "base/footer" .}}
|