Open the invite, slide the sheet, and sweep out dead CSS

Four things Samet asked for, and one that fell out of paying for them.

The home page gets its join link back, under the announcement panel. The
card itself stays on the directory; this is the one-line route to it. It
deliberately skips the .network-section box -- the other things in that
column are sections with a heading and content, and this is a single action.

The invite card now opens by default. On the top of the feed it was closed
for good reason: everyone arriving at the feed had to scroll past it. On the
directory the reverse holds, because whoever is on that page is already
asking how to join. Only the collapse is remembered now -- the stored value
answers "did they close it", not "did they open it", and the old check for
'expanded' would have done nothing once the default flipped.

The announcement pill kept its light background in dark mode. Its light
appearance shares one declaration with the mobile search button, but the dark
rule listed only the search button. Sharing half of an object's definition is
worse than not sharing it: the drift is silent.

The sheet slides up instead of appearing. That needs allow-discrete on
display and overlay, plus @starting-style for the entry values -- without the
latter there is no "before" state and the panel simply arrives. A browser
assertion samples the box in the same task as the click and requires it to
start below the viewport, which is what catches a deleted @starting-style;
deleting it fails nothing else. Reduced motion pins the end state rather than
just dropping the transition, which would leave the panel offscreen.

The three additions blew the CSS budget, so I went looking before raising it
and found 24 classes with no markup anywhere -- leftovers from the retired
Projects and Replies routes and the header's removed Saved button. Deleting
them freed 8650 bytes, far more than the additions cost.

So the ceiling comes down instead of up: gzip 15850 -> 15300, raw 92000 ->
87000. A ceiling sitting far above the real number measures nothing, and this
one had been raised twice in two rounds.

My first pruning script rewrote selector lists and blank lines while deleting,
including splitting a comment across a comma. Reverted it and wrote a
line-based one that only deletes; the diff is 381 removed lines and zero
added.

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

Author: sametbasbug

scripts/orbit-browser-tests.mjs

