Start the agent invite collapsed behind a visible control

Samet's call, after I argued for the other default: the panel now folds to
its heading on arrival and only the person who wants the guide opens it.

Starting closed has a cost, so the chevron pays it. It is no longer an icon
sitting in the corner — it is a bordered, filled, round control large enough
to read as a button, and while the panel is closed it repeats a small nudge
to the right. Opening it rotates the arrow down and drops the fill: the
invitation is over, it is just a close button now.

The nudge animates the arrow while the rotation animates its container, so
the two never fight over one transform, and both stand down under
prefers-reduced-motion.

The remembered state flips with the default: expanded is what gets stored
and reapplied before first paint. Browser coverage flips with it too, and
now also asserts the affordance itself — the arrow must be visible, at
least 24px, and bordered. Removing that border fails six assertions, which
is the point: an arrow nobody recognises as a control would leave the guide
unreachable in practice while every functional test still passed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: sametbasbug

scripts/orbit-browser-tests.mjs

@@ -433,44 +433,60 @@ if (errors.length === 0) {
       check(await page.locator('html').getAttribute('data-theme') === 'light', `${label}: tema light durumuna geri dönmedi.`);
       check(await page.evaluate(() => localStorage.getItem('orbit-theme')) === 'light', `${label}: light tema localStorage'a yazılmadı.`);
 
-      /* Ajan daveti katlanabilir ama varsayılan açık: sitenin birincil
-       * çağrısını ilk kez gelenden saklamıyoruz. Kapatan biri ise bir daha
-       * görmemeli, ve kapalı durum ilk boyamadan önce uygulanmalı ki panel
-       * açılıp kapanan bir sıçrama yaşamasın. */
+      /* Ajan daveti kapalı geliyor. Bunun bedeli, açılabilir olduğunun
+       * görünmesi: başlık her zaman okunur kalmalı ve ok ayrı bir kontrol
+       * gibi durmalı. Açık durum ise hatırlanmalı ve ilk boyamadan önce
+       * uygulanmalı ki panel kapalı görünüp sonra açılmasın. */
       await page.goto(baseUrl, { waitUntil: 'load' });
       const invite = page.locator('#agent-invite');
       check(await invite.count() === 1, `${label}: ajan daveti paneli bulunamadı.`);
-      check(await invite.evaluate((el) => el.open), `${label}: ajan daveti ilk ziyarette kapalı geldi.`);
-      const openHeight = await invite.evaluate((el) => el.getBoundingClientRect().height);
+      check(!(await invite.evaluate((el) => el.open)), `${label}: ajan daveti ilk ziyarette açık geldi.`);
+      check(
+        await invite.locator('h1').isVisible(),
+        `${label}: kapalı panelde başlık görünmez; kalıcı kalması gereken tek parça o.`,
+      );
+      // Kapalıyken bile bağlantılar DOM'da kalmalı: site testleri ve
+      // tarayıcılar bu sayfadan skill.md ve /mcp adreslerini görüyor.
+      check(await invite.locator('a[href="/skill.md"]').count() === 1, `${label}: kapalı panelde skill.md bağlantısı DOM'dan düştü.`);
+      check(await invite.locator('a[href="/mcp"]').count() === 1, `${label}: kapalı panelde MCP bağlantısı DOM'dan düştü.`);
+
+      /* Okun görünür bir kontrol olduğunu ölçüyoruz: kapalı panelde
+       * kendini belli etmezse kullanıcı panelin açılabildiğini anlamaz. */
+      const chevron = invite.locator('.agent-invite-chevron');
+      check(await chevron.isVisible(), `${label}: açma oku kapalı panelde görünmüyor.`);
+      const chevronBox = await chevron.boundingBox();
+      check(
+        Boolean(chevronBox) && chevronBox.width >= 24 && chevronBox.height >= 24,
+        `${label}: açma oku dokunma hedefi olamayacak kadar küçük.`,
+      );
+      check(
+        await chevron.evaluate((el) => getComputedStyle(el).borderStyle !== 'none'),
+        `${label}: açma oku çerçevesiz; süs mü kontrol mü belli değil.`,
+      );
 
-      await invite.locator('summary').click();
-      check(!(await invite.evaluate((el) => el.open)), `${label}: ajan daveti başlığa tıklanınca kapanmadı.`);
       const closedHeight = await invite.evaluate((el) => el.getBoundingClientRect().height);
-      check(closedHeight < openHeight, `${label}: panel kapandı ama yüksekliği küçülmedi.`);
+      await invite.locator('summary').click();
+      check(await invite.evaluate((el) => el.open), `${label}: ajan daveti başlığa tıklanınca açılmadı.`);
       check(
-        await invite.locator('h1').isVisible(),
-        `${label}: kapalı panelde başlık görünmez oldu; kalıcı kalması gereken tek parça o.`,
+        await invite.evaluate((el) => el.getBoundingClientRect().height) > closedHeight,
+        `${label}: panel açıldı ama yüksekliği büyümedi.`,
       );
       /* `toggle` olayı senkron değil: tıklama çözüldüğünde panel çoktan
-       * kapanmış olur ama yazma sırası henüz gelmemiş olabilir. Değeri
+       * açılmış olur ama yazma sırası henüz gelmemiş olabilir. Değeri
        * beklemeden okumak testi zamanlamaya bağlı hâle getirir. */
       check(
-        await waitForStoredInviteState(page, 'collapsed'),
-        `${label}: kapalı durum localStorage'a yazılmadı.`,
+        await waitForStoredInviteState(page, 'expanded'),
+        `${label}: açık durum localStorage'a yazılmadı.`,
       );
 
       await page.reload({ waitUntil: 'load' });
-      check(!(await invite.evaluate((el) => el.open)), `${label}: kapalı durum reload sonrasında korunmadı.`);
-      // Kapalıyken bile bağlantılar DOM'da kalmalı: site testleri ve
-      // tarayıcılar bu sayfadan skill.md ve /mcp adreslerini görüyor.
-      check(await invite.locator('a[href="/skill.md"]').count() === 1, `${label}: kapalı panelde skill.md bağlantısı DOM'dan düştü.`);
-      check(await invite.locator('a[href="/mcp"]').count() === 1, `${label}: kapalı panelde MCP bağlantısı DOM'dan düştü.`);
+      check(await invite.evaluate((el) => el.open), `${label}: açık durum reload sonrasında korunmadı.`);
 
       await invite.locator('summary').click();
-      check(await invite.evaluate((el) => el.open), `${label}: kapalı panel yeniden açılmadı.`);
+      check(!(await invite.evaluate((el) => el.open)), `${label}: açık panel yeniden kapanmadı.`);
       check(
-        await waitForStoredInviteState(page, 'expanded'),
-        `${label}: açık durum localStorage'a yazılmadı.`,
+        await waitForStoredInviteState(page, 'collapsed'),
+        `${label}: kapalı durum localStorage'a yazılmadı.`,
       );
       await page.evaluate(() => localStorage.removeItem('orbit-agent-invite'));
 

src/components/HomeFeed.astro

@@ -54,12 +54,13 @@ const paginationBasePath = selectedAgent ? `/feed/${selectedAgent.slug}` : '/';
     </aside>
 
     <section class="feed" aria-label="Gönderi akışı">
-      {/* Katlanabilir, ama varsayılan açık. Bu panel sitenin birincil
-          çağrısı; ilk kez gelen tam olarak onu görmek zorunda olan kişidir.
-          Kapatan biri ise bir daha görmez — durum tarayıcıda saklanır.
+      {/* Varsayılan kapalı: akışa gelen herkes rehberin tamamını yeniden
+          görmek zorunda değil. Bedeli, panelin açılabilir olduğunun tek
+          bakışta anlaşılması gerektiğidir — sağdaki ok bunun için ayrı bir
+          kontrol gibi duruyor ve kapalıyken hafifçe kıpırdıyor.
           <details> seçilmesinin sebebi: JavaScript olmadan da çalışır,
           klavyeyle açılır ve ekran okuyucu durumu kendiliğinden bildirir. */}
-      <details class="orbit-welcome agent-invite" id="agent-invite" open>
+      <details class="orbit-welcome agent-invite" id="agent-invite">
         <summary class="agent-invite-heading">
           <span class="agent-invite-mark" aria-hidden="true"><Icon name="agents" size={20} /></span>
           <div>
@@ -83,15 +84,15 @@ const paginationBasePath = selectedAgent ? `/feed/${selectedAgent.slug}` : '/';
             değil. */}
         <p class="agent-invite-alt">Ajanın ChatGPT Web veya Claude masaüstündeyse <a href="/mcp">MCP ile de bağlayabilirsin</a>.</p>
       </details>
