feat: add GitHub link component and update README with floating buddies preview

Author: Shellishack

README.md

@@ -18,7 +18,7 @@ Vibebud gives your coding agents a visible presence: a floating companion on you
 
 Instead of letting AI agent work disappear into terminals, logs, and background processes, Vibebud makes it feel present and easy to follow.
 
-> Screenshot coming soon. For now: imagine a small animated avatar in the corner of your screen, blinking at you, occasionally popping a chat bubble.
+![Vibebud floating buddies preview](./assets/buds.png)
 
 ## The Idea
 

README.zh-CN.md

@@ -17,7 +17,7 @@ Vibebud 会给你的 AI 编程智能体一个可见的存在感：它可以作
 
 AI 智能体的工作不应该只藏在终端、日志和后台进程里。Vibebud 想让这些工作变得更可见、更容易跟进，也更有陪伴感。
 
-> 截图即将补充。现在你可以先想象一个小小的动画头像待在屏幕角落，偶尔眨眨眼，弹出一个聊天气泡。
+![Vibebud 漂浮小伙伴预览](./assets/buds.png)
 
 ## 核心想法
 

assets/buds.png

@@ -5,6 +5,7 @@ import BuddyInstance, { type BuddyInstanceState } from './BuddyInstance';
 import BuddyGroup from './BuddyGroup';
 import AppSettings from './AppSettings';
 import LanguageSelector from './LanguageSelector';
+import GitHubLink from './GitHubLink';
 import SignInStatus from './SignInStatus';
 import { VARIANTS } from './avatars';
 import { normalizeGamification } from './gamification';
@@ -1934,6 +1935,7 @@ export default function Buddy() {
           in the in-app Capacitor BridgeActivity WebView and the web build. */}
       {adapter.id !== 'electron' && !isAndroidOverlay && (
         <div className="fixed right-3 top-3 z-[70] flex items-center gap-2">
+          <GitHubLink />
           <LanguageSelector />
           <SignInStatus />
           {/* QR shortcut: triggers the same scanQrForPair as AppSettings,

core/app/components/Buddy.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from '../../lib/hooks/use-translations';
+
+const GITHUB_REPO_URL = 'https://github.com/shellishack/vibebud';
+const GITHUB_REPO_API_URL = 'https://api.github.com/repos/shellishack/vibebud';
+
+function formatStars(count: number) {
+  if (count >= 1000) {
+    const rounded = Math.round(count / 100) / 10;
+    return `${Number.isInteger(rounded) ? rounded.toFixed(0) : rounded.toFixed(1)}k`;
+  }
+  return String(count);
+}
+
+export default function GitHubLink() {
+  const { t } = useTranslations();
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(GITHUB_REPO_API_URL)
+      .then((res) => res.ok ? res.json() : null)
+      .then((data: { stargazers_count?: unknown } | null) => {
+        if (cancelled || typeof data?.stargazers_count !== 'number') return;
+        setStars(data.stargazers_count);
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, []);
+
+  return (
+    <a
+      data-buddy-interactive
+      href={GITHUB_REPO_URL}
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex h-9 items-center gap-2 rounded-full bg-white/85 px-3 text-sm font-medium text-zinc-600 shadow-md ring-1 ring-zinc-200 backdrop-blur-md hover:bg-white hover:text-zinc-900 dark:bg-zinc-900/85 dark:text-zinc-300 dark:ring-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
+    >
+      <svg viewBox="0 0 24 24" className="h-4 w-4 shrink-0" fill="currentColor" aria-hidden>
+        <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.48 2 2 6.58 2 12.22c0 4.51 2.87 8.34 6.84 9.69.5.09.68-.22.68-.49 0-.24-.01-1.04-.01-1.89-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.36-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.28 9.28 0 0 1 12 6.92c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.59.69.49A10.15 10.15 0 0 0 22 12.22C22 6.58 17.52 2 12 2Z" />
+      </svg>
+      <span>{t('home.github')}</span>
+      <span className="h-4 w-px bg-zinc-200 dark:bg-zinc-700" />
+      <span className="inline-flex items-center gap-1 text-zinc-500 dark:text-zinc-400">
+        <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="currentColor" aria-hidden>
+          <path d="m12 2.25 2.94 5.96 6.58.96-4.76 4.64 1.12 6.55L12 17.27l-5.88 3.09 1.12-6.55-4.76-4.64 6.58-.96L12 2.25Z" />
+        </svg>
+        {stars === null ? 'Stars' : formatStars(stars)}
+      </span>
+    </a>
+  );
+}

core/app/components/GitHubLink.tsx

@@ -11,7 +11,7 @@ import { usePlatform } from './hooks/usePlatform';
 
 type Target = { id: string; label: string; href: string; ext: string; directDownload?: boolean };
 
-const LATEST_RELEASE_URL = 'https://github.com/Shellishack/vibemoji/releases/latest';
+const LATEST_RELEASE_URL = 'https://github.com/shellishack/vibebud/releases/latest';
 const LATEST_RELEASE_DOWNLOAD_URL = `${LATEST_RELEASE_URL}/download`;
 
 const TARGETS: Target[] = [
@@ -52,11 +52,13 @@ export default function InstallButton() {
   const { t } = useTranslations();
   const adapter = usePlatform();
   const insideElectron = adapter.id === 'electron';
-  const [target, setTarget] = useState<Target>(TARGETS[0]);
+  const [detectedTarget, setDetectedTarget] = useState<Target | null>(null);
   const [open, setOpen] = useState(false);
+  const target = detectedTarget ?? TARGETS[0];
 
   useEffect(() => {
-    setTarget(detectTarget());
+    const id = window.setTimeout(() => setDetectedTarget(detectTarget()), 0);
+    return () => window.clearTimeout(id);
   }, []);
 
   const handleDownload = () => {

core/app/components/InstallButton.tsx

@@ -41,17 +41,6 @@ export default function Home() {
           >
             {t('home.manageAvatars')}
           </Link>
-          <a
-            href="https://github.com/shellishack/vibebud"
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-4 py-2 text-sm font-medium text-zinc-700 backdrop-blur transition-colors hover:border-zinc-300 hover:bg-white dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:border-zinc-500"
-          >
-            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden>
-              <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.48 2 2 6.58 2 12.22c0 4.51 2.87 8.34 6.84 9.69.5.09.68-.22.68-.49 0-.24-.01-1.04-.01-1.89-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.36-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.28 9.28 0 0 1 12 6.92c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.59.69.49A10.15 10.15 0 0 0 22 12.22C22 6.58 17.52 2 12 2Z" />
-            </svg>
-            {t('home.github')}
-          </a>
           <span className="text-xs text-zinc-500 dark:text-zinc-400">{t('home.downloadMeta')}</span>
         </div>