Skip to content

Add icon and tool thumbnails#53

Merged
nezhar merged 1 commit into
mainfrom
icon
Mar 27, 2026
Merged

Add icon and tool thumbnails#53
nezhar merged 1 commit into
mainfrom
icon

Conversation

@nezhar

@nezhar nezhar commented Mar 27, 2026

Copy link
Copy Markdown
Collaborator

Updates the README.md to improve its visual presentation and provide a clearer overview of supported tools. The main changes include a new centered header with an icon, improved badge formatting, and the addition of a "Tool Thumbnails" section showcasing images of supported AI coding tools.

Visual and formatting improvements:

  • Added a centered VibePod icon and header for a more polished and visually appealing introduction to the project.
  • Reformatted badges into a single centered line, improving readability and aesthetics.

Documentation enhancements:

  • Introduced a "Tool Thumbnails" section displaying clickable images of major supported tools (e.g., Claude Code, Google Gemini, OpenAI Codex, GitHub Copilot, OpenCode, Mistral Vibe, Augment Auggie), making it easier for users to see at a glance which tools are integrated.

Summary by CodeRabbit

Documentation

  • Redesigned README with improved visual presentation for the header and badges
  • Added new "Tool Thumbnails" section showcasing integrated tools with linked imagery

@coderabbitai

coderabbitai Bot commented Mar 27, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

This PR updates the README.md file by replacing the plain Markdown header with a centered logo image and HTML-formatted title, converting badges to an HTML block, and adding a new "Tool Thumbnails" section with linked AI tool thumbnails to improve visual presentation.

Changes

Cohort / File(s) Summary
README Documentation Updates
README.md
Replaced plain text header with centered logo image and HTML h1 title block; converted badge row to centered HTML paragraph with linked badges; added new "Tool Thumbnails" section with grid of linked tool thumbnails (Claude Code, Google Gemini, OpenAI Codex, GitHub Copilot, OpenCode, Mistral Vibe, Augment Auggie).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

Poem

🐰 A logo centered, badges shine so bright,
With tool thumbnails gleaming, arranged just right,
HTML badges dancing in a row,
The README's appearance now has quite a glow! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures the main changes: adding a VibePod icon and tool thumbnails to the README for improved visual presentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch icon

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps

greptile-apps Bot commented Mar 27, 2026

Copy link
Copy Markdown

Greptile Summary

This PR improves the visual presentation of README.md by adding a centered icon header, reformatting badges into a clean centered row, and introducing a "Tool Thumbnails" section with clickable images for each supported AI coding tool. Nine new binary image assets are added to docs/assets/.

Key findings:

  • The <p> tag wrapping the tool thumbnails is missing align="center", causing the images to render left-aligned instead of centered like the rest of the header elements.
  • docs/assets/tool.png is added but never referenced in the README or anywhere else in the changeset — likely an unused asset.
  • Several image filenames contain spaces (e.g. claude code.png, google gemini.png); while %20 encoding handles them in HTML, names with spaces are fragile in shell scripts and CI tooling. Renaming to use hyphens/underscores would be safer long-term.

Confidence Score: 5/5

Safe to merge — all findings are P2 style/polish suggestions with no functional or correctness impact.

All three issues (missing alignment, unreferenced asset, spaced filenames) are cosmetic or best-practice suggestions that do not affect functionality, correctness, or data integrity. No P0/P1 findings were identified.

README.md (missing align="center" on thumbnails <p>) and docs/assets/tool.png (unreferenced asset).

Important Files Changed

Filename Overview
README.md Updated with centered icon, reformatted badges, and new "Tool Thumbnails" section; thumbnails <p> is missing align="center" so images render left-aligned.
docs/assets/tool.png New binary asset added but not referenced anywhere in the README or other changed files — likely unused.
docs/assets/icon.png New VibePod icon asset, correctly referenced at the top of README.md.
docs/assets/claude code.png New tool thumbnail; correctly referenced in README but filename contains a space.
docs/assets/opencode.png New tool thumbnail; correctly referenced in README with no issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    README["README.md"]
    ICON["docs/assets/icon.png\n(header icon)"]
    THUMBS["Tool Thumbnails Section"]
    CC["claude code.png"]
    GG["google gemini.png"]
    OC["openai codex.png"]
    GH["github copilot.png"]
    OPC["opencode.png"]
    MV["mistral vibe.png"]
    AA["augment auggie.png"]
    TOOL["docs/assets/tool.png\n(unreferenced)"]

    README -->|img header| ICON
    README --> THUMBS
    THUMBS --> CC
    THUMBS --> GG
    THUMBS --> OC
    THUMBS --> GH
    THUMBS --> OPC
    THUMBS --> MV
    THUMBS --> AA
    TOOL -. not linked .-> README
Loading

Comments Outside Diff (1)

  1. docs/assets/tool.png, line 1 (link)

    P2 Unreferenced asset

    docs/assets/tool.png is added in this PR but is not referenced anywhere in README.md or elsewhere in the diff. It may have been intended as a future asset or added by mistake — consider removing it or wiring it up if it belongs here.

