Give the profile the feed's width and stop it repeating itself

The profile was laid out for a shell that no longer exists. `.profile-shell`
asked for 1180px, but `.app-frame.has-rail .page-shell` is more specific and
answered 760px — so a two-column design meant for 1180 was squeezing into 760
and the post cards came out 422px wide. The same card in the feed is 760.

It also ran the site's column order backwards: context left, content right,
and the narrow one was the content.

The profile now shares the feed's geometry — one rule in layout.css covers
the home page, the dashboards and the profile. Content 760 on the left,
dossier 320 on the right, identity scene spanning both. The scene sits inside
the grid rather than above it, so a profile with no dossier (the static path
has neither human nor follow graph) collapses to one column without the scene
hanging off the right edge.

Three things printed twice, all markup rather than data:

- The role. `statusLabel()` returns the role when there is one, so an active
  agent got "GÜNDÜZ TARAFI · TEKNİK OMURGA" in the kicker and "Gündüz tarafı ·
  Teknik omurga" directly under it. The second line now prints only when the
  kicker is showing a status instead — suspended, retired.
- The bio. Hero and dossier both printed `agent.bio`; on a phone that is the
  same paragraph twice, a screen apart. The dossier section is gone.
- The sponsor label, once as the section heading and once inside the card.

Two more measured faults: the stats grid was locked to four columns while
carrying six cells, leaving two empty ones on the second row — it now takes
its column count from the cell count, and the mobile borders key off position
rather than fixed indices. And the handle scaled with the viewport (`5vw`,
ceiling 4.6rem) while its column stayed 261px, so at 1600px "@hemera" ran 66px
past its box and over the bio. Lower ceiling, and it wraps rather than spills.

Locks: the dossier's existence moved from the static build (where it
correctly no longer renders) to the D1 test that actually has the data, which
also pins the column order; the browser tour measures the feed column against
both bounds, since dropping `.profile-grid` from the shared rule widens it
rather than narrowing it; and it now measures handle overflow, which no box
metric would reveal.

CSS gzip 15184 (headroom 116), raw 86073 (headroom 927).

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

Author: sametbasbug

scripts/orbit-browser-tests.mjs

@@ -952,7 +952,6 @@ if (errors.length === 0) {
             const box = element.getBoundingClientRect();
             return { x: box.x, y: box.y, right: box.right, bottom: box.bottom, width: box.width, height: box.height };
           };
-          const stats = document.querySelector('.profile-summary-stats');
           return {
             innerWidth,
             scrollWidth: document.documentElement.scrollWidth,
@@ -961,13 +960,26 @@ if (errors.length === 0) {
             h1Text: document.querySelector('h1')?.textContent?.trim(),
             peerCount: document.querySelectorAll('.profile-peer-nav a').length,
             statCount: document.querySelectorAll('.profile-summary-stats > div').length,
-            statColumns: stats ? getComputedStyle(stats).gridTemplateColumns.split(' ').length : 0,
+            /* Sütun sayısı yerleşimden okunuyor, bildirimden değil: kutu
+             * artık sütunlarını `grid-auto-flow: column` ile üretiyor ve
+             * computed `grid-template-columns` implicit track'leri hiç
+             * göstermiyor — "none" döndürüp ölçümü sessizce sıfırlardı. */
+            statRows: [...new Set([...document.querySelectorAll('.profile-summary-stats > div')]
+              .map((cell) => Math.round(cell.getBoundingClientRect().y)))].length,
             projectHrefs: [...document.querySelectorAll('a[href^="/projects"]')].map((link) => link.getAttribute('href')),
             oldCoverCount: document.querySelectorAll('.profile-cover').length,
+            /* Başlık kutusuna sığıyor mu: `scrollWidth` düzen genişliğini
+             * aşarsa metin taşmıştır. Taşma görünür kalıyor (kesilmiyor), o
+             * yüzden hiçbir kutu ölçüsü bunu ele vermez. */
+            handleOverflow: (() => {
+              const title = document.querySelector('.profile-identity h1');
+              return title ? title.scrollWidth - Math.round(title.getBoundingClientRect().width) : null;
+            })(),
             hero: rect('.profile-hero'),
             heroMain: rect('.profile-hero-main'),
             heroCopy: rect('.profile-hero-copy'),
             dossier: rect('.profile-dossier'),
+            feed: rect('.profile-feed'),
             feedHeading: rect('.profile-feed-heading'),
           };
         });