@@ -654,16 +654,42 @@ if (errors.length === 0) {
       if (viewport.width <= 780) {
         const sheetDialog = page.locator('[data-announcement-sheet]');
         check(!(await sheetDialog.evaluate((el) => el.open)), `${label}: duyuru sayfası kendiliğinden açık geldi.`);
-        await announceTrigger.click();
+
+        /* Tıklama ve ilk ölçüm AYNI evaluate içinde: sayfa aşağıdan kayarak
+         * geliyor ve dışarıdan `boundingBox()` çağırmak onu animasyonun
+         * ortasında yakalıyordu. Buradaki ilk okuma, geçişin başlangıç
+         * hâlini — yani ekranın tamamen altını — görmek için.
+         *
+         * `ilkAlt > yükseklik` iddiası iki şeyi birden koruyor: geçiş
+         * tanımının kendisini ve `@starting-style` bloğunu. İkincisi
+         * silinirse tarayıcının geçireceği bir "önce" hâli kalmıyor ve
+         * panel son hâlinde ışınlanıyor — animasyon sessizce yok oluyor
+         * ama başka hiçbir iddia bunu fark etmiyor. */
+        const motion = await page.evaluate(async () => {
+          const dialog = document.querySelector('[data-announcement-sheet]');
+          document.querySelector('[data-announcement-trigger]').click();
+          const first = dialog.getBoundingClientRect().bottom;
+          await new Promise((resolve) => { setTimeout(resolve, 500); });
+          return {
+            first,
+            settled: dialog.getBoundingClientRect().bottom,
+            duration: getComputedStyle(dialog).transitionDuration,
+            height: window.innerHeight,
+          };
+        });
+
         check(await sheetDialog.evaluate((el) => el.open), `${label}: duyuru sayfası tıklamayla açılmadı.`);
         check(
           new URL(page.url()).pathname !== '/duyurular',
           `${label}: duyuru ikonu sayfayı yerinde açmak yerine gezindi.`,
         );
-        const sheetBox = await sheetDialog.boundingBox();
         check(
-          Boolean(sheetBox) && Math.abs(sheetBox.y + sheetBox.height - viewport.height) <= 1,
-          `${label}: duyuru sayfası ekranın altına yapışmadı.`,
+          motion.first > motion.height,
+          `${label}: duyuru sayfası ekranın altından kayarak gelmiyor (ilk alt ${Math.round(motion.first)}, ekran ${motion.height}).`,
+        );
+        check(
+          Math.abs(motion.settled - motion.height) <= 1,
+          `${label}: duyuru sayfası ekranın altına yapışmadı (${Math.round(motion.settled)}/${motion.height}).`,
         );
         await page.keyboard.press('Escape');
         check(!(await sheetDialog.evaluate((el) => el.open)), `${label}: duyuru sayfası Escape ile kapanmadı.`);
@@ -687,10 +713,13 @@ if (errors.length === 0) {
       await page.goto(`${baseUrl}/agents/`, { 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 açık geldi.`);
+      /* Varsayılan AÇIK. Dizine gelen kişi zaten "nasıl katılırım" diye
+       * geliyor; cevabı görmek için bir tıklama daha istemek gereksiz.
+       * Ana sayfanın tepesindeyken kuralı tersiydi ve o zaman doğruydu. */
+      check(await invite.evaluate((el) => el.open), `${label}: ajan daveti kapalı geldi; dizinde varsayılan açık.`);
       check(
         await invite.locator('h2').isVisible(),
-        `${label}: kapalı panelde başlık görünmez; kalıcı kalması gereken tek parça o.`,
+        `${label}: panel başlığı görünmüyor; 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.
@@ -711,32 +740,39 @@ if (errors.length === 0) {
         `${label}: açma oku çerçevesiz; süs mü kontrol mü belli değil.`,
       );
 
-      const closedHeight = await invite.evaluate((el) => el.getBoundingClientRect().height);
+      /* Dizin sayfanın kendi `<h1>`'ini taşıyor; davet kartı ikinci bir
+       * birinci düzey başlık getirmemeli. */
+      check(await page.locator('h1').count() === 1, `${label}: ajan dizininde birden fazla h1 var.`);
+
+      /* Sıra varsayılanla birlikte tersine döndü: artık önce KAPATIYORUZ.
+       * Hatırlanan şey de bu — "daha önce açmış mıydı" değil, "daha önce
+       * kapatmış mıydı". */
+      const openHeight = await invite.evaluate((el) => el.getBoundingClientRect().height);
       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.evaluate((el) => el.open)), `${label}: ajan daveti başlığa tıklanınca kapanmadı.`);
       check(
-        await invite.evaluate((el) => el.getBoundingClientRect().height) > closedHeight,
-        `${label}: panel açıldı ama yüksekliği büyümedi.`,
+        await invite.evaluate((el) => el.getBoundingClientRect().height) < openHeight,
+        `${label}: panel kapandı ama yüksekliği küçülmedi.`,
       );
       /* `toggle` olayı senkron değil: tıklama çözüldüğünde panel çoktan
-       * açılmış olur ama yazma sırası henüz gelmemiş olabilir. Değeri
+       * kapanmış olur ama yazma sırası henüz gelmemiş olabilir. Değeri
        * beklemeden okumak testi zamanlamaya bağlı hâle getirir. */
       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.reload({ waitUntil: 'load' });
-      check(await invite.evaluate((el) => el.open), `${label}: açık durum reload sonrasında korunmadı.`);
-      /* Dizin sayfanın kendi `<h1>`'ini taşıyor; davet kartı ikinci bir
-       * birinci düzey başlık getirmemeli. */
-      check(await page.locator('h1').count() === 1, `${label}: ajan dizininde birden fazla h1 var.`);
+      check(
+        !(await invite.evaluate((el) => el.open)),
+        `${label}: kapatma kararı reload sonrasında korunmadı.`,
+      );
 
       await invite.locator('summary').click();
-      check(!(await invite.evaluate((el) => el.open)), `${label}: açık panel yeniden kapanmadı.`);
+      check(await invite.evaluate((el) => el.open), `${label}: kapalı panel yeniden açılmadı.`);
       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.evaluate(() => localStorage.removeItem('orbit-agent-invite'));
 

scripts/orbit-site-tests.mjs

@@ -830,12 +830,17 @@ for (const post of publicPosts) {
  * Şu an en ağır sayfa /messages: 13.453 byte paylaşılan bundle + 1.094 byte
  * sayfaya özel, toplam 14.547. Akış ve gönderi sayfaları 13.453'te kalıyor.
  *
- * Tavan 15.600'den 15.850'ye çıktı: duyuru paneli ve mobil duyuru sayfası
- * sıkıştırılmış CSS'e ekledi. Bu turda ölü `.announcement-strip` kuralları
- * (1491 byte ham) silinerek bir kısmı geri kazanıldı — şerit renderer'ı
- * kalktığı hâlde stilleri duruyordu.
+ * Tavan bu turda DÜŞTÜ: 15.850'den 15.300'e. Sebebi bir kazanım değil bir
+ * temizlik — kaldırılmış Projeler ve Yanıtlar rotalarından ve header'dan
+ * çıkan Kaydedilenler düğmesinden kalan 24 ölü sınıf, 8.650 byte ham CSS
+ * tutuyordu. Silinince ölçüm 16.038'den 15.158'e indi.
  *
- * Bir önceki tur: tavan 15.500'den 15.600'e çıktı. Gerekçesi ölçülmüş: üç bölgeli yerleşim
+ * Tavan gerçeğin çok üstünde kalırsa hiçbir şey ölçmez: fark ettirmeden
+ * büyümeyi yakalamak için payın dar olması gerekiyor. Bu yüzden tavan
+ * yalnız yükselmiyor, gerektiğinde iniyor da.
+ *
+ * Önceki turlar: 15.600'den 15.850'ye çıkmıştı (duyuru paneli ve mobil
+ * duyuru sayfası), ondan önce 15.500'den 15.600'e. Gerekçesi ölçülmüş: üç bölgeli yerleşim
  * (esneyen ray oluğu, 1480px bandı, header'ın çerçeveyle aynı ifadeyi
  * taşıması) sıkıştırılmış CSS'e 75 byte ekledi. Bu turda 34 byte ölü
  * `.context-rail` kuralı silinerek geri kazanıldı; kalanı yeni yapının
@@ -860,8 +865,8 @@ for (const file of htmlFiles) {
   if (gzip > heaviest.gzip) heaviest = { page: path.relative(DIST_DIR, file), raw, gzip };
 }
 check(heaviest.gzip > 0, 'Hiçbir sayfa derlenmiş CSS bundle\'ına bağlanmıyor.');
-check(heaviest.gzip < 15_850, `Gzip CSS bütçesi aşıldı: ${heaviest.page} ${heaviest.gzip} byte.`);
-check(heaviest.raw < 92_000, `Ham CSS emniyet sınırını aştı: ${heaviest.page} ${heaviest.raw} byte.`);
+check(heaviest.gzip < 15_300, `Gzip CSS bütçesi aşıldı: ${heaviest.page} ${heaviest.gzip} byte.`);
+check(heaviest.raw < 87_000, `Ham CSS emniyet sınırını aştı: ${heaviest.page} ${heaviest.raw} byte.`);
 
 /* Font bütçesi.
  *

src/components/AgentInvite.astro

@@ -15,13 +15,14 @@
 import Icon from './Icon.astro';
 ---
 
-{/* Varsayılan kapalı: dizine bakan 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.
+{/* Varsayılan AÇIK. Kart ana sayfanın tepesindeyken kapalı geliyordu —
+    orada akışa gelen herkesin önünde duruyordu ve her ziyarette rehberin
+    tamamını göstermek fazlaydı. Ajan dizininde durum tersi: buraya gelen
+    kişi zaten "kimler var, ben nasıl katılırım" diye geliyor ve cevabı
+    açmak için bir tıklama daha istemek gereksiz.
     <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">
+<details class="orbit-welcome agent-invite" id="agent-invite" open>
   <summary class="agent-invite-heading">
     <span class="agent-invite-mark" aria-hidden="true"><Icon name="agents" size={20} /></span>
     <div>
@@ -44,15 +45,19 @@ import Icon from './Icon.astro';
       rehberi okuyan ajan karar verir, buraya gelen insan 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: 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. */}
+{/* Panelin hemen ardında, ayrıştırma sırasında çalışır: kapatma kararı ilk
+    boyamadan önce uygulanıyor, yani panel açık görünüp sonra kapanmıyor.
+    Tema anahtarı da aynı yöntemi kullanıyor. */}
 <script is:inline>
   (() => {
     const panel = document.getElementById('agent-invite');
     if (!panel) return;
+    /* Yalnız KAPATMA hatırlanıyor. Varsayılan açık olduğu için sorulacak soru
+       "daha önce açmış mıydı" değil, "daha önce kapatmış mıydı". Eski kod
+       'expanded' arıyordu ve varsayılan açığa çevrilince hiçbir işe
+       yaramıyordu: depoda değer olsun olmasın panel açık kalıyordu. */
     try {
-      if (localStorage.getItem('orbit-agent-invite') === 'expanded') panel.open = true;
+      if (localStorage.getItem('orbit-agent-invite') === 'collapsed') panel.open = false;
     } catch {}
     panel.addEventListener('toggle', () => {
       try {

src/components/HomeFeed.astro

@@ -86,6 +86,18 @@ const paginationBasePath = selectedAgent ? `/feed/${selectedAgent.slug}` : '/';
           </div>
         </section>
 
+        {/*
+          Katılma çağrısı akıştan çıkınca ana sayfada hiç kalmamıştı: yeni
+          gelen biri akışı görüyor ama "ben nasıl katılırım"ın cevabını
+          yalnız menüdeki Ajanlar'dan bulabiliyordu. Bu, o cevabın ana
+          sayfadaki tek satırlık hâli — kartın kendisi değil, ona giden yol.
+        */}
+        <a class="network-join" href="/agents">
+          <Icon name="agents" size={18} />
+          <span><strong>Ajanını yörüngeye getir</strong>Katılım adımları ajan dizininde.</span>
+          <Icon name="arrow-right" size={16} />
+        </a>
+
         <section class="network-section network-follow">
           <Icon name="rss" size={18} />
           <div><h2>Akışı takip et</h2><p>Yeni Orbit kayıtlarını algoritmasız izlemek için RSS.</p><a href="/feed.xml">RSS akışını aç</a></div>

src/styles/components.css

@@ -337,12 +337,6 @@
   margin-top: var(--space-8);
 }
 
-.project-attachment:hover strong {
-  color: var(--link);
-  text-decoration: underline;
-  text-underline-offset: 0.18rem;
-}
-
 .agent-avatar {
   --agent-accent: var(--nyx);
   display: inline-grid;
@@ -517,71 +511,9 @@
   margin-bottom: 0;
 }
 
-.project-attachment {
-  margin: var(--space-8) 0 0;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-8);
-  text-decoration: none;
-  padding: var(--space-8) var(--space-8);
-  border: 1px solid #e2e5ee;
-  border-radius: 0.8rem;
-  background: var(--surface-control);
-  transition: border-color 160ms ease, background 160ms ease;
-}
-
-.project-attachment:hover {
-  border-color: color-mix(in srgb, var(--project-accent) 34%, var(--line));
-  background: color-mix(in srgb, var(--project-accent) 5%, var(--surface));
-}
-
-.project-attachment small {
-  display: block;
-  margin-bottom: var(--space-1);
-  color: var(--faint);
-  font-size: var(--text-2xs);
-  font-weight: var(--weight-bold);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
-}
-
-.project-attachment strong {
-  font-size: var(--text-md);
-}
 
-.project-attachment p {
-  margin: var(--space-1) 0 0;
-  color: var(--muted);
-  font-size: var(--text-sm);
-  line-height: var(--leading-snug);
-}
-
-.project-attachment > .icon {
-  color: var(--faint);
-}
-
-.project-attachment-mark {
-  width: 2.65rem;
-  height: 2.65rem;
-  display: grid;
-  place-items: center;
-  border-radius: 0.75rem;
-  color: var(--project-accent, var(--orbit-blue));
-  background: color-mix(in srgb, var(--project-accent, var(--orbit-blue)) 10%, var(--surface));
-}
 
-.project-attachment-copy {
-  min-width: 0;
-  display: grid;
-}
 
-.project-attachment-copy em {
-  margin-top: var(--space-4);
-  color: var(--faint);
-  font-size: var(--text-2xs);
-  font-style: normal;
-}
 
 .record-media {
   overflow: hidden;
@@ -1213,34 +1145,6 @@
   display: none;
 }
 
-.header-saved {
-  min-height: 2.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: 0 var(--space-6);
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  color: var(--muted);
-  background: var(--surface-control);
-  font-size: var(--text-xs);
-  font-weight: var(--weight-bold);
-  text-decoration: none;
-  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
-}
-
-.header-saved:hover {
-  color: var(--orbit-blue);
-  border-color: var(--line-hover);
-  background: var(--surface-control-hover);
-  transform: translateY(-1px);
-}
-
-.header-saved.active {
-  color: var(--orbit-blue);
-  border-color: color-mix(in srgb, var(--orbit-blue) 28%, var(--line));
-  background: color-mix(in srgb, var(--orbit-blue) 7%, var(--surface));
-}
 
 .theme-toggle {
   width: 2.5rem;
@@ -1540,12 +1444,57 @@
   background: var(--surface);
   box-shadow: 0 -12px 40px rgba(31, 40, 72, 0.22);
   overflow: hidden;
+  /* Aşağıdan kayarak geliyor, ışınlanarak değil.
+   *
+   * `<dialog>` açılırken iki AYRIK özellik değişiyor: `display` ve top
+   * layer'a girmesi. İkisi normalde geçişe girmez; `allow-discrete` onları
+   * geçişin sonuna erteliyor. Başlangıç değerini `@starting-style` veriyor —
+   * onsuz tarayıcının geçireceği bir "önce" hâli olmuyor ve öğe doğrudan son
+   * hâlinde beliriyor, yani animasyon hiç görünmüyor.
+   *
+   * `overlay` de listede: yoksa sayfa kapanırken top layer'dan bir anda
+   * düşüyor ve kayma animasyonu ortada kesiliyor. */
+  opacity: 0;
+  translate: 0 100%;
+  transition:
+    translate 240ms cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 200ms ease,
+    display 240ms allow-discrete,
+    overlay 240ms allow-discrete;
+}
+
+.announcement-sheet[open] {
+  opacity: 1;
+  translate: 0 0;
+}
+
+@starting-style {
+  .announcement-sheet[open] {
+    opacity: 0;
+    translate: 0 100%;
+  }
 }
 
+/* Karartma da birlikte geliyor; sayfa kayarken arka planın bir anda
+   kararması iki ayrı olay gibi duruyordu. */
 .announcement-sheet::backdrop {
+  background: rgba(18, 24, 40, 0);
+  transition:
+    background-color 240ms ease,
+    display 240ms allow-discrete,
+    overlay 240ms allow-discrete;
+}
+
+.announcement-sheet[open]::backdrop {
   background: rgba(18, 24, 40, 0.45);
 }
 
+@starting-style {
+  .announcement-sheet[open]::backdrop {
+    background: rgba(18, 24, 40, 0);
+  }
+}
+
 .announcement-sheet-head {
   display: flex;
   align-items: center;