docs(website): shared full feature matrix on /compare and /features

Laurent Guitton · Laurent Guitton · commit a7ebb79be562 · 2026-07-04T00:41:58.000+02:00
Extract the feature-by-feature comparison from FeaturesPage into a reusable
CompareMatrix component (single source of truth) and render it on the
/compare hub too — restores the full matrix the compare pages were missing.
Fact-checked July 2026, adds a GitButler column, and includes honest rows
where GitWand isn't ahead (virtual/stacked branches).
diff --git a/website/.vitepress/theme/CompareMatrix.vue b/website/.vitepress/theme/CompareMatrix.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+type CV = boolean | 'partial' | 'soon'
+interface Row {
+  category?: boolean; label: string; note?: string; highlight?: boolean
+  gw?: CV; gk?: CV; fork?: CV; sm?: CV; ghd?: CV; gb?: CV; tower?: CV
+}
+
+// Competitor data fact-checked July 2026. Order matches the deep-dive pages,
+// with Tower appended (it has no deep dive but is in the landscape).
+const COLS = [
+  { key: 'gw',    name: 'GitWand',        sub: 'Free · MIT',        gw: true },
+  { key: 'gk',    name: 'GitKraken',      sub: 'Free / ~$5/mo Pro' },
+  { key: 'fork',  name: 'Fork',           sub: '$59.99 · Native' },
+  { key: 'sm',    name: 'Sublime Merge',  sub: '$99 · Native' },
+  { key: 'ghd',   name: 'GitHub Desktop', sub: 'Free · Electron' },
+  { key: 'gb',    name: 'GitButler',      sub: 'Free · Tauri/Rust' },
+  { key: 'tower', name: 'Tower',          sub: '$69/yr · Native' },
+] as const
+
+const ROWS: Row[] = [
+  { category: true, label: 'Workflow' },
+  { label: 'Free & open source',       gw: true, gk: false,     fork: false, sm: false, ghd: true,      gb: true,  tower: false },
+  { label: 'Native app (no Electron)', gw: true, gk: false,     fork: true,  sm: true,  ghd: false,     gb: true,  tower: true  },
+  { label: 'Linux support',            gw: true, gk: true,      fork: false, sm: true,  ghd: false,     gb: true,  tower: false },
+  { label: 'CLI tool',                 gw: true, gk: true,      fork: false, sm: false, ghd: false,     gb: true,  tower: false },
+  { label: 'VS Code extension',        gw: true, gk: true,      fork: false, sm: false, ghd: false,     gb: false, tower: false },
+
+  { category: true, label: 'Conflict resolution' },
+  { label: 'Deterministic auto-resolve',        gw: true, gk: 'partial', fork: false, sm: false, ghd: 'partial', gb: false, tower: false, highlight: true },
+  { label: 'Confidence score per hunk',         gw: true, gk: false,     fork: false, sm: false, ghd: false,     gb: false, tower: false, highlight: true },
+  { label: 'Decision trace per hunk',           gw: true, gk: false,     fork: false, sm: false, ghd: false,     gb: false, tower: false, highlight: true },
+  { label: 'Zero-impact merge/rebase preview',  gw: true, gk: false,     fork: false, sm: false, ghd: false,     gb: false, tower: false, highlight: true },
+  { label: 'Predict rebase & cherry-pick',      gw: true, gk: false,     fork: false, sm: false, ghd: false,     gb: false, tower: false, highlight: true },
+  { label: 'Scratch-worktree resolution',       gw: true, gk: false,     fork: false, sm: false, ghd: false,     gb: false, tower: false, highlight: true },
+
+  { category: true, label: 'Power Git' },
+  { label: 'Interactive rebase',        gw: true,  gk: true,  fork: true,  sm: true,  ghd: false, gb: true,  tower: true  },
+  { label: 'Split commit by hunks',     gw: true,  gk: false, fork: false, sm: true,  ghd: false, gb: false, tower: false },
+  { label: 'Worktrees',                 gw: true,  gk: true,  fork: true,  sm: false, ghd: true,  gb: false, tower: true  },
+  { label: 'Virtual / stacked branches',gw: false, gk: false, fork: false, sm: false, ghd: false, gb: true,  tower: false },
+  { label: 'Multi-repo workspaces',     gw: true,  gk: true,  fork: true,  sm: false, ghd: false, gb: false, tower: 'partial' },
+  { label: 'Cross-repo dashboard',      gw: true,  gk: true,  fork: false, sm: false, ghd: false, gb: false, tower: false },
+
+  { category: true, label: 'Code review & forges' },
+  { label: 'In-app PR/MR review',       gw: true, gk: true,  fork: 'partial', sm: false, ghd: 'partial', gb: 'partial', tower: false },
+  { label: 'GitHub · GitLab · Bitbucket · Azure', gw: true, gk: true, fork: true, sm: false, ghd: false, gb: false, tower: true },
+  { label: 'Inline CI check annotations', gw: true, gk: true, fork: false, sm: false, ghd: false, gb: false, tower: false },
+
+  { category: true, label: 'AI & agents', note: 'GitWand uses the coding-agent CLIs you already have (Claude Code, Codex, opencode…). No built-in model, no account.' },
+  { label: 'Launch coding agents in-app', gw: true, gk: true,      fork: false, sm: false, ghd: false,     gb: true,  tower: 'partial' },
+  { label: 'MCP server for AI agents',    gw: true, gk: true,      fork: false, sm: false, ghd: false,     gb: true,  tower: false },
+  { label: 'AI conflict explanation',     gw: true, gk: 'partial', fork: false, sm: false, ghd: 'partial', gb: false, tower: false },
+  { label: 'AI commit messages',          gw: true, gk: true,      fork: true,  sm: false, ghd: true,      gb: 'partial', tower: true },
+]
+
+function ic(v?: CV) { return v === true ? '✓' : v === 'partial' ? '~' : v === 'soon' ? 'soon' : '✗' }
+function cc(v?: CV) { return v === true ? 'y' : v === 'partial' ? 'p' : v === 'soon' ? 's' : 'n' }
+</script>
+
+<template>
+  <div class="cmp-block">
+    <div class="cmp-wrap">
+      <table class="cmp">
+        <thead>
+          <tr>
+            <th></th>
+            <th v-for="c in COLS" :key="c.key" :class="{ 'cmp-gw': c.key === 'gw' }">
+              {{ c.name }}<span>{{ c.sub }}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="r in ROWS" :key="r.label">
+            <tr v-if="r.category" class="cmp-cat">
+              <td :colspan="COLS.length + 1">{{ r.label }}<span v-if="r.note" class="cmp-note">{{ r.note }}</span></td>
+            </tr>
+            <tr v-else :class="{ 'cmp-hl': r.highlight }">
+              <td class="cmp-feat">{{ r.label }}<span v-if="r.highlight" class="cmp-uniq">GitWand</span></td>
+              <td v-for="c in COLS" :key="c.key" :class="{ 'cmp-gw': c.key === 'gw' }">
+                <span :class="'c-' + cc((r as any)[c.key])">{{ ic((r as any)[c.key]) }}</span>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+    <p class="cmp-legend"><span class="c-y">✓</span> yes &nbsp; <span class="c-p">~</span> partial &nbsp; <span class="c-n">✗</span> no &nbsp;·&nbsp; Fact-checked July 2026 — spot something off? <a href="https://github.com/devlint/GitWand/issues">open an issue</a>.</p>
+  </div>
+</template>
+
+<style scoped>
+.cmp-block{
+  --purple:#8B5CF6;--green:#10B981;
+  --bg:#0c0c1a;--border:rgba(124,58,237,0.18);--border-soft:rgba(255,255,255,0.08);
+  --text:#e2e8f0;--muted:#94a3b8;
+  margin:24px 0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+}
+.cmp-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg);}
+.cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;color:var(--text);}
+.cmp th,.cmp td{padding:11px 13px;text-align:center;border-bottom:1px solid var(--border-soft);}
+.cmp thead th{color:var(--muted);font-weight:700;vertical-align:top;}
+.cmp thead th span{display:block;font-size:11px;font-weight:500;opacity:0.7;margin-top:3px;}
+.cmp thead th.cmp-gw{color:var(--purple);}
+.cmp-feat{text-align:left;font-weight:500;color:var(--text);}
+.cmp-uniq{margin-left:8px;font-size:10px;color:var(--purple);border:1px solid var(--border);border-radius:6px;padding:1px 6px;white-space:nowrap;}
+.cmp-gw{background:rgba(124,58,237,0.09);}
+.cmp-cat td{text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);background:rgba(255,255,255,0.02);padding-top:18px;}
+.cmp-note{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--muted);margin-top:4px;}
+.cmp-hl{background:rgba(124,58,237,0.03);}
+.c-y{color:var(--green);font-weight:700;}
+.c-n{color:var(--muted);opacity:0.45;}
+.c-p{color:#fbbf24;}
+.c-s{font-size:11px;color:var(--purple);}
+.cmp-legend{font-size:12.5px;color:var(--muted);margin:10px 2px 0;}
+.cmp-legend a{color:var(--purple);}
+</style>
diff --git a/website/.vitepress/theme/FeaturesPage.vue b/website/.vitepress/theme/FeaturesPage.vue
@@ -78,7 +78,7 @@ function cc(v?: CV){ return v===true?'y':v==='partial'?'p':v==='soon'?'s':'n' }
     <section class="ph-hero">
       <div class="ph-inner">
         <span class="ph-badge">Features</span>
-        <h1 class="ph-h1">Everything you need for Git — <span class="grad">native and free.</span></h1>
+        <h1 class="ph-h1">Everything you need for Git <br> <span class="grad">native and free.</span></h1>
         <p class="ph-sub">A complete daily workflow with no performance compromise, across three consistent interfaces: desktop app, CLI and VS Code. Below: the full feature set, and an honest feature-by-feature comparison with the popular clients.</p>
         <div class="ph-ctas">
           <a href="/" class="ph-btn ph-btn--primary">Download GitWand</a>
@@ -104,37 +104,10 @@ function cc(v?: CV){ return v===true?'y':v==='partial'?'p':v==='soon'?'s':'n' }
     <section class="ph-section ph-section--alt">
       <div class="ph-inner">
         <h2 class="ph-h2">How GitWand compares</h2>
-        <p class="ph-secsub">Feature-by-feature against the most popular Git clients. Data accurate as of May 2026.</p>
-        <div class="cmp-wrap">
-          <table class="cmp">
-            <thead>
-              <tr>
-                <th></th>
-                <th class="cmp-gw">GitWand<span>Free · MIT</span></th>
-                <th>GitHub Desktop<span>Free · Electron</span></th>
-                <th>GitKraken<span>$8/mo · Electron</span></th>
-                <th>Fork<span>$50 · Native</span></th>
-                <th>Tower<span>$69/yr</span></th>
-                <th>Sublime Merge<span>$99</span></th>
-              </tr>
-            </thead>
-            <tbody>
-              <template v-for="r in ROWS" :key="r.label">
-                <tr v-if="r.category" class="cmp-cat"><td colspan="7">{{ r.label }}<span v-if="r.note" class="cmp-note">{{ r.note }}</span></td></tr>
-                <tr v-else :class="{ 'cmp-hl': r.highlight }">
-                  <td class="cmp-feat">{{ r.label }}<span v-if="r.highlight" class="cmp-uniq">unique</span></td>
-                  <td class="cmp-gw"><span :class="'c-'+cc(r.gw)">{{ ic(r.gw) }}</span></td>
-                  <td><span :class="'c-'+cc(r.ghd)">{{ ic(r.ghd) }}</span></td>
-                  <td><span :class="'c-'+cc(r.gk)">{{ ic(r.gk) }}</span></td>
-                  <td><span :class="'c-'+cc(r.fork)">{{ ic(r.fork) }}</span></td>
-                  <td><span :class="'c-'+cc(r.tower)">{{ ic(r.tower) }}</span></td>
-                  <td><span :class="'c-'+cc(r.sm)">{{ ic(r.sm) }}</span></td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
+        <p class="ph-secsub">Feature-by-feature against the most popular Git clients. Fact-checked July 2026.</p>
+        <CompareMatrix />
         <div class="ph-ctas ph-ctas--center">
+          <a href="/compare/" class="ph-btn">Full comparisons →</a>
           <a href="/conflict-engine" class="ph-btn">See the conflict engine →</a>
           <a href="/ai-agents" class="ph-btn">AI &amp; agents →</a>
         </div>
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
@@ -4,6 +4,7 @@ import HomeLanding from './HomeLanding.vue'
 import FeaturesPage from './FeaturesPage.vue'
 import ConflictEnginePage from './ConflictEnginePage.vue'
 import AiAgentsPage from './AiAgentsPage.vue'
+import CompareMatrix from './CompareMatrix.vue'
 import './custom.css'
 
 export default {
@@ -13,5 +14,6 @@ export default {
     app.component('FeaturesPage', FeaturesPage)
     app.component('ConflictEnginePage', ConflictEnginePage)
     app.component('AiAgentsPage', AiAgentsPage)
+    app.component('CompareMatrix', CompareMatrix)
   },
 } satisfies Theme
diff --git a/website/compare/index.md b/website/compare/index.md
@@ -29,6 +29,12 @@ These comparisons are written by the GitWand team, so read them with that in min
 | AI / agent integration | Agent sessions + MCP server | Agent sessions + cloud AI | ❌ | ❌ | Copilot commits + conflicts | Agents Tab + MCP |
 | Account required | Never | For advanced features | No | No | GitHub | No |
 
+## Every feature, side by side
+
+The table above is the at-a-glance version. Here's the full matrix — workflow, conflict resolution, power-Git, code review and AI — across all seven clients. Rows tagged **GitWand** are where the deterministic conflict engine has no equivalent elsewhere; the honest inverse is there too (virtual/stacked branches, where GitButler leads).
+
+<CompareMatrix />
+
 ## The deep dives
 
 - **[GitWand vs GitKraken](/compare/gitwand-vs-gitkraken)** — free & local-first vs the commercial suite
