@sentry/warden 0.0.0

package/docs/src/pages/index.astro

@@ -0,0 +1,490 @@
+---
+import Base from '../layouts/Base.astro';
+import Terminal from '../components/Terminal.astro';
+import PackageManagerTabs from '../components/PackageManagerTabs.astro';
+
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+---
+
+<Base title="Home" description="Agents that review your code. Locally or on every PR.">
+  <div class="hero">
+    <p class="tagline">Your Code Is Under New Management</p>
+    <p class="tagline-sub">Agents that review your code. Locally or on every PR.</p>
+
+    <div class="cta-buttons">
+      <a href={`${base}/guide`} class="btn btn-primary">Get Started</a>
+    </div>
+  </div>
+
+  <section class="quick-start">
+    <div class="step">
+      <h3>Install</h3>
+      <p>Install the CLI globally.</p>
+      <PackageManagerTabs
+        npm="npm install -g @sentry/warden"
+        pnpm="pnpm add -g @sentry/warden"
+        bun="bun add -g @sentry/warden"
+      />
+    </div>
+
+    <div class="step">
+      <h3>Initialize</h3>
+      <p>Scaffold your project with config and GitHub workflow.</p>
+      <Terminal showCopy={true} copyText="warden init">
+        <pre class="cli-output"><span class="cli-dim">$</span> warden init
+
+<span class="cli-green">Created</span> warden.toml
+<span class="cli-green">Created</span> .github/workflows/warden.yml
+
+<span class="cli-bold">Next steps:</span>
+  1. Add a skill: <span class="cli-cyan">warden add &lt;skill-name&gt;</span>
+  2. Set <span class="cli-cyan">WARDEN_ANTHROPIC_API_KEY</span> in .env.local
+  3. Add <span class="cli-cyan">WARDEN_ANTHROPIC_API_KEY</span> to repository secrets
+     <span class="cli-dim">https://github.com/your-org/your-repo/settings/secrets/actions</span>
+  4. Commit and open a PR to test</pre>
+      </Terminal>
+    </div>
+
+    <div class="step">
+      <h3>Add some skills</h3>
+      <p>Install a skill from the community. Vercel's React best practices is a great start.</p>
+      <PackageManagerTabs
+        npm={`npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
+warden add vercel-react-best-practices`}
+        pnpm={`pnpx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
+warden add vercel-react-best-practices`}
+        bun={`bunx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
+warden add vercel-react-best-practices`}
+      />
+    </div>
+
+    <div class="step">
+      <h3>Run Locally</h3>
+      <p>Catch issues before you push. Fix them immediately.</p>
+      <Terminal showCopy={false}>
+        <pre class="cli-output"><span class="cli-dim">$</span> warden
+
+Analyzing uncommitted changes...
+
+<span class="cli-bold">FILES</span>  <span class="cli-cyan">3 files</span> <span class="cli-dim">· 5 chunks</span>
+  <span class="cli-yellow">~</span> src/components/UserList.tsx <span class="cli-dim">(2 chunks)</span>
+  <span class="cli-yellow">~</span> src/components/Dashboard.tsx <span class="cli-dim">(2 chunks)</span>
+  <span class="cli-green">+</span> src/components/Modal.tsx <span class="cli-dim">(1 chunk)</span>
+
+┌─ <span class="cli-bold">vercel-react-best-practices</span> ──────────────────────────── <span class="cli-dim">8.2s</span> ─┐
+│ <span class="cli-bold">2 findings:</span> <span class="cli-yellow">●</span> 1 medium  <span class="cli-cyan">●</span> 1 low                                 │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ <span class="cli-yellow">●</span> <span class="cli-bold">Missing React.memo for list items</span>                             │
+│   <span class="cli-dim">src/components/UserList.tsx:15</span>                                │
+│   <span class="cli-dim">15 │</span> const UserCard = (&#123; user &#125;) =&gt; &lt;div&gt;&#123;user.name&#125;&lt;/div&gt;;   │
+│                                                                 │
+│   List item components should be memoized to prevent            │
+│   unnecessary re-renders when parent state changes.             │
+│                                                                 │
+│ <span class="cli-cyan">●</span> <span class="cli-bold">useEffect missing dependency</span>                                  │
+│   <span class="cli-dim">src/components/Dashboard.tsx:23</span>                               │
+│   <span class="cli-dim">23 │</span> useEffect(() =&gt; &#123; fetchData() &#125;, [])                     │
+│                                                                 │
+│   The dependency array is missing 'fetchData'. This could       │
+│   lead to stale closures or unexpected behavior.                │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+
+<span class="cli-bold">SUMMARY</span>
+<span class="cli-bold">2 findings:</span> <span class="cli-yellow">●</span> 1 medium  <span class="cli-cyan">●</span> 1 low
+Analysis completed in <span class="cli-dim">8.2s</span></pre>
+      </Terminal>
+    </div>
+
+    <div class="step">
+      <h3>Keep an Eye on GitHub</h3>
+      <p>Open a PR and Warden reviews it automatically. Findings appear as suggested changes you can apply with one click.</p>
+      <div class="pr-mock">
+        <div class="pr-mock-header">
+          <div class="pr-mock-avatar">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="12" fill="#000"/>
+              <g transform="translate(12, 12) scale(0.65) translate(-12, -12)">
+                <path d="M14.2666 4.9061C15.1564 4.09409 16.5921 4.60917 16.7627 5.80162L18.1123 15.2519C18.9476 14.5758 19.6675 14.156 20.2706 13.9423C20.9583 13.6988 21.61 13.6893 22.0606 14.0459C22.5331 14.4202 22.576 15.0232 22.4131 15.5224C22.2471 16.0308 21.8525 16.5326 21.2774 16.916C20.2382 17.6088 19.1848 18.1368 17.7432 18.4863C16.3131 18.833 14.518 19 12 19C9.48202 19 7.68685 18.833 6.25679 18.4863C4.81521 18.1368 3.76183 17.6088 2.72259 16.916C2.14753 16.5326 1.75289 16.0308 1.58684 15.5224C1.42401 15.0233 1.46701 14.4202 1.93938 14.0459C2.38997 13.6893 3.04168 13.6988 3.72943 13.9423C4.33238 14.1559 5.05163 14.5761 5.88667 15.2519L7.23727 5.80162C7.40784 4.60919 8.84362 4.09419 9.73338 4.9061L11.6631 6.66686C11.854 6.84121 12.146 6.84121 12.3369 6.66686L14.2666 4.9061Z" fill="white"/>
+                <path d="M12 8L13.1226 11.1094H16.7553L13.8164 13.0312L14.9389 16.1406L12 14.2188L9.06107 16.1406L10.1836 13.0312L7.24472 11.1094H10.8774L12 8Z" fill="#000"/>
+              </g>
+            </svg>
+          </div>
+          <div class="pr-mock-meta">
+            <span class="pr-mock-name">warden</span>
+            <span class="pr-mock-badge">bot</span>
+            <span class="pr-mock-time">commented now</span>
+          </div>
+        </div>
+        <div class="pr-mock-body">
+          <div class="pr-mock-finding">
+            <span class="pr-mock-severity severity-medium"></span>
+            <span class="pr-mock-title">Missing React.memo for list items</span>
+          </div>
+          <p class="pr-mock-desc">List item components should be memoized to prevent unnecessary re-renders when parent state changes.</p>
+          <p class="pr-mock-suggestion-label"><strong>Suggested fix:</strong> Wrap UserCard with React.memo</p>
+          <div class="pr-mock-suggestion">
+            <div class="pr-mock-suggestion-header">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M8.75 1.75V5H12a.75.75 0 010 1.5H8.75v3.25a.75.75 0 01-1.5 0V6.5H4a.75.75 0 010-1.5h3.25V1.75a.75.75 0 011.5 0zM4 13a.75.75 0 000 1.5h8a.75.75 0 000-1.5H4z"/>
+              </svg>
+              <span>Suggested change</span>
+            </div>
+            <div class="pr-mock-suggestion-diff">
+              <div class="pr-mock-diff-line diff-old">
+                <span class="diff-marker">−</span>
+                <span class="diff-content">const UserCard = (&#123; user &#125;) =&gt; &lt;div&gt;&#123;user.name&#125;&lt;/div&gt;;</span>
+              </div>
+              <div class="pr-mock-diff-line diff-new">
+                <span class="diff-marker">+</span>
+                <span class="diff-content">const UserCard = React.memo((&#123; user &#125;) =&gt; (</span>
+              </div>
+              <div class="pr-mock-diff-line diff-new">
+                <span class="diff-marker">+</span>
+                <span class="diff-content">  &lt;div&gt;&#123;user.name&#125;&lt;/div&gt;</span>
+              </div>
+              <div class="pr-mock-diff-line diff-new">
+                <span class="diff-marker">+</span>
+                <span class="diff-content">));</span>
+              </div>
+            </div>
+            <div class="pr-mock-suggestion-actions">
+              <button class="pr-mock-commit-btn">Commit suggestion</button>
+            </div>
+          </div>
+        </div>
+        <div class="pr-mock-footer">
+          <a href="#" class="pr-mock-link">View all 2 findings</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section next-steps">
+    <h2>Next Steps</h2>
+    <div class="next-steps-grid">
+      <a href={`${base}/cli`} class="next-step-card">
+        <strong>CLI Reference</strong>
+        <p>Commands, options, and usage examples</p>
+      </a>
+      <a href={`${base}/guide`} class="next-step-card">
+        <strong>Configure triggers</strong>
+        <p>Control when skills run with <code>warden.toml</code></p>
+      </a>
+    </div>
+  </section>
+
+</Base>
+
+<style>
+  .hero {
+    text-align: center;
+    padding: 3rem 0 2rem;
+  }
+
+  .tagline {
+    font-family: var(--font-mono);
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0;
+    line-height: 1.1;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #fff;
+  }
+
+  .tagline-sub {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin: 1rem 0 2rem;
+  }
+
+  .cta-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+  }
+
+  .btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    border-radius: 6px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: opacity 0.15s ease;
+  }
+
+  .btn-primary {
+    background: #fff;
+    color: #000;
+  }
+
+  .btn-primary:hover {
+    opacity: 0.9;
+    color: #000;
+  }
+
+  /* Quick Start Steps */
+  .quick-start {
+    margin-top: 3rem;
+  }
+
+  .step {
+    margin-bottom: 2.5rem;
+  }
+
+  .step:last-child {
+    margin-bottom: 0;
+  }
+
+  .step h3 {
+    margin: 0 0 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 1.125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .step > p {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+  }
+
+  /* PR Mock */
+  .pr-mock {
+    background: #000;
+    border: 1px solid #21262d;
+    border-radius: 6px;
+    overflow: hidden;
+    font-size: 0.875rem;
+    margin-top: 1rem;
+  }
+
+  .pr-mock-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: #0d1117;
+    border-bottom: 1px solid #21262d;
+  }
+
+  .pr-mock-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .pr-mock-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .pr-mock-name {
+    font-weight: 600;
+    color: #8b949e;
+  }
+
+  .pr-mock-badge {
+    background: #238636;
+    color: #fff;
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .pr-mock-time {
+    color: #8b949e;
+    font-size: 0.75rem;
+  }
+
+  .pr-mock-body {
+    padding: 1rem;
+  }
+
+  .pr-mock-finding {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .pr-mock-severity {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .pr-mock-severity.severity-medium {
+    background: #d29922;
+  }
+
+  .pr-mock-title {
+    font-weight: 600;
+    color: #9198a1;
+  }
+
+  .pr-mock-desc {
+    color: #9198a1;
+    margin: 0 0 0.75rem;
+    line-height: 1.5;
+  }
+
+  .pr-mock-suggestion-label {
+    color: #9198a1;
+    margin: 0 0 0.75rem;
+  }
+
+  .pr-mock-suggestion {
+    background: #0d1117;
+    border: 1px solid #21262d;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .pr-mock-suggestion-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: #161b22;
+    border-bottom: 1px solid #21262d;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #8b949e;
+  }
+
+  .pr-mock-suggestion-diff {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    line-height: 1.6;
+  }
+
+  .pr-mock-diff-line {
+    display: flex;
+    padding: 0 0.75rem;
+  }
+
+  .pr-mock-diff-line.diff-old {
+    background: rgba(248, 81, 73, 0.15);
+  }
+
+  .pr-mock-diff-line.diff-new {
+    background: rgba(63, 185, 80, 0.15);
+  }
+
+  .diff-marker {
+    width: 1.5rem;
+    flex-shrink: 0;
+    text-align: center;
+    user-select: none;
+  }
+
+  .diff-content {
+    flex: 1;
+    white-space: pre;
+  }
+
+  .diff-old .diff-marker { color: #f85149; }
+  .diff-old .diff-content { color: #ffa198; }
+
+  .diff-new .diff-marker { color: #3fb950; }
+  .diff-new .diff-content { color: #7ee787; }
+
+  .pr-mock-suggestion-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid #21262d;
+    background: #161b22;
+  }
+
+  .pr-mock-commit-btn {
+    background: #238636;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .pr-mock-commit-btn:hover {
+    background: #2ea043;
+  }
+
+  .pr-mock-footer {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #30363d;
+  }
+
+  .pr-mock-link {
+    font-size: 0.8125rem;
+    color: #58a6ff;
+  }
+
+  .pr-mock-link:hover {
+    text-decoration: underline;
+  }
+
+  /* Next Steps */
+  .next-steps-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+
+  .next-step-card {
+    display: block;
+    padding: 1.25rem 1.5rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    color: inherit;
+  }
+
+  .next-step-card:hover {
+    border-color: var(--border-strong);
+    background: rgba(255, 255, 255, 0.04);
+    color: inherit;
+  }
+
+  .next-step-card strong {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--text);
+  }
+
+  .next-step-card p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+  }
+
+  .next-step-card code {
+    font-size: 0.8125rem;
+  }
+
+  @media (max-width: 768px) {
+    .tagline {
+      font-size: 1.25rem;
+      letter-spacing: 0.02em;
+    }
+
+    .next-steps-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .step > p {
+      margin-left: 0;
+    }
+  }
+</style>