From 624cb0b33b681cc4712ced7a7c70887368d68657 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Sat, 21 Mar 2026 00:33:44 -0700
Subject: [PATCH] Add Antigravity limitation note and provider name tooltips

Addresses #51 -- Antigravity doesn't support slash commands, only
auto-activated skills. Adds a tooltip on the Antigravity* badge in the
downloads section explaining the limitation and how to invoke skills by
name. Also adds hover tooltips showing provider names on the hero logo
icons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/css/main.css   | 42 ++++++++++++++++++++++++++++++++++++++++++
 public/css/styles.css | 36 +++++++++++++++++++++++++++++++++++-
 public/index.html     | 22 +++++++++++-----------
 3 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 5480f4390..98bd292c6 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -2290,6 +2290,48 @@ code {
   border-radius: 3px;
 }
 
+/* Tooltips */
+.has-tooltip {
+  position: relative;
+  cursor: default;
+}
+
+.has-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 10px;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+
+.has-tooltip:hover::after {
+  opacity: 1;
+}
+
+/* Allow wider tooltips to wrap */
+.install-provider-badge.has-tooltip::after {
+  white-space: normal;
+  width: 220px;
+  text-align: center;
+}
+
+/* Hero logo icon wrapper */
+.hero-logo-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
 .download-tip {
   font-size: 0.8125rem;
   color: var(--color-ash);
diff --git a/public/css/styles.css b/public/css/styles.css
index 15f97a64d..39e3d3e20 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 .split-container::before {
   content: '';
   position: absolute;
@@ -3872,6 +3872,40 @@ code {
   padding: 1px 4px;
   border-radius: 3px;
 }
+.has-tooltip {
+  position: relative;
+  cursor: default;
+}
+.has-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 10px;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+.has-tooltip:hover::after {
+  opacity: 1;
+}
+.install-provider-badge.has-tooltip::after {
+  white-space: normal;
+  width: 220px;
+  text-align: center;
+}
+.hero-logo-icon {
+  display: inline-flex;
+  align-items: center;
+}
 .download-tip {
   font-size: 0.8125rem;
   color: var(--color-ash);
diff --git a/public/index.html b/public/index.html
index 849179cb7..a26125946 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,15 +66,15 @@
           <div class="hero-logos-inline">
             <span class="hero-logos-label">Works with</span>
             <div class="hero-logos-row">
-              <img src="assets/cursor-logo.png" alt="Cursor" width="24" height="24" loading="lazy">
-              <img src="assets/claude-logo.png" alt="Claude Code" width="24" height="24" loading="lazy">
-              <img src="assets/gemini-logo.png" alt="Gemini CLI" width="20" height="20" loading="lazy">
-              <img src="assets/openai-logo.png" alt="Codex CLI" width="20" height="20" loading="lazy">
-              <img src="assets/github-logo.png" alt="VS Code Copilot" width="20" height="20" loading="lazy">
-              <img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy">
-              <img src="assets/kiro-logo.png" alt="Kiro" width="20" height="20" loading="lazy">
-              <img src="assets/opencode-logo.png" alt="OpenCode" width="20" height="20" loading="lazy">
-              <img src="assets/pi-logo.svg" alt="Pi" width="20" height="20" loading="lazy" style="background:#1a1a1a;border-radius:50%;padding:3px">
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Cursor"><img src="assets/cursor-logo.png" alt="Cursor" width="24" height="24" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Claude Code"><img src="assets/claude-logo.png" alt="Claude Code" width="24" height="24" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Gemini CLI"><img src="assets/gemini-logo.png" alt="Gemini CLI" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Codex CLI"><img src="assets/openai-logo.png" alt="Codex CLI" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="VS Code Copilot"><img src="assets/github-logo.png" alt="VS Code Copilot" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Antigravity"><img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Kiro"><img src="assets/kiro-logo.png" alt="Kiro" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="OpenCode"><img src="assets/opencode-logo.png" alt="OpenCode" width="20" height="20" loading="lazy"></span>
+              <span class="hero-logo-icon has-tooltip" data-tooltip="Pi"><img src="assets/pi-logo.svg" alt="Pi" width="20" height="20" loading="lazy" style="background:#1a1a1a;border-radius:50%;padding:3px"></span>
             </div>
           </div>
         </div>
@@ -280,9 +280,9 @@
             <img src="assets/github-logo.png" alt="VS Code Copilot" width="20" height="20" loading="lazy">
             <span>Copilot</span>
           </div>
-          <div class="install-provider-badge">
+          <div class="install-provider-badge has-tooltip" data-tooltip="Antigravity doesn't support slash commands. Skills are auto-activated based on context, or you can ask the agent to use a skill by name.">
             <img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy">
-            <span>Antigravity</span>
+            <span>Antigravity*</span>
           </div>
           <div class="install-provider-badge">
             <img src="assets/kiro-logo.png" alt="Kiro" width="20" height="20" loading="lazy">