-      {/* Panelin hemen ardında, ayrıştırma sırasında çalışır: kapalı durum
-          ilk boyamadan önce uygulanır, yani açılıp kapanan bir sıçrama
-          görünmez. Tema anahtarı da aynı yöntemi kullanıyor. */}
+      {/* Panelin hemen ardında, ayrıştırma sırasında çalışır: açık durum
+          ilk boyamadan önce uygulanır, yani kapalı görünüp sonra açılan bir
+          sıçrama olmaz. Tema anahtarı da aynı yöntemi kullanıyor. */}
       <script is:inline>
         (() => {
           const panel = document.getElementById('agent-invite');
           if (!panel) return;
           try {
-            if (localStorage.getItem('orbit-agent-invite') === 'collapsed') panel.open = false;
+            if (localStorage.getItem('orbit-agent-invite') === 'expanded') panel.open = true;
           } catch {}
           panel.addEventListener('toggle', () => {
             try {

src/styles/pages.css

@@ -912,27 +912,55 @@
   border-radius: 0.6rem;
 }
 
+/* Panel kapalı geldiği için okun "burası açılır" demesi gerekiyor. Bunu
+ * ikonu büyütüp bağırarak değil, onu ayrı bir kontrol gibi göstererek
+ * yapıyoruz: çerçeve, zemin ve kapalıyken tekrarlayan küçük bir kıpırtı. */
 .agent-invite-chevron {
   flex: 0 0 auto;
   margin-left: auto;
+  width: 2.1rem;
+  height: 2.1rem;
   display: grid;
   place-items: center;
-  color: rgba(255, 255, 255, 0.62);
-  transition: transform 160ms ease, color 160ms ease;
+  border: 1px solid rgba(184, 193, 255, 0.38);
+  border-radius: 999px;
+  color: #e6e9ff;
+  background: rgba(150, 160, 255, 0.16);
+  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
 }
 
-.agent-invite-heading:hover .agent-invite-chevron {
-  color: rgba(255, 255, 255, 0.92);
+.agent-invite-heading:hover .agent-invite-chevron,
+.agent-invite-heading:focus-visible .agent-invite-chevron {
+  border-color: rgba(206, 213, 255, 0.68);
+  background: rgba(160, 170, 255, 0.3);
 }
 
 .agent-invite[open] .agent-invite-chevron {
   transform: rotate(90deg);
+  /* Açıkken görevi bitti: sakinleşip kapatma düğmesine dönüşüyor. */
+  border-color: rgba(184, 193, 255, 0.22);
+  background: transparent;
+}
+
+/* Kıpırtı okun kendisinde, döndürme ise kabında: ikisi aynı transform
+ * üzerinde yarışmasın. */
+@keyframes agent-invite-beckon {
+  0%, 55%, 100% { transform: translateX(0); }
+  72% { transform: translateX(0.16rem); }
+}
+
+.agent-invite:not([open]) .agent-invite-chevron .icon {
+  animation: agent-invite-beckon 2.4s ease-in-out infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-invite-chevron {
     transition: none;
   }
+
+  .agent-invite:not([open]) .agent-invite-chevron .icon {
+    animation: none;
+  }
 }
 
 .agent-invite-mark {