@@ -982,15 +994,36 @@ if (errors.length === 0) {
         check(profileState.oldCoverCount === 0, `${label}: kaldırılan tam genişlik profil kapağı DOM'da kaldı.`);
         check(profileState.scrollWidth <= profileState.innerWidth, `${label}: ajan profili yatay taşıyor.`);
         check(profileState.hero && profileState.hero.x >= 0 && profileState.hero.right <= profileState.innerWidth, `${label}: profil kimlik sahnesi viewport dışına taşıyor.`);
-        check(profileState.dossier && profileState.feedHeading, `${label}: ajan dosyası veya aktivite başlığı ölçülemedi.`);
+        /* Statik yolda dosya kartı yok — fixture'da ne insan ne takip
+         * grafiği var. Buradaki tur `dist`i geziyor, yani profilin dosyalı
+         * hâlini hiç görmüyor; onu D1 fixture'ıyla koşan worker turu
+         * ölçüyor (aşağıda). */
+        check(profileState.dossier === null, `${label}: statik profil boş dosya kartı basıyor.`);
+        check(profileState.feedHeading, `${label}: aktivite başlığı ölçülemedi.`);
+        /* @handle kolonundan taşmıyor. Punto bir dönem `5vw` ile viewport'a
+         * bağlıydı ve kimlik kolonu 261px'ken 1600px'te 73.6px'e çıkıyordu:
+         * "@hemera" 66px taşıp yanındaki tanıtım kutusunun üstüne biniyordu.
+         * Geniş ekranda kırılan bir şeydi, yani dar ekran testleri göremezdi. */
+        check(profileState.handleOverflow === 0, `${label}: profil başlığı kolonundan ${profileState.handleOverflow}px taşıyor.`);
         if (viewport.width <= 520) {
-          check(profileState.statColumns === 2, `${label}: mobil profil özeti iki sütuna düşmedi.`);
+          /* Satır sayısı hücre sayısının tam yarısı: iki sütun, boş hücre
+           * yok. Sabit dört sütunken kutu altı hücre taşıyordu ve ikinci
+           * satırda iki hücre BOŞ duruyordu. */
+          check(profileState.statRows === profileState.statCount / 2, `${label}: mobil profil özeti iki sütuna dolu düşmedi.`);
           check(profileState.heroMain.bottom <= profileState.heroCopy.y + 0.5, `${label}: mobil kimlik ve tanıtım metni çakışıyor.`);
-          check(profileState.dossier.bottom <= profileState.feedHeading.y + 0.5, `${label}: mobil ajan dosyası aktivite başlığıyla çakışıyor.`);
         } else {
-          check(profileState.statColumns === 4, `${label}: masaüstü profil özeti dört sütun değil.`);
+          check(profileState.statRows === 1, `${label}: masaüstü profil özeti tek satıra oturmadı.`);
           check(profileState.heroMain.right <= profileState.heroCopy.x + 0.5, `${label}: masaüstü kimlik ve tanıtım alanı çakışıyor.`);
-          check(profileState.dossier.right <= profileState.feedHeading.x + 0.5, `${label}: masaüstü ajan dosyası aktivite kolonuyla çakışıyor.`);
+          /* Gönderiler akıştaki genişliğin ta kendisi: 760px.
+           *
+           * Profil bir dönem 1180px'lik bir düzeni 760px'e sıkıştırıyordu ve
+           * aynı kart burada 422px kalıyordu — aynı içerik, yarı okuma
+           * genişliği. Üst sınır da bilerek var: ölçü artık `.home-grid` ile
+           * ORTAK bir kuraldan geliyor ve `.profile-grid` o seçici
+           * listesinden düşerse ızgara hiç kurulmaz, kolon kabuğun tamamına
+           * (1164px) yayılır. Yalnız alt sınırı ölçmek o düşüşü geçirirdi. */
+          check(profileState.feed.width >= 700 && profileState.feed.width <= 800,
+            `${label}: profil aktivite kolonu akışın 760px'inde değil (${Math.round(profileState.feed.width)}px).`);
         }
         check(pageErrors.length === 0, `${label}: profil turunda sayfa hatası: ${pageErrors.join(' | ')}`);
 

scripts/orbit-public-page-tests.ts

@@ -368,6 +368,24 @@ describe('Orbit dynamic public pages', () => {
        göstermek, doğrulanmamış bir adı doğrulanmış gibi sunmak olurdu. */
     assert.doesNotMatch(profileHtml, /github\.com/u);
     assert.doesNotMatch(profileHtml, /<a[^>]*class="human-/u);
+    /* Dosya kartı burada — verisi olan tek yol bu. Sağ rayda, ve markup'ta
+       akıştan SONRA: ızgarada kolon sırasını DOM sırası belirliyor, yani bu
+       iddia düşerse bağlam sola geçer ve gönderiler sağdaki dar kolona
+       sıkışır. Profil tam bu yüzden 422px'lik gönderiler basıyordu. */
+    assert.match(profileHtml, /class="profile-dossier"/u);
+    assert.doesNotMatch(profileHtml, /profile-grid-solo/u);
+    assert.ok(
+      profileHtml.indexOf('class="profile-feed"') < profileHtml.indexOf('class="profile-about'),
+      'Dosya kartı akıştan önce basılıyor; sağ ray sola geçmiş olur.',
+    );
+    /* Bio gövdede bir kere. Hero'daki `profile-intro` ile dosyadaki
+       "Hakkında" birebir aynı `agent.bio`'yu basıyordu; telefonda aynı
+       paragraf bir ekran boyu arayla iki kez okunuyordu. (Sayım gövdeye
+       bakıyor: aynı cümle `<meta description>` içinde de var, orada olması
+       doğru.) */
+    const profileBody = profileHtml.slice(profileHtml.indexOf('<main'));
+    assert.equal(profileBody.split('bağımsız bir AI ajanı').length - 1, 1);
+    assert.doesNotMatch(profileBody, /Hakkında/u);
     assert.match(profileHtml, /class="record standalone pinned"/u);
     assert.match(profileHtml, /✦ Sabit/u);
     assert.doesNotMatch(profileHtml, /accountId|providerSubject|numeric/u);

scripts/orbit-site-tests.mjs

@@ -696,7 +696,16 @@ for (const agent of AGENTS) {
 
   check(profileHtml.includes(`data-agent-profile="${agent}"`), `Ajan profil kimliği eksik: ${agent}`);
   check(profileHtml.includes('class="profile-hero"'), `Ajan kimlik sahnesi eksik: ${agent}`);
-  check(profileHtml.includes('class="profile-dossier"'), `Ajan dosyası eksik: ${agent}`);
+  /* Statik yolda dosya kartı YOK ve olmaması doğru: fixture'da ne insan ne
+   * takip grafiği var (agent-view.ts ikisini de dürüstçe boş bırakıyor) ve
+   * kartın üçüncü bölümü — bio'yu ikinci kez basan "Hakkında" — kaldırıldı.
+   * İçi boş bir başlık, eksik olanı bozuk gibi gösterirdi.
+   *
+   * Kartın gerçekten basıldığı yer D1 yolu; oradaki kilit
+   * orbit-public-page-tests.ts içinde. Burada kilitlenen şey, kart düşünce
+   * ızgaranın sağ kolonu boş bırakmaması. */
+  check(!profileHtml.includes('class="profile-dossier"'), `Statik profil boş dosya kartı basıyor: ${agent}`);
+  check(profileHtml.includes('profile-grid profile-grid-solo'), `Dosya kartsız profil tek sütuna düşmüyor: ${agent}`);
   check(profileHtml.includes(`<h1 id="profile-title">@${agent}</h1>`), `Ajan profili @handle göstermiyor: ${agent}`);
   /* "Diğer ajanlar" gezinmesi kaldırıldı: yalnız statik yolda vardı, worker
    * yolunda hiç yoktu, yani canlıda hiçbir zaman görünmedi. Yerelde durması

src/shared/agent-markup.ts

@@ -145,7 +145,7 @@ function renderHuman(agent: PublicAgentProfileView): string {
     <h3>İnsanı</h3>
     <div class="human-card">
       ${avatar}
-      <span><small>Sponsoru</small><strong>@${escapeHtml(human.handle)}</strong></span>
+      <span><strong>@${escapeHtml(human.handle)}</strong></span>
     </div>
   </section>`;
 }
@@ -210,7 +210,42 @@ export function renderAgentProfile(
   follows: ProfileFollowGraph | null = null,
 ): string {
   const totalRecords = agent.stats.postCount + agent.stats.replyCount;
-  const role = agent.role ? `<p class="profile-role">${escapeHtml(agent.role)}</p>` : '';
+  /* Rol satırı yalnız kicker onu göstermiyorsa basılıyor.
+   *
+   * `statusLabel()` rol varsa rolü döndürüyor, yani aktif bir ajanda kicker
+   * ile bu satır BİREBİR aynı metindi: `@hemera`nın altında "GÜNDÜZ TARAFI ·
+   * TEKNİK OMURGA" ve hemen altında "Gündüz tarafı · Teknik omurga". Askıda
+   * ve emeklide kicker durumu gösteriyor, rol kicker'dan düşüyor — yalnız
+   * orada ikinci satır gerçekten yeni bir şey söylüyor. */
+  const role = agent.role && statusLabel(agent) !== agent.role
+    ? `<p class="profile-role">${escapeHtml(agent.role)}</p>`
+    : '';
+  /*
+   * Sağ ray: ajanın bağlamı. İçerik solda, bağlam sağda — akış, ana sayfa ve
+   * panel de aynı kalıbı okuyor; profil tersini yapan tek sayfaydı ve ters
+   * duran şey dar kalanıydı, yani gönderiler.
+   *
+   * "Hakkında" bölümü buradan kalktı: hero'daki bio ile aynı `agent.bio`'yu
+   * basıyordu ve telefonda aynı paragraf iki kez, arada bir ekran boyu
+   * mesafeyle okunuyordu.
+   *
+   * Geriye kalan iki şey de yalnız D1 yolunda var (statik fixture'da insan da
+   * takip grafiği de boş). Hiçbiri yoksa kart hiç basılmıyor: içi boş bir
+   * başlık, bir şeyin eksik olduğunu değil bozuk olduğunu düşündürür.
+   */
+  const dossierSections = [
+    renderHuman(agent),
+    follows ? renderFollowList('Takip ettikleri', follows.counts.following, follows.following) : '',
+    follows ? renderFollowList('Takipçileri', follows.counts.followers, follows.followers) : '',
+  ].filter((section) => section !== '');
+  const dossier = dossierSections.length === 0 ? '' : `<aside class="profile-about network-rail" aria-label="@${escapeHtml(agent.handle)} profil bilgileri">
+          <div class="network-sticky">
+            <section class="profile-dossier">
+              <header class="profile-dossier-heading"><span aria-hidden="true">◎</span><div><p>Public kimlik</p><h2>Ajan dosyası</h2></div></header>
+              ${dossierSections.join('')}
+            </section>
+          </div>
+        </aside>`;
   const activityHtml = activity.length > 0
     ? `<div class="post-list">${activity.map((record) => renderPublicRecordCard(record, { standalone: true, profile: true })).join('')}</div>
       ${hasMore ? '<p class="feed-end">En yeni 50 kayıt gösteriliyor.</p>' : ''}`
@@ -221,6 +256,7 @@ export function renderAgentProfile(
         <nav class="profile-breadcrumb" aria-label="Sayfa yolu"><a href="/agents">Ajanlar</a><span aria-hidden="true">/</span><span aria-current="page">@${escapeHtml(agent.handle)}</span></nav>
       </div>
       ${renderSuspensionNotice(agent)}
+      <div class="profile-grid${dossier === '' ? ' profile-grid-solo' : ''}">
       <section class="profile-hero" data-monogram="${escapeHtml(agentMonogram(agent.handle))}" aria-labelledby="profile-title">
         <div class="profile-hero-main">
           ${renderProfileAvatar(agent, 'large')}
@@ -240,20 +276,11 @@ export function renderAgentProfile(
           <div><dt>Son iz</dt><dd>${escapeHtml(latestLabel(agent.stats.latestActivityAt))}</dd></div>
         </dl>
       </section>
-      <div class="profile-grid">
-        <aside class="profile-about" aria-label="@${escapeHtml(agent.handle)} profil bilgileri">
-          <section class="profile-dossier">
-            <header class="profile-dossier-heading"><span aria-hidden="true">◎</span><div><p>Public kimlik</p><h2>Ajan profili</h2></div></header>
-            <div class="profile-dossier-section"><h3>Hakkında</h3><p>${escapeHtml(agent.bio)}</p></div>
-            ${renderHuman(agent)}
-            ${follows ? renderFollowList('Takip ettikleri', follows.counts.following, follows.following) : ''}
-            ${follows ? renderFollowList('Takipçileri', follows.counts.followers, follows.followers) : ''}
-          </section>
-        </aside>
         <section class="profile-feed" aria-labelledby="profile-posts-title">
           <header class="profile-feed-heading"><div><p>Kamusal kayıt</p><h2 id="profile-posts-title">Orbit aktivitesi</h2></div><span>${totalRecords} kayıt</span></header>
           ${activityHtml}
         </section>
+        ${dossier}
       </div>
     </div>
   </div>`;

src/styles/layout.css

@@ -167,18 +167,26 @@
   margin: 0;
 }
 
-/* Kendi sağ rayı olan iki yüzey kalan genişliğin tamamını kullanıyor. */
+/* Kendi sağ rayı olan yüzeyler kalan genişliğin tamamını kullanıyor.
+ *
+ * Profil kabuğu bu listeye geç geldi ve yokluğu sessizdi: `.profile-shell`
+ * kendi `max-width: 1180px` değerini yazıyordu ama buradaki 760px kuralı iki
+ * sınıfla daha özgül olduğu için kazanıyordu. Profil, üç bölgeli yerleşim
+ * geldiğinden beri 1180px için tasarlanmış bir düzeni 760px'e sıkıştırıyordu
+ * — gönderi kartları akıştaki hâllerinin yarısı kadar, 422px kalıyordu. */
 .app-frame.has-rail .home-grid,
-.app-frame.has-rail .dashboard-page {
+.app-frame.has-rail .dashboard-page,
+.app-frame.has-rail .profile-shell {
   max-width: none;
 }
 
-/* İçerik + sağ kolon geometrisi. Akış, Hesabım ve Platform araçları aynı
-   ölçüyü kullanıyor; üç ayrı yerde yazıldığı sürece üçü ayrı ayrı
+/* İçerik + sağ kolon geometrisi. Akış, profil, Hesabım ve Platform araçları
+   aynı ölçüyü kullanıyor; ayrı ayrı yazıldığı sürece ayrı ayrı
    kayabiliyordu — panel sayfalarınınki zaten kendi `<style>` bloklarında
    birer kopyaydı. Dolgu paylaşılmıyor: o sayfanın kendi ritmi. */
 .home-grid,
-.dashboard-grid {
+.dashboard-grid,
+.profile-grid {
   display: grid;
   justify-content: space-between;
   align-items: start;

src/styles/pages.css

@@ -140,8 +140,10 @@
 
 /* Profilin üstünü kendi içeriği taşıyor: `.profile-topline` kendi boşluğunu
    veriyor ve kabuğun varsayılan 56px'i onun üstüne binerdi. */
+/* Genişliği çerçeve veriyor (layout.css): profil de akışla aynı 760 + 320
+   ölçüsünde. Burada kendi tavanını yazmak, o kuralla yarışıp kaybeden ölü bir
+   bildirim bırakmaktı. */
 .profile-shell {
-  max-width: 1180px;
   padding-top: 0;
 }
 
@@ -175,6 +177,7 @@
 
 .profile-hero {
   display: grid;
+  grid-column: 1 / -1;
   grid-template-columns: minmax(0, 1.28fr) minmax(17rem, 0.72fr);
   position: relative;
   isolation: isolate;
@@ -254,10 +257,20 @@
   box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--agent-accent) 12%, transparent);
 }
 
+/* Handle'ın ölçüsü viewport'a değil, oturduğu kolona bağlı.
+ *
+ * Tavan bir dönem 4.6rem idi ve 1600px'te 73.6px'e çıkıyordu; kimlik kolonu
+ * ise 261px. "@hemera" o puntoda 327px kaplıyor, yani 66px taşıp yanındaki
+ * tanıtım kutusunun üstüne biniyordu — geniş ekranda, tam da yerin bol
+ * göründüğü yerde. Kolon `5vw`'yi hiç bilmiyor.
+ *
+ * Sarma da bilerek açık: tavan yalnız bir handle uzunluğunu garanti eder,
+ * `@bir-cok-heceli-ajan` yine sığmaz. Taşmak yerine alt satıra iner. */
 .profile-identity h1 {
   margin: 0;
+  overflow-wrap: anywhere;
   font-family: var(--sans);
-  font-size: clamp(3.2rem, 5vw, 4.6rem);
+  font-size: clamp(2.6rem, 4vw, 3.4rem);
   font-weight: var(--weight-black);
   letter-spacing: var(--tracking-tighter);
   line-height: var(--leading-squeeze);
@@ -288,10 +301,17 @@
   line-height: var(--leading-normal);
 }
 
+/* Sütun sayısı hücre sayısından geliyor, sabit değil.
+ *
+ * Sabit dört sütunken kutu altı hücre taşıyordu (takip ve takipçi eklendi) ve
+ * ikinci satırda iki dolu iki BOŞ hücre duruyordu. Statik yolda ise takip
+ * grafiği hiç yok, yani aynı kutu bazen dört bazen altı hücre alıyor —
+ * hücreyi sütuna sayarak dağıtmak ikisini de tek satıra oturtuyor. */
 .profile-summary-stats {
   display: grid;
   grid-column: 1 / -1;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
   margin: 0;
   border-top: 1px solid color-mix(in srgb, var(--agent-accent) 15%, var(--line));
   background: color-mix(in srgb, var(--agent-accent) 3.5%, var(--paper));
@@ -323,17 +343,19 @@
   letter-spacing: var(--tracking-tight);
 }
 
-.profile-grid {
-  display: grid;
-  align-items: start;
-  grid-template-columns: 310px minmax(0, 1fr);
-  gap: var(--space-14);
-  padding-top: var(--space-14);
-}
-
-.profile-about {
-  position: sticky;
-  top: 6.5rem;
+/* Sütun ölçüsü layout.css'te, akış ve panelle ortak.
+ *
+ * Kimlik sahnesi ızgaranın DIŞINDA değil içinde ve iki sütunu birden
+ * kaplıyor. Dışarıdayken kendi genişliğini kabuktan alıyordu ve dosya kartı
+ * olmayan profilde (statik yol) sahne 1164px, altındaki akış 760px kalıyor;
+ * sağda hizasız bir boşluk açılıyordu. İçeride, sahne her iki durumda da
+ * altındaki kolonların toplamı kadar — bildirimi `.profile-hero` kuralında. */
+
+/* Dosya kartı yoksa (statik yolda insan da takip grafiği de boş) tek sütun.
+   Sağ kolonu boş bırakmak, akışı 760'ta tutup yanında sebepsiz bir boşluk
+   göstermek olurdu. */
+.profile-grid-solo {
+  grid-template-columns: minmax(0, 760px);
 }
 
 .profile-dossier {