|
| 1 | +--- |
| 2 | +const EPIC_URL = 'https://github.com/InterestingSoftware/SproutGit/issues/134'; |
| 3 | +
|
| 4 | +const pillars = [ |
| 5 | + { |
| 6 | + icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>`, |
| 7 | + title: 'Any agent', |
| 8 | + desc: 'Launch Claude Code, Codex CLI, Gemini CLI, Cursor, or Kiro in any worktree — as a terminal session or an integrated chat. Custom commands welcome; a roster of ad-hoc ACP agents is on the way.', |
| 9 | + }, |
| 10 | + { |
| 11 | + icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`, |
| 12 | + title: 'Any model', |
| 13 | + desc: 'No built-in subscription, no lock-in. Bring your own tools today; a provider registry — Anthropic, OpenAI, Google, OpenRouter, or any OpenAI-compatible endpoint — is on the roadmap.', |
| 14 | + }, |
| 15 | + { |
| 16 | + icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="8"/><line x1="12" y1="16" x2="12" y2="22"/><line x1="2" y1="12" x2="8" y2="12"/><line x1="16" y1="12" x2="22" y2="12"/></svg>`, |
| 17 | + title: 'Every session visible', |
| 18 | + desc: 'Live badges show which worktrees have agents working. A mission-control overlay lists every running session across the workspace, with one-click jump to any terminal.', |
| 19 | + }, |
| 20 | + { |
| 21 | + icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4"/><path d="M15 3h4a2 2 0 0 1 2 2v4"/><path d="M9 21H5a2 2 0 0 1-2-2v-4"/><path d="M15 21h4a2 2 0 0 0 2-2v-4"/><circle cx="12" cy="12" r="2.5"/></svg>`, |
| 22 | + title: 'MCP built in', |
| 23 | + desc: 'Every workspace runs its own MCP server, so agents get real tools — worktrees, hooks, status — instead of guessing at shell commands. One-click config for popular agent CLIs.', |
| 24 | + }, |
| 25 | +]; |
| 26 | +
|
| 27 | +const flow = [ |
| 28 | + { step: '01', title: 'Plan', desc: 'Hand a big task to a strong model in its own orchestration worktree — it reads your steering docs and breaks the work down.' }, |
| 29 | + { step: '02', title: 'Fan out', desc: 'Each subtask gets a fresh worktree and a worker agent. Parallel by default — no collisions, no stashing.' }, |
| 30 | + { step: '03', title: 'Review', desc: 'Workers finish; you review each small diff against the integration branch. Blocked sessions surface instead of stalling silently.' }, |
| 31 | + { step: '04', title: 'Ship', desc: 'The integrated stream of work goes up as one roll-up PR. Checks, comments, and merge — without leaving the app.' }, |
| 32 | +]; |
| 33 | +--- |
| 34 | + |
| 35 | +<section id="ai" style="padding: 6rem 2rem; position: relative; overflow: hidden;"> |
| 36 | + <div style="max-width: 1200px; margin: 0 auto;"> |
| 37 | + |
| 38 | + <!-- Section header --> |
| 39 | + <div data-animate style="text-align: center; margin-bottom: 3.5rem;"> |
| 40 | + <p style="font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--sg-primary);margin:0 0 0.75rem;"> |
| 41 | + Built for the way software is made now |
| 42 | + </p> |
| 43 | + <h2 style="font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;letter-spacing:-0.03em;color:var(--sg-text);margin:0 0 1rem;"> |
| 44 | + Agent-native.<br> |
| 45 | + <span style="color:var(--sg-primary);">Not agent-flavored.</span> |
| 46 | + </h2> |
| 47 | + <p style="max-width:560px;margin:0 auto;color:var(--sg-text-dim);font-size:1.05rem;line-height:1.7;"> |
| 48 | + Most tools bolt a chatbot onto yesterday's workflow. SproutGit starts from the |
| 49 | + thing agents actually need — an isolated place to work — and builds the whole |
| 50 | + desktop around supervising many of them at once. |
| 51 | + </p> |
| 52 | + </div> |
| 53 | + |
| 54 | + <!-- Pillars --> |
| 55 | + <div style=" |
| 56 | + display: grid; |
| 57 | + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); |
| 58 | + gap: 1.25rem; |
| 59 | + " data-stagger> |
| 60 | + {pillars.map(p => ( |
| 61 | + <div class="feature-card" data-animate> |
| 62 | + <span style=" |
| 63 | + display:inline-flex;align-items:center;justify-content:center; |
| 64 | + width:38px;height:38px;border-radius:9px;margin-bottom:0.875rem; |
| 65 | + background:color-mix(in srgb, var(--sg-primary) 12%, transparent); |
| 66 | + color:var(--sg-primary); |
| 67 | + " set:html={p.icon} /> |
| 68 | + <h3 style="font-size:0.95rem;font-weight:700;color:var(--sg-text);margin:0 0 0.5rem;letter-spacing:-0.01em;"> |
| 69 | + {p.title} |
| 70 | + </h3> |
| 71 | + <p style="font-size:0.85rem;color:var(--sg-text-dim);margin:0;line-height:1.65;"> |
| 72 | + {p.desc} |
| 73 | + </p> |
| 74 | + </div> |
| 75 | + ))} |
| 76 | + </div> |
| 77 | + |
| 78 | + <!-- The loop: where this is going --> |
| 79 | + <div data-animate style=" |
| 80 | + margin-top: 3.5rem; |
| 81 | + border: 1px solid color-mix(in srgb, var(--sg-primary) 20%, var(--sg-border-subtle)); |
| 82 | + border-radius: 16px; |
| 83 | + padding: 2.25rem 2rem; |
| 84 | + background: color-mix(in srgb, var(--sg-primary) 4%, var(--sg-surface)); |
| 85 | + "> |
| 86 | + <div style="display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;"> |
| 87 | + <h3 style="font-size:1.15rem;font-weight:700;color:var(--sg-text);margin:0;letter-spacing:-0.01em;"> |
| 88 | + The loop we're building toward |
| 89 | + </h3> |
| 90 | + <a href={EPIC_URL} target="_blank" rel="noopener noreferrer" |
| 91 | + style="font-size:0.8rem;font-weight:600;color:var(--sg-primary);text-decoration:none;"> |
| 92 | + Follow the roadmap on GitHub → |
| 93 | + </a> |
| 94 | + </div> |
| 95 | + |
| 96 | + <div class="agent-flow-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;"> |
| 97 | + {flow.map(f => ( |
| 98 | + <div> |
| 99 | + <div style="font-family:monospace;font-size:0.75rem;font-weight:700;color:var(--sg-primary);margin-bottom:0.5rem;"> |
| 100 | + {f.step} |
| 101 | + </div> |
| 102 | + <div style="font-size:0.9rem;font-weight:700;color:var(--sg-text);margin-bottom:0.35rem;"> |
| 103 | + {f.title} |
| 104 | + </div> |
| 105 | + <p style="font-size:0.8rem;color:var(--sg-text-dim);margin:0;line-height:1.6;"> |
| 106 | + {f.desc} |
| 107 | + </p> |
| 108 | + </div> |
| 109 | + ))} |
| 110 | + </div> |
| 111 | + |
| 112 | + <p style="margin:1.75rem 0 0;font-size:0.8rem;color:var(--sg-text-faint);line-height:1.6;"> |
| 113 | + Launching agents in isolated worktrees, integrated chat, session tracking, hooks, and the |
| 114 | + MCP server ship today. Orchestration, fan-out, and in-app PR review are in active development — |
| 115 | + in the open, where you can watch (or help). |
| 116 | + </p> |
| 117 | + </div> |
| 118 | + </div> |
| 119 | +</section> |
| 120 | + |
| 121 | +<style> |
| 122 | + @media (max-width: 900px) { |
| 123 | + .agent-flow-grid { grid-template-columns: repeat(2, 1fr) !important; } |
| 124 | + } |
| 125 | + @media (max-width: 520px) { |
| 126 | + .agent-flow-grid { grid-template-columns: 1fr !important; } |
| 127 | + } |
| 128 | +</style> |
0 commit comments