Reviews (1): Last reviewed commit: "Add icon and tool thumbnails" | Re-trigger Greptile

Comment thread README.md
Comment thread README.md

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
README.md (1)

49-59: Make thumbnail links more useful and align section styling.

Right now each thumbnail links back to its own image file, which adds little navigation value. Consider linking each image to the corresponding tool homepage/docs, and center this block to match the top section.

Suggested README tweak
 ## Tool Thumbnails
 
-<p>
-  <a href="docs/assets/claude%20code.png"><img src="docs/assets/claude%20code.png" alt="Claude Code" width="180" /></a>
-  <a href="docs/assets/google%20gemini.png"><img src="docs/assets/google%20gemini.png" alt="Google Gemini" width="180" /></a>
-  <a href="docs/assets/openai%20codex.png"><img src="docs/assets/openai%20codex.png" alt="OpenAI Codex" width="180" /></a>
-  <a href="docs/assets/github%20copilot.png"><img src="docs/assets/github%20copilot.png" alt="GitHub Copilot" width="180" /></a>
-  <a href="docs/assets/opencode.png"><img src="docs/assets/opencode.png" alt="OpenCode" width="180" /></a>
-  <a href="docs/assets/mistral%20vibe.png"><img src="docs/assets/mistral%20vibe.png" alt="Mistral Vibe" width="180" /></a>
-  <a href="docs/assets/augment%20auggie.png"><img src="docs/assets/augment%20auggie.png" alt="Augment Auggie" width="180" /></a>
+<p align="center">
+  <a href="https://www.anthropic.com/claude-code"><img src="docs/assets/claude%20code.png" alt="Claude Code" width="180" /></a>
+  <a href="https://deepmind.google/technologies/gemini/"><img src="docs/assets/google%20gemini.png" alt="Google Gemini" width="180" /></a>
+  <a href="https://openai.com/codex"><img src="docs/assets/openai%20codex.png" alt="OpenAI Codex" width="180" /></a>
+  <a href="https://github.com/features/copilot"><img src="docs/assets/github%20copilot.png" alt="GitHub Copilot" width="180" /></a>
+  <a href="https://opencode.ai/"><img src="docs/assets/opencode.png" alt="OpenCode" width="180" /></a>
+  <a href="https://mistral.ai/"><img src="docs/assets/mistral%20vibe.png" alt="Mistral Vibe" width="180" /></a>
+  <a href="https://www.augmentcode.com/"><img src="docs/assets/augment%20auggie.png" alt="Augment Auggie" width="180" /></a>
 </p>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 49 - 59, The "Tool Thumbnails" block currently links
each <a> tag to the image file; update each anchor href to point to the
appropriate tool homepage or docs (e.g., replace docs/assets/... URLs with the
official URLs for Claude, Gemini, OpenAI Codex, GitHub Copilot, OpenCode,
Mistral Vibe, Augment Auggie) while keeping the <img> src as the thumbnail; also
center the entire block and align styling with the top section by wrapping the
thumbnails in a centering container (for example <div align="center">...</div>
or <p align="center">) and ensure consistent width attributes and alt text
remain accurate (refer to the "Tool Thumbnails" section and the <a>...<img>
elements).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@README.md`:
- Around line 49-59: The "Tool Thumbnails" block currently links each <a> tag to
the image file; update each anchor href to point to the appropriate tool
homepage or docs (e.g., replace docs/assets/... URLs with the official URLs for
Claude, Gemini, OpenAI Codex, GitHub Copilot, OpenCode, Mistral Vibe, Augment
Auggie) while keeping the <img> src as the thumbnail; also center the entire
block and align styling with the top section by wrapping the thumbnails in a
centering container (for example <div align="center">...</div> or <p
align="center">) and ensure consistent width attributes and alt text remain
accurate (refer to the "Tool Thumbnails" section and the <a>...<img> elements).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc6d5ae7-18b2-4b86-8af6-b7f4c556aa77

📥 Commits

Reviewing files that changed from the base of the PR and between b35366a and f70a55b.

⛔ Files ignored due to path filters (9)
  • docs/assets/augment auggie.png is excluded by !**/*.png
  • docs/assets/claude code.png is excluded by !**/*.png
  • docs/assets/github copilot.png is excluded by !**/*.png
  • docs/assets/google gemini.png is excluded by !**/*.png
  • docs/assets/icon.png is excluded by !**/*.png
  • docs/assets/mistral vibe.png is excluded by !**/*.png
  • docs/assets/openai codex.png is excluded by !**/*.png
  • docs/assets/opencode.png is excluded by !**/*.png
  • docs/assets/tool.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • README.md

@nezhar nezhar merged commit 4918c7f into main Mar 27, 2026
20 checks passed
@nezhar nezhar deleted the icon branch April 10, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant