diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 267f120534f..11f6d25477d 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -21,6 +21,24 @@ const preview: Preview = {
           'Open Graph',
           'Experiments',
           'Extension',
+          'Squad Page',
+          [
+            '1. Direction',
+            '2. Use cases',
+            [
+              'Overview',
+              'Viewers',
+              'Posting',
+              'Content source',
+              'States',
+              'Manage',
+              'Breakpoints',
+              'Production parity',
+            ],
+            '3. Verified badge',
+            '4. Research',
+            'Archive',
+          ],
         ],
       },
     },
diff --git a/packages/storybook/public/squad-page/archive/profile-reference.png b/packages/storybook/public/squad-page/archive/profile-reference.png
new file mode 100644
index 00000000000..55a758b587f
Binary files /dev/null and b/packages/storybook/public/squad-page/archive/profile-reference.png differ
diff --git a/packages/storybook/public/squad-page/coderabbit-avatar.jpg b/packages/storybook/public/squad-page/coderabbit-avatar.jpg
new file mode 100644
index 00000000000..15ec4398537
Binary files /dev/null and b/packages/storybook/public/squad-page/coderabbit-avatar.jpg differ
diff --git a/packages/storybook/public/squad-page/coderabbit-banner.jpg b/packages/storybook/public/squad-page/coderabbit-banner.jpg
new file mode 100644
index 00000000000..36041960b24
Binary files /dev/null and b/packages/storybook/public/squad-page/coderabbit-banner.jpg differ
diff --git a/packages/storybook/stories/squad-page/Direction.stories.tsx b/packages/storybook/stories/squad-page/Direction.stories.tsx
new file mode 100644
index 00000000000..5344eab8323
--- /dev/null
+++ b/packages/storybook/stories/squad-page/Direction.stories.tsx
@@ -0,0 +1,220 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ExtensionProviders from '../extension/_providers';
+import { KitStyles, Viewer } from './kit';
+import { WorkspaceStyles } from './workspace';
+import { directionPageIds, DirectionShell } from './direction';
+import { PinStyle, pinStyles } from './pins';
+import { allCases, caseById } from './use-cases/cases';
+import { ViewportFrame } from './use-cases/shared';
+
+const meta: Meta = {
+  title: 'Squad Page/1. Direction',
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <ExtensionProviders>
+        <Story />
+      </ExtensionProviders>
+    ),
+  ],
+};
+
+export default meta;
+
+const Page = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+    <KitStyles />
+    <WorkspaceStyles />
+    <div className="mx-auto flex w-full max-w-[92rem] flex-col gap-14">
+      {children}
+    </div>
+  </div>
+);
+
+const Eyebrow = ({ children }: { children: ReactNode }): ReactElement => (
+  <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+    {children}
+  </span>
+);
+
+const Case = ({
+  title,
+  body,
+  viewer,
+  page,
+}: {
+  title: string;
+  body: string;
+  viewer: Viewer;
+  page: string;
+}): ReactElement => (
+  <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-1">
+      <span className="font-bold text-text-primary typo-callout">{title}</span>
+      <span className="max-w-[90ch] text-text-tertiary typo-footnote">
+        {body}
+      </span>
+    </div>
+    <DirectionShell viewer={viewer} initialPage={page} height={46} />
+  </div>
+);
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page>
+      <header className="flex flex-col gap-3 border-b border-border-subtlest-tertiary pb-8">
+        <Eyebrow>Squad page · Direction</Eyebrow>
+        <h1 className="max-w-[24ch] font-bold typo-mega3">
+          The profile page, for a company
+        </h1>
+        <div className="flex max-w-[76ch] flex-col gap-3 text-text-secondary typo-body">
+          <p>
+            The profile&apos;s header and right column, for a Squad. The header
+            carries the cover, the round logo, the name with the verified badge,
+            one meta line and the stats, with every action as a Subtle button
+            and Join Squad last. Home is the products shelf, the composer,
+            pinned posts and one feed in infinite scroll. Search sits in the
+            header beside the options menu and opens Spotlight filtered to this
+            Squad; results get their own page.
+          </p>
+          <p>
+            Rules, FAQ, Members, Products and the other pages replace the centre
+            card under a back button and the page title. Edit page opens the
+            Manage area, laid out like profile settings: a grouped menu on
+            laptop, a list and then one page at a time on phones.
+          </p>
+          <p>
+            The right column holds the Verified Squad page card, View as a
+            visitor and the share card for the team, Rules, Team, Stack &amp;
+            Tools, Analytics for admins, and Links. Below 1020px it becomes the
+            About tab beside Posts, above the composer.
+          </p>
+        </div>
+      </header>
+      <div className="flex flex-col gap-12">
+        <Case
+          title="Home, as a member"
+          body="Header, the products shelf, the composer, then Posts with its search, pinned posts and the one feed, polls included. The shelf clips the last product so it reads as scrollable; See all opens Products."
+          viewer={Viewer.Member}
+          page="home"
+        />
+        <Case
+          title="Home, as an admin"
+          body="Edit page as a pen icon, the bell, Share, the options menu with Manage, and Boost last where Join Squad sits for everyone else. The right column opens with View as a visitor and the share card, and adds Analytics."
+          viewer={Viewer.Admin}
+          page="home"
+        />
+        <Case
+          title="Rules, from the widget"
+          body="All rules replaces the centre with the Rules page under a back button and the title. The right column stays."
+          viewer={Viewer.Visitor}
+          page="rules"
+        />
+        <Case
+          title="Members, from the count"
+          body="The members list with its tabs and search, under the same back button and title."
+          viewer={Viewer.Member}
+          page="members"
+        />
+        <Case
+          title="Manage, from Edit page"
+          body="The settings area: the grouped menu beside the page, Details first. Moderation, Content feed, Analytics and Settings in the options menu open their section here."
+          viewer={Viewer.Admin}
+          page="manage-details"
+        />
+      </div>
+    </Page>
+  ),
+};
+
+export const Playground: StoryObj<{
+  viewer: Viewer;
+  page: string;
+  pin: PinStyle;
+  case: string;
+}> = {
+  parameters: { layout: 'fullscreen' },
+  args: {
+    viewer: Viewer.Member,
+    page: 'home',
+    pin: PinStyle.Reddit,
+    case: 'none',
+  },
+  argTypes: {
+    viewer: { control: 'select', options: Object.values(Viewer) },
+    page: { control: 'select', options: directionPageIds },
+    pin: { control: 'select', options: pinStyles },
+    case: {
+      control: 'select',
+      options: ['none', ...allCases.map((useCase) => useCase.id)],
+      description:
+        'Open a use case by id (Squad Page, 2. Use cases); it overrides viewer and page.',
+    },
+  },
+  render: ({ viewer, page, pin, case: caseId }) => {
+    const useCase = caseById[caseId];
+
+    return (
+      <>
+        <KitStyles />
+        <WorkspaceStyles />
+        {useCase ? (
+          <DirectionShell
+            key={useCase.id}
+            viewer={useCase.viewer}
+            initialPage={useCase.page ?? 'home'}
+            source={useCase.source}
+            empty={useCase.empty}
+            isPrivate={useCase.isPrivate}
+            config={useCase.config}
+            pinStyle={pin}
+            fluid
+          />
+        ) : (
+          <DirectionShell
+            key={`${viewer}-${page}-${pin}`}
+            viewer={viewer}
+            initialPage={page}
+            pinStyle={pin}
+            fluid
+          />
+        )}
+      </>
+    );
+  },
+};
+
+/**
+ * The page on a phone. Storybook's canvas is desktop-wide, so the
+ * Playground always shows the laptop layout; this renders it in a real
+ * 375px frame, whose breakpoints are the phone's.
+ */
+export const Mobile: StoryObj<{
+  viewer: Viewer;
+  page: string;
+}> = {
+  args: {
+    viewer: Viewer.Member,
+    page: 'home',
+  },
+  argTypes: {
+    viewer: { control: 'select', options: Object.values(Viewer) },
+    page: { control: 'select', options: directionPageIds },
+  },
+  render: ({ viewer, page }) => (
+    <div className="flex min-h-screen justify-center bg-background-subtle p-8">
+      <KitStyles />
+      <WorkspaceStyles />
+      <ViewportFrame width={375} height={812} label="Phone, 375 × 812">
+        <DirectionShell
+          key={`${viewer}-${page}`}
+          viewer={viewer}
+          initialPage={page}
+          fluid
+        />
+      </ViewportFrame>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/NoSidebarResearch.stories.tsx b/packages/storybook/stories/squad-page/NoSidebarResearch.stories.tsx
new file mode 100644
index 00000000000..ab4f5a1ff0e
--- /dev/null
+++ b/packages/storybook/stories/squad-page/NoSidebarResearch.stories.tsx
@@ -0,0 +1,2061 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import classNames from 'classnames';
+import ExtensionProviders from '../extension/_providers';
+import { KitStyles } from './kit';
+
+const meta: Meta = {
+  title: 'Squad Page/4. Research',
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <ExtensionProviders>
+        <Story />
+      </ExtensionProviders>
+    ),
+  ],
+};
+
+export default meta;
+
+// Desk research behind the no-sidebar direction: what the usability
+// literature says about replacing a pages column with in-page structure,
+// what thirty products do on a profile, community or organization page
+// that never had a sidebar, and ten ways to seat the sidebar's load in the
+// page, scored against that evidence. Ends with the composite written out
+// region by region.
+
+/* ------------------------------------------------------------ furniture */
+
+const Page = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+    <KitStyles />
+    <div className="mx-auto flex w-full max-w-[92rem] flex-col gap-16">
+      {children}
+    </div>
+  </div>
+);
+
+const Eyebrow = ({ children }: { children: ReactNode }): ReactElement => (
+  <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+    {children}
+  </span>
+);
+
+const Prose = ({
+  children,
+  wide,
+}: {
+  children: ReactNode;
+  wide?: boolean;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex flex-col gap-3 text-text-secondary typo-body',
+      wide ? 'max-w-[100ch]' : 'max-w-[76ch]',
+    )}
+  >
+    {children}
+  </div>
+);
+
+const Section = ({
+  eyebrow,
+  title,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-6">
+    <div className="flex flex-col gap-2">
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="font-bold typo-title1">{title}</h2>
+    </div>
+    {children}
+  </section>
+);
+
+const Table = ({
+  head,
+  rows,
+  minWidth = '60rem',
+}: {
+  head: string[];
+  rows: ReactNode[][];
+  minWidth?: string;
+}): ReactElement => (
+  <div className="overflow-x-auto rounded-16 border border-border-subtlest-tertiary">
+    <table className="w-full border-collapse text-left" style={{ minWidth }}>
+      <thead>
+        <tr className="bg-surface-float">
+          {head.map((cell) => (
+            <th
+              key={cell}
+              className="px-4 py-3 font-bold text-text-secondary typo-caption1"
+            >
+              {cell}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr
+            // eslint-disable-next-line react/no-array-index-key
+            key={rowIndex}
+            className="border-t border-border-subtlest-tertiary align-top"
+          >
+            {row.map((cell, cellIndex) => (
+              <td
+                // eslint-disable-next-line react/no-array-index-key
+                key={cellIndex}
+                className={classNames(
+                  'px-4 py-3 typo-footnote',
+                  cellIndex === 0
+                    ? 'whitespace-nowrap font-bold text-text-primary'
+                    : 'text-text-tertiary',
+                )}
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+/* -------------------------------------------------------------- sources */
+
+const sources = {
+  nngHamburger: {
+    label: 'NN/g, Hamburger menus and hidden navigation hurt UX metrics',
+    href: 'https://www.nngroup.com/articles/hamburger-menus/',
+  },
+  nngVertical: {
+    label: 'NN/g, Left-side vertical navigation on desktop',
+    href: 'https://www.nngroup.com/articles/vertical-nav/',
+  },
+  nngLocal: {
+    label: 'NN/g, Local navigation',
+    href: 'https://www.nngroup.com/articles/local-navigation/',
+  },
+  nngUniversal: {
+    label: 'NN/g, Universal navigation: connecting subsites',
+    href: 'https://www.nngroup.com/articles/universal-navigation/',
+  },
+  nngTabs: {
+    label: 'NN/g, Tabs, used right',
+    href: 'https://www.nngroup.com/articles/tabs-used-right/',
+  },
+  nngUtility: {
+    label: 'NN/g, Utility navigation',
+    href: 'https://www.nngroup.com/articles/utility-navigation/',
+  },
+  nngSticky: {
+    label: 'NN/g, Sticky headers: 5 ways to make them better',
+    href: 'https://www.nngroup.com/articles/sticky-headers/',
+  },
+  nngScroll: {
+    label: 'NN/g, Scrolling and attention',
+    href: 'https://www.nngroup.com/articles/scrolling-and-attention/',
+  },
+  nngRail: {
+    label: 'NN/g, Fight against right-rail blindness',
+    href: 'https://www.nngroup.com/articles/fight-right-rail-blindness/',
+  },
+  nngCategory: {
+    label: 'NN/g, Traditional and hybrid category pages',
+    href: 'https://www.nngroup.com/articles/category-pages/',
+  },
+  nngDisclosure: {
+    label: 'NN/g, Progressive disclosure',
+    href: 'https://www.nngroup.com/articles/progressive-disclosure/',
+  },
+  nngInPage: {
+    label: 'NN/g, In-page links for content navigation',
+    href: 'https://www.nngroup.com/articles/in-page-links-content-navigation/',
+  },
+  nngAccordions: {
+    label: 'NN/g, Accordions on desktop',
+    href: 'https://www.nngroup.com/articles/accordions-on-desktop/',
+  },
+  nngInfinite: {
+    label: 'NN/g, Infinite scrolling: when to use it',
+    href: 'https://www.nngroup.com/articles/infinite-scrolling-tips/',
+  },
+  nngScent: {
+    label: 'NN/g, Information scent',
+    href: 'https://www.nngroup.com/articles/information-scent/',
+  },
+  nngSubnav: {
+    label: 'NN/g, Mobile subnavigation',
+    href: 'https://www.nngroup.com/articles/mobile-subnavigation/',
+  },
+  nngCarousel: {
+    label: 'NN/g, Carousel usability',
+    href: 'https://www.nngroup.com/articles/designing-effective-carousels/',
+  },
+  smashingSticky: {
+    label: 'Smashing, Sticky menus are quicker to navigate',
+    href: 'https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/',
+  },
+  stickyCta: {
+    label: 'Online Dialogue, A sticky CTA: guaranteed uplift?',
+    href: 'https://www.onlinedialogue.nl/en/blogs/sticky-cta-guaranteed-conversion-uplift/',
+  },
+  priorityPlus: {
+    label: 'Brad Frost, Revisiting the Priority+ pattern',
+    href: 'https://bradfrost.com/blog/post/revisiting-the-priority-pattern/',
+  },
+  baymardToolbar: {
+    label: 'Baymard, Be careful with horizontal filtering toolbars',
+    href: 'https://baymard.com/blog/horizontal-filtering-sorting-design',
+  },
+  baymardFilters: {
+    label: 'Baymard, Consider promoting important filters',
+    href: 'https://baymard.com/blog/promoting-product-filters',
+  },
+  baymardCarousel: {
+    label: 'Baymard, 10 UX requirements for homepage carousels',
+    href: 'https://baymard.com/blog/homepage-carousel',
+  },
+  baymardViewAll: {
+    label: 'Baymard, View all at each level',
+    href: 'https://baymard.com/blog/mobile-main-nav-view-all',
+  },
+  baymardInline: {
+    label: 'Baymard, Avoid inline scroll areas',
+    href: 'https://baymard.com/blog/inline-scroll-areas',
+  },
+  primerNav: {
+    label: 'Primer, UnderlineNav guidelines',
+    href: 'https://primer.style/product/components/underline-nav/guidelines/',
+  },
+  primerPatterns: {
+    label: 'Primer, Navigation pattern',
+    href: 'https://primer.style/product/ui-patterns/navigation/',
+  },
+  primerHeader: {
+    label: 'Primer, PageHeader guidelines',
+    href: 'https://primer.style/product/components/page-header/guidelines/',
+  },
+  atlassianTabs: {
+    label: 'Atlassian Design System, Tabs',
+    href: 'https://atlassian.design/components/tabs/usage',
+  },
+  carbonTabs: {
+    label: 'IBM Carbon, Tabs',
+    href: 'https://carbondesignsystem.com/components/tabs/usage/',
+  },
+  higTabs: {
+    label: 'Apple HIG, Tab bars',
+    href: 'https://developer.apple.com/design/human-interface-guidelines/tab-bars',
+  },
+  m2Tabs: {
+    label: 'Material, Tabs (scrollable)',
+    href: 'https://m2.material.io/components/tabs',
+  },
+  govukTabs: {
+    label: 'GOV.UK Design System, Tabs',
+    href: 'https://design-system.service.gov.uk/components/tabs/',
+  },
+  govukSecondary: {
+    label: 'GOV.UK prototype, Secondary navigation',
+    href: 'https://govuk-prototype-components.x-govuk.org/secondary-navigation',
+  },
+  polarisPage: {
+    label: 'Shopify Polaris, Page',
+    href: 'https://polaris.shopify.com/components/layout-and-structure/page',
+  },
+  redditWidgets: {
+    label: 'Reddit help, Sidebar widgets',
+    href: 'https://support.reddithelp.com/hc/en-us/articles/15484474697748-Sidebar-Widgets',
+  },
+  redditPostCheck: {
+    label: 'TechCrunch, Reddit adds Post Check',
+    href: 'https://techcrunch.com/2025/03/06/reddit-adds-new-tools-to-help-users-contribute-and-connect-across-its-platform',
+  },
+  redditLoggedOut: {
+    label: 'TechCrunch, Reddit redesign for logged-out users',
+    href: 'https://techcrunch.com/2023/08/01/reddit-updates-its-site-design-for-logged-out-users/',
+  },
+  githubOrg: {
+    label: 'GitHub docs, Customizing your organization profile',
+    href: 'https://docs.github.com/en/organizations/collaborating-with-groups-in-organizations/customizing-your-organizations-profile',
+  },
+  githubVerified: {
+    label: 'GitHub docs, Verifying a domain',
+    href: 'https://docs.github.com/en/organizations/managing-organization-settings/verifying-or-approving-a-domain-for-your-organization',
+  },
+  hfCards: {
+    label: 'Hugging Face docs, Organization cards',
+    href: 'https://huggingface.co/docs/hub/organizations-cards',
+  },
+  patreonPage: {
+    label: 'Patreon, Introducing your updated creator page',
+    href: 'https://www.patreon.com/posts/introducing-your-137122636',
+  },
+  youtubeLayout: {
+    label: 'YouTube help, Customize channel layout',
+    href: 'https://support.google.com/youtube/answer/3219384?hl=en',
+  },
+  youtubeTabs: {
+    label: 'TechCrunch, YouTube gives Shorts and Live their own tabs',
+    href: 'https://techcrunch.com/2022/10/27/youtube-redesign-gives-long-form-videos-shorts-and-live-videos-their-own-tabs-on-channel-pages/',
+  },
+  igHighlights: {
+    label: 'PiunikaWeb, Instagram moves Highlights to a tab',
+    href: 'https://piunikaweb.com/2025/09/12/instagram-highlights-moved-to-main-grid/',
+  },
+  igDashboard: {
+    label: 'Inrō, Instagram professional dashboard',
+    href: 'https://www.inro.social/blog/instagram-dashboard-professional-dashboard-guide',
+  },
+  xOrgs: {
+    label: 'X help, Premium Organizations and affiliates',
+    href: 'https://help.x.com/en/using-x/premium-organizations',
+  },
+  x2026: {
+    label: 'Roboin, X profile tabs redesign (July 2026)',
+    href: 'https://roboin.io/article/en/2026/07/17/why-reposts-and-replies-are-not-showing-on-x/',
+  },
+  bskyVerify: {
+    label: 'Bluesky, A new form of verification',
+    href: 'https://bsky.social/about/blog/04-21-2025-verification',
+  },
+  linkedinAdmin: {
+    label: 'LinkedIn help, Page admin view',
+    href: 'https://www.linkedin.com/help/linkedin/answer/a548316',
+  },
+  phRedesign: {
+    label: 'Product Hunt forum, Thoughts on the product hub redesign',
+    href: 'https://www.producthunt.com/p/producthunt/thoughts-on-the-new-product-hub-redesign',
+  },
+  ksRewards: {
+    label: 'Kickstarter, Introducing the Rewards tab',
+    href: 'https://updates.kickstarter.com/introducing-the-new-kickstarter-rewards-tab-a-user-friendly-solution-for-backers-to-explore-project-rewards-and-add-ons/',
+  },
+  skoolTabs: {
+    label: 'Skool, Show or hide tabs',
+    href: 'https://www.skool.com/skool-monetization-strategies-2218/how-to-show-or-hide-tabs-in-your-skool-community-simplify-your-layout-in-60-seconds',
+  },
+  whopApp: {
+    label: 'Whop iOS release notes, tabbed company page',
+    href: 'https://apps.apple.com/us/app/whop/id1600181492',
+  },
+  twitchPanels: {
+    label: 'Twitch help, Info panels',
+    href: 'https://help.twitch.tv/s/article/how-to-edit-info-panels',
+  },
+  twitchRedesign: {
+    label: 'Engadget, Twitch channel page redesign',
+    href: 'https://www.engadget.com/twitch-channel-page-redesign-170032083.html',
+  },
+  discordGuide: {
+    label: 'Discord help, Server Guide',
+    href: 'https://support.discord.com/hc/en-us/articles/13497665141655-Server-Guide-FAQ',
+  },
+  discordMobile: {
+    label: 'Engadget, Discord mobile redesign',
+    href: 'https://www.engadget.com/discord-overhauls-its-mobile-app-with-new-tabs-messaging-features-and-more-170035917.html',
+  },
+  steamHub: {
+    label: 'Steamworks, Community hubs',
+    href: 'https://partner.steamgames.com/doc/features/community',
+  },
+  wellfound: {
+    label: 'Wellfound help, Edit my company profile',
+    href: 'https://help.wellfound.com/article/711-how-do-i-edit-my-company-profile',
+  },
+  soCollectives: {
+    label: 'Stack Overflow blog, A design deep dive into Collectives',
+    href: 'https://stackoverflow.blog/2021/07/26/a-design-deep-dive-into-how-we-created-collectives/',
+  },
+  devto: {
+    label: 'Forem docs, Organization pages',
+    href: 'https://admin.forem.com/docs/managing-your-community/organization-pages',
+  },
+  bento: {
+    label: 'Rajesh Nair, Bento grids critique (2026)',
+    href: 'https://rajeshrnair.com/blog/design/ui-ux/ui-design-trends-2026-bento-grids-glassmorphism.html',
+  },
+} as const;
+
+type SourceKey = keyof typeof sources;
+
+const Cite = ({ k, short }: { k: SourceKey; short?: string }): ReactElement => (
+  <a
+    href={sources[k].href}
+    target="_blank"
+    rel="noreferrer"
+    className="text-text-link hover:underline"
+  >
+    {short ?? sources[k].label}
+  </a>
+);
+
+/* ------------------------------------------------------------- wireframe */
+
+type Tone = 'chrome' | 'nav' | 'cta' | 'feed' | 'info' | 'manage' | 'muted';
+
+interface Block {
+  l: string;
+  s?: number;
+  h?: number;
+  t?: Tone;
+  stack?: Block[];
+}
+
+const tones: Record<Tone, string> = {
+  chrome: 'bg-surface-float text-text-secondary',
+  nav: 'bg-accent-cabbage-flat font-bold text-accent-cabbage-default',
+  cta: 'bg-text-primary font-bold text-background-default',
+  feed: 'border border-border-subtlest-tertiary text-text-quaternary',
+  info: 'bg-accent-bun-flat text-accent-bun-default',
+  manage:
+    'border border-dashed border-accent-cheese-default text-accent-cheese-default',
+  muted: 'bg-surface-hover text-text-quaternary',
+};
+
+const toneLabel: Record<Tone, string> = {
+  chrome: 'Identity and utilities',
+  nav: 'Navigation',
+  cta: 'Primary action',
+  feed: 'Content',
+  info: 'Support (rules, team, links)',
+  manage: 'Team only',
+  muted: 'daily.dev chrome',
+};
+
+const BlockView = ({ block }: { block: Block }): ReactElement => (
+  <div
+    style={{
+      gridColumn: `span ${block.s ?? 12}`,
+      minHeight: `${block.h ?? 1.5}rem`,
+    }}
+    className={classNames(
+      'flex flex-col rounded-8',
+      block.stack ? 'gap-1' : 'items-center justify-center px-1 text-center',
+      block.stack ? '' : tones[block.t ?? 'feed'],
+      'typo-caption2',
+    )}
+  >
+    {block.stack
+      ? block.stack.map((child, index) => (
+          <div
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            style={{ minHeight: `${child.h ?? 1.5}rem` }}
+            className={classNames(
+              'flex flex-1 items-center justify-center rounded-8 px-1 text-center typo-caption2',
+              tones[child.t ?? 'feed'],
+            )}
+          >
+            {child.l}
+          </div>
+        ))
+      : block.l}
+  </div>
+);
+
+const Frame = ({
+  rows,
+  className,
+  caption,
+}: {
+  rows: Block[][];
+  className?: string;
+  caption: string;
+}): ReactElement => (
+  <div className={classNames('flex flex-col gap-2', className)}>
+    <div className="flex flex-col gap-1 rounded-12 border border-border-subtlest-tertiary bg-background-default p-1.5">
+      {rows.map((row, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={index} className="grid grid-cols-12 gap-1">
+          {row.map((block, blockIndex) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <BlockView key={blockIndex} block={block} />
+          ))}
+        </div>
+      ))}
+    </div>
+    <span className="text-center text-text-quaternary typo-caption2">
+      {caption}
+    </span>
+  </div>
+);
+
+const chrome: Block[] = [
+  { l: 'daily.dev header and rail', t: 'muted', h: 1.25 },
+];
+const banner: Block[] = [{ l: 'Banner', t: 'chrome', h: 2 }];
+const identity = (cta = 'Follow'): Block[] => [
+  {
+    l: 'Avatar · CodeRabbit ✓ · coderabbit.ai · Developer tools · San Francisco · Since 2023 · 6.1k followers',
+    s: 8,
+    t: 'chrome',
+    h: 2.25,
+  },
+  { l: cta, s: 2, t: 'cta', h: 2.25 },
+  { l: 'Bell · Share · More', s: 2, t: 'chrome', h: 2.25 },
+];
+const mobileIdentity = (cta = 'Follow'): Block[][] => [
+  [{ l: 'Banner · avatar · CodeRabbit ✓ · meta', t: 'chrome', h: 2.5 }],
+  [
+    { l: cta, s: 8, t: 'cta' },
+    { l: 'More', s: 4, t: 'chrome' },
+  ],
+];
+const feed = (h = 6, s = 8): Block => ({ l: 'Posts feed', s, h, t: 'feed' });
+const supportColumn = (extra: Block[] = []): Block => ({
+  l: '',
+  s: 4,
+  stack: [
+    { l: 'Official company page', t: 'info' },
+    { l: 'Rules', t: 'info' },
+    { l: 'Team 8', t: 'info' },
+    { l: 'Links', t: 'info' },
+    ...extra,
+  ],
+});
+
+/* ------------------------------------------------------------ variations */
+
+interface Variation {
+  id: string;
+  title: string;
+  after: string;
+  carries: string;
+  strengths: string;
+  costs: string;
+  evidence: ReactNode;
+  bestWhen: string;
+  desktop: Block[][];
+  desktopCaption: string;
+  mobile: Block[][];
+  mobileCaption: string;
+}
+
+const variations: Variation[] = [
+  {
+    id: 'tabs',
+    title: 'Profile tabs',
+    after: 'X profile, GitHub organization, Hugging Face organization',
+    carries:
+      'One underline row under the identity block: Posts, Releases, Products, Discussions, Polls. Rules, Team and Links are cards beside the feed on Posts only. Followers opens from the count. Manage is a menu on the header.',
+    strengths:
+      'The pattern every visitor already knows. Areas are routed pages with their own URL, one preselected, which is what secondary navigation is supposed to be. The feed dominates Home.',
+    costs:
+      'The row holds five comfortably and six at most. Rules and FAQ never get a tab, so on mobile they drop below the feed where an infinite list can bury them.',
+    evidence: (
+      <>
+        <Cite k="nngTabs" short="NN/g on tabs" /> (one row, one or two word
+        labels, high-use tab first);{' '}
+        <Cite k="primerNav" short="Primer UnderlineNav" /> (every tab a URL,
+        counts allowed); <Cite k="githubOrg" short="GitHub org profile" />.
+      </>
+    ),
+    bestWhen: 'The page count stays at five or six and Home must be the feed.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        { l: 'Posts', s: 2, t: 'nav' },
+        { l: 'Releases', s: 2, t: 'nav' },
+        { l: 'Products', s: 3, t: 'nav' },
+        { l: 'Discussions', s: 3, t: 'nav' },
+        { l: 'Polls', s: 2, t: 'nav' },
+      ],
+      [feed(), supportColumn()],
+    ],
+    desktopCaption: 'Desktop, Posts tab',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: 'Posts · Releases · Products · Discu…', t: 'nav' }],
+      [feed(4, 12)],
+      [{ l: 'Rules · Team · Links below the feed', t: 'info' }],
+    ],
+    mobileCaption: 'Phone, row scrolls',
+  },
+  {
+    id: 'counted',
+    title: 'Counted tabs, Priority+',
+    after:
+      'Product Hunt product hub, Kickstarter project, GitHub Settings and Teams tabs, Primer overflow',
+    carries:
+      'The row carries everything the sidebar had: Posts, Releases 14, Products, Discussions 38, Polls, About, and Followers 6.1k. What does not fit the width folds right to left into a worded More. Admins get Manage 3 appended at the end of the same row, visible only to them.',
+    strengths:
+      'Nothing is hidden that could be shown, and the hidden remainder is one labelled click away, which tests as well as fully visible navigation. Counts give every tab scent. It grows without a redesign: a new page is a new tab that lands in More on narrow screens.',
+    costs:
+      'More is overlooked by some people the way "All filters" is, so only low-traffic pages may live there. The admin tab sits in the visitor row, which must be styled as a different kind of thing.',
+    evidence: (
+      <>
+        <Cite k="nngHamburger" short="NN/g hidden navigation study" /> (combo
+        navigation matches visible: 50% vs 48% usage on desktop);{' '}
+        <Cite k="priorityPlus" short="Priority+ pattern" />;{' '}
+        <Cite k="baymardToolbar" short="Baymard on overlooked More buttons" />;{' '}
+        <Cite k="ksRewards" short="Kickstarter Rewards tab" /> (tabs with counts
+        added because people jumped back and forth);{' '}
+        <Cite k="githubOrg" short="GitHub role-gated tabs" />.
+      </>
+    ),
+    bestWhen:
+      'The page will grow past six areas and the team wants Manage one click from the public page.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        { l: 'Posts', s: 1, t: 'nav' },
+        { l: 'Releases 14', s: 2, t: 'nav' },
+        { l: 'Products', s: 2, t: 'nav' },
+        { l: 'Discussions 38', s: 2, t: 'nav' },
+        { l: 'Polls', s: 1, t: 'nav' },
+        { l: 'About', s: 1, t: 'nav' },
+        { l: 'More ▾', s: 1, t: 'nav' },
+        { l: 'Manage 3', s: 2, t: 'manage' },
+      ],
+      [feed(), supportColumn()],
+    ],
+    desktopCaption: 'Desktop, admin view; More holds Followers',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [
+        { l: 'Posts · Releases 14 · Produ…', s: 9, t: 'nav' },
+        { l: 'More', s: 3, t: 'nav' },
+      ],
+      [feed(4, 12)],
+      [{ l: 'Cards fold into About', t: 'info' }],
+    ],
+    mobileCaption: 'Phone, three visible plus More',
+  },
+  {
+    id: 'condensing',
+    title: 'Condensing header',
+    after: 'YouTube channel, LinkedIn Page on mobile, X, Instagram',
+    carries:
+      'Any tab variant, plus a scroll rule: when the tab row reaches the top it sticks, and the hero collapses into it. Avatar, name, seal, Follow and the row become one 48px bar. The bell, share and More stay in the bar as icons.',
+    strengths:
+      'The one thing the sidebar did that a header cannot, being there at every scroll depth, comes back without spending a column. Sticky menus tested 22% faster and were preferred by every participant who had a preference. Follow is always in reach without a second sticky bar.',
+    costs:
+      'Every sticky pixel is paid on every page. Keep the bar to one row of readable text and tappable targets, opaque, and animate the collapse at scroll speed. On phones prefer a bar that hides on scroll-down and returns on scroll-up.',
+    evidence: (
+      <>
+        <Cite k="nngSticky" short="NN/g sticky headers" />;{' '}
+        <Cite k="smashingSticky" short="Smashing sticky menu study" />;{' '}
+        <Cite k="stickyCta" short="Online Dialogue sticky CTA tests" /> (a
+        second sticky CTA bar on listing pages won 0 of the tests);{' '}
+        <Cite k="youtubeLayout" short="YouTube channel layout" />.
+      </>
+    ),
+    bestWhen: 'Always. This is a behaviour to add to whichever variant wins.',
+    desktop: [
+      chrome,
+      [
+        { l: 'Avatar · CodeRabbit ✓', s: 3, t: 'chrome', h: 1.75 },
+        {
+          l: 'Posts · Releases 14 · Products · Discussions 38 · Polls · About',
+          s: 6,
+          t: 'nav',
+          h: 1.75,
+        },
+        { l: 'Follow', s: 2, t: 'cta', h: 1.75 },
+        { l: 'Bell · ⋯', s: 1, t: 'chrome', h: 1.75 },
+      ],
+      [feed(7), supportColumn()],
+    ],
+    desktopCaption: 'Desktop, scrolled: hero collapsed into the sticky bar',
+    mobile: [
+      chrome,
+      [
+        { l: 'CodeRabbit ✓', s: 7, t: 'chrome' },
+        { l: 'Follow', s: 5, t: 'cta' },
+      ],
+      [{ l: 'Posts · Releases · Products…', t: 'nav' }],
+      [feed(6, 12)],
+    ],
+    mobileCaption: 'Phone, scrolled: returns on scroll-up',
+  },
+  {
+    id: 'home',
+    title: 'Curated Home, raw Posts',
+    after: 'Patreon Home vs Posts, YouTube channel Home, Steam hub All tab',
+    carries:
+      'Home is a stack of owner-ordered shelves: pinned highlights, the latest release, the products, the poll of the week, the latest posts, each with "See all releases 14" and a clipped last card. Posts is the raw feed next to it. Releases, Products, Discussions and Polls keep their tabs.',
+    strengths:
+      'A fed page always looks alive. Everything the company offers is visible in one scroll, which is the strongest sell to a prospect. Patreon made this its default for everyone, members included, and YouTube gives Home twelve sections.',
+    costs:
+      'The feed no longer dominates Home; it starts one tab away. Shelves must never be the only route, most people never see past the first card, and each shelf needs a literal See all with its count. Twice the surface to keep tidy when the squad is young.',
+    evidence: (
+      <>
+        <Cite k="patreonPage" short="Patreon updated creator page" /> (Home is
+        what everyone sees first, Posts is chronological);{' '}
+        <Cite k="youtubeLayout" short="YouTube Home sections" />;{' '}
+        <Cite k="baymardCarousel" short="Baymard on carousels" />;{' '}
+        <Cite k="baymardViewAll" short="Baymard on explicit View all" />;{' '}
+        <Cite k="nngCarousel" short="NN/g carousel usability" /> (five frames,
+        position shown, no autoplay on mobile).
+      </>
+    ),
+    bestWhen:
+      'The page is a showcase first and a community second, and the feed delivers steadily enough to fill the shelves.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        { l: 'Home', s: 2, t: 'nav' },
+        { l: 'Posts', s: 2, t: 'nav' },
+        { l: 'Releases', s: 2, t: 'nav' },
+        { l: 'Products', s: 2, t: 'nav' },
+        { l: 'Discussions', s: 2, t: 'nav' },
+        { l: 'Polls', s: 2, t: 'nav' },
+      ],
+      [
+        {
+          l: '',
+          s: 8,
+          stack: [
+            { l: 'Pinned: CodeRabbit Triage · Latest release', t: 'feed' },
+            { l: 'Products shelf, See all 6 →', t: 'feed' },
+            { l: 'Poll of the week', t: 'feed' },
+            { l: 'Latest posts, See all →', t: 'feed', h: 2.5 },
+          ],
+        },
+        supportColumn(),
+      ],
+    ],
+    desktopCaption: 'Desktop, Home tab',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: 'Home · Posts · Releases · Prod…', t: 'nav' }],
+      [{ l: 'Pinned · latest release', t: 'feed' }],
+      [{ l: 'Products shelf ›', t: 'feed' }],
+      [{ l: 'Poll', t: 'feed' }],
+      [{ l: 'Latest posts', t: 'feed', h: 2.5 }],
+    ],
+    mobileCaption: 'Phone, shelves stack',
+  },
+  {
+    id: 'chips',
+    title: 'One feed, chips',
+    after: 'Threads and Bluesky feed switches, Discord forum tags',
+    carries:
+      'There is one feed. Chips above it filter by kind: All, Posts, Releases, Polls, Discussions. Products, Rules and FAQ become widgets beside the feed with See all, and a page opened from a widget slides over the feed with a back button.',
+    strengths:
+      'The most one-page of all. The feed dominates, the chips are the filter people look for first on any list, and on a phone the chip row is native.',
+    costs:
+      'Chips are for filtering one list, not for moving between areas, and past six or eight kinds the toolbar stops scaling. Releases lose their log shape (months, kinds) unless the chip swaps the whole body, and a page opened from a widget is a modal in disguise. Products can never be a chip.',
+    evidence: (
+      <>
+        <Cite k="baymardFilters" short="Baymard on promoted filters" /> (two or
+        three chips, and the filter also stays in its regular place);{' '}
+        <Cite k="baymardToolbar" short="Baymard on horizontal toolbars" />;{' '}
+        <Cite k="atlassianTabs" short="Atlassian tabs" /> (tabs group views of
+        one thing, not areas).
+      </>
+    ),
+    bestWhen:
+      'The squad is mostly posts of different kinds and has no Products or documents worth a page.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        { l: 'All', s: 1, t: 'nav' },
+        { l: 'Posts', s: 2, t: 'nav' },
+        { l: 'Releases', s: 2, t: 'nav' },
+        { l: 'Polls', s: 2, t: 'nav' },
+        { l: 'Discussions', s: 2, t: 'nav' },
+        { l: 'Latest ▾', s: 3, t: 'chrome' },
+      ],
+      [
+        feed(),
+        {
+          l: '',
+          s: 4,
+          stack: [
+            { l: 'Products, See all 6', t: 'info' },
+            { l: 'Rules · FAQ', t: 'info' },
+            { l: 'Team 8', t: 'info' },
+            { l: 'Links', t: 'info' },
+          ],
+        },
+      ],
+    ],
+    desktopCaption: 'Desktop, All',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: 'All · Posts · Releases · Polls ·…', t: 'nav' }],
+      [feed(5, 12)],
+      [{ l: 'Products · Rules · Team · Links', t: 'info' }],
+    ],
+    mobileCaption: 'Phone, chips scroll',
+  },
+  {
+    id: 'about',
+    title: 'About tab',
+    after:
+      'Twitch About panels, LinkedIn Page About, Reddit About on mobile, Skool and Whop About tabs',
+    carries:
+      'Everything that is not a stream of posts gets one tab: About. It holds the description, company facts, links, Rules and FAQ as accordions, the team with roles, and a followers preview with See all. Posts, Releases, Products, Discussions and Polls keep their tabs. The right column disappears entirely.',
+    strengths:
+      'One labelled place for company information, which is what people expect on any organization page. Accordions suit many short independent sections and suit phones. No right rail to be blind to. It is exactly what Reddit, Skool and Whop show on a phone anyway.',
+    costs:
+      'Rules are one click away from the composer instead of beside it. Reddit is the cautionary tale: when rules are not at the point of posting, people do not read them, and Reddit shipped a pre-post rules check to compensate. So the composer must carry a one-line rules link of its own.',
+    evidence: (
+      <>
+        <Cite k="nngAccordions" short="NN/g accordions" />;{' '}
+        <Cite k="twitchPanels" short="Twitch info panels" />;{' '}
+        <Cite k="redditWidgets" short="Reddit sidebar on mobile" />;{' '}
+        <Cite k="redditPostCheck" short="Reddit Post Check" />;{' '}
+        <Cite k="skoolTabs" short="Skool tabs" />;{' '}
+        <Cite k="whopApp" short="Whop tabbed company page" />.
+      </>
+    ),
+    bestWhen:
+      'Mobile parity matters more than a full desktop right column, or as the phone fallback of any variant that has one.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        { l: 'Posts', s: 2, t: 'nav' },
+        { l: 'Releases', s: 2, t: 'nav' },
+        { l: 'Products', s: 2, t: 'nav' },
+        { l: 'Discussions', s: 2, t: 'nav' },
+        { l: 'Polls', s: 2, t: 'nav' },
+        { l: 'About', s: 2, t: 'nav' },
+      ],
+      [
+        {
+          l: '',
+          s: 12,
+          stack: [
+            { l: 'Description · company facts · links row', t: 'info' },
+            { l: 'Rules ▸ (accordion, expand all)', t: 'info' },
+            { l: 'FAQ ▸', t: 'info' },
+            { l: 'Team 8 with roles', t: 'info' },
+            { l: 'Followers 6,120 · See all', t: 'info' },
+          ],
+        },
+      ],
+    ],
+    desktopCaption: 'Desktop, About tab',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: 'Posts · Releases · Products · … About', t: 'nav' }],
+      [{ l: 'Description · links', t: 'info' }],
+      [{ l: 'Rules ▸', t: 'info' }],
+      [{ l: 'FAQ ▸', t: 'info' }],
+      [{ l: 'Team · Followers', t: 'info' }],
+    ],
+    mobileCaption: 'Phone, About tab',
+  },
+  {
+    id: 'rail',
+    title: 'Right rail cards',
+    after:
+      'Reddit community sidebar, Skool About card, GitHub org Overview column',
+    carries:
+      'The center is posts and nothing else. The right column carries a Pages card (Releases 14, Products, Discussions, Polls), an About card with description, counts and Follow, Rules as an accordion, Team, and Links. A page opens in the center with a back button. On a phone the column becomes an About tab.',
+    strengths:
+      'The cleanest center. The column repeats on every page so orientation never changes. Skool puts the join button in this card and Reddit its description, rules and moderators.',
+    costs:
+      'People have trained themselves to skip the right column: in one eyetracking case it took 0.8% of fixations for a quarter of the screen. Anything required, the navigation included, cannot live only there. This is the pages column with a different address, and it is the variant Reddit users could not find rules in on mobile.',
+    evidence: (
+      <>
+        <Cite k="nngRail" short="NN/g right-rail blindness" />;{' '}
+        <Cite k="redditLoggedOut" short="Reddit logged-out redesign" /> (sticky,
+        independently scrolling sidebar);{' '}
+        <Cite k="redditWidgets" short="Reddit widgets on mobile" />;{' '}
+        <Cite k="primerPatterns" short="Primer" /> (sidebars become an index
+        page or a sheet at narrow widths).
+      </>
+    ),
+    bestWhen:
+      'Desktop is the only surface that matters and the feed must be untouched by chrome.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        feed(8),
+        {
+          l: '',
+          s: 4,
+          stack: [
+            {
+              l: 'Pages: Releases 14 · Products · Discussions · Polls',
+              t: 'nav',
+              h: 2,
+            },
+            { l: 'About · 6.1k followers · Follow', t: 'info' },
+            { l: 'Rules ▸', t: 'info' },
+            { l: 'Team 8', t: 'info' },
+            { l: 'Links', t: 'info' },
+          ],
+        },
+      ],
+    ],
+    desktopCaption: 'Desktop, no row at all',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [
+        { l: 'Posts', s: 6, t: 'nav' },
+        { l: 'About', s: 6, t: 'nav' },
+      ],
+      [feed(5, 12)],
+    ],
+    mobileCaption: 'Phone, column becomes About',
+  },
+  {
+    id: 'anchors',
+    title: 'One page, anchors',
+    after:
+      'Crunchbase and Wellfound section navigation, Kickstarter tab row, Slack app page anchors',
+    carries:
+      'Everything on one long page in sections: latest posts, releases, products, the poll, rules, FAQ, team. A sticky "On this page" row (or a right-hand table of contents) scroll-spies the sections. Each list section shows five with Show more and its count. No routed sub-pages.',
+    strengths:
+      'The whole company is one scroll and one URL, the way a company profile on Crunchbase or Wellfound reads. In-page links were used and liked by 9 of 11 participants when they had a specific need, and the table of contents gives a mental model of the page.',
+    costs:
+      'Anchors are for pages of independent chunkable sections, not for a feed: an infinite feed cannot sit above anything. Long pages cost on phones. People ignore in-page links during first exploration, and Discussions or Polls as a section of five is a preview, not the page.',
+    evidence: (
+      <>
+        <Cite k="nngInPage" short="NN/g in-page links" />;{' '}
+        <Cite k="nngInfinite" short="NN/g infinite scrolling" /> (nothing
+        required below an infinite list);{' '}
+        <Cite k="wellfound" short="Wellfound" /> (routed sections with prev and
+        next).
+      </>
+    ),
+    bestWhen:
+      'The page is a profile more than a feed: a young squad, or a company whose releases and products matter more than discussion.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        {
+          l: 'On this page: Posts · Releases 14 · Products 6 · Poll · Rules · FAQ · Team (sticky, scroll-spy)',
+          t: 'nav',
+        },
+      ],
+      [
+        {
+          l: '',
+          s: 9,
+          stack: [
+            { l: 'Latest posts (5) · Show more', t: 'feed', h: 2 },
+            { l: 'Releases (5 of 14) · Show more', t: 'feed', h: 2 },
+            { l: 'Products (6)', t: 'feed' },
+            { l: 'Poll', t: 'feed' },
+            { l: 'Rules · FAQ · Team', t: 'info' },
+          ],
+        },
+        { l: 'Table of contents (sticky)', s: 3, t: 'nav', h: 6 },
+      ],
+    ],
+    desktopCaption: 'Desktop, one URL',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: 'Posts · Releases · Products · Poll ·…', t: 'nav' }],
+      [{ l: 'Latest posts (5)', t: 'feed', h: 2 }],
+      [{ l: 'Releases (5 of 14)', t: 'feed', h: 2 }],
+      [{ l: 'Products · Poll · Rules…', t: 'feed', h: 2 }],
+    ],
+    mobileCaption: 'Phone, one long scroll',
+  },
+  {
+    id: 'highlights',
+    title: 'Highlights strip',
+    after:
+      'Instagram highlights, Whop apps row on mobile, Discord Server Guide resources',
+    carries:
+      'A strip of round buttons under the stats: every page and every link, one glyph and a short label each, external ones marked. The center is posts until a highlight is picked; the strip stays and marks the active one.',
+    strengths:
+      'The most visual and the most phone-native, since the strip scrolls. External links get equal billing with pages, which suits a company whose docs and GitHub matter as much as its posts.',
+    costs:
+      'A strip of twelve glyphs asks the visitor to read icons, and labels are short by force. Instagram just moved its own highlights ring into a tab, and its users predicted far less engagement for anything not on the ring. Pages and links mixed in one strip is the "never mix navigation kinds" rule broken on purpose.',
+    evidence: (
+      <>
+        <Cite k="igHighlights" short="Instagram Highlights moved to a tab" />;{' '}
+        <Cite k="nngScent" short="NN/g information scent" /> (labels, not icons,
+        carry scent); <Cite k="discordGuide" short="Discord Server Guide" />{' '}
+        (resources as clean pages off the channel list).
+      </>
+    ),
+    bestWhen:
+      'A mobile-first squad with few pages and many links, or as a links row only, under the bio.',
+    desktop: [
+      chrome,
+      banner,
+      identity(),
+      [
+        {
+          l: '◯ Releases  ◯ Products  ◯ Discussions  ◯ Polls  ◯ Rules  ◯ FAQ  ◯ Docs ↗  ◯ GitHub ↗  ◯ Discord ↗  ◯ X ↗',
+          t: 'nav',
+          h: 2.25,
+        },
+      ],
+      [
+        feed(),
+        {
+          l: '',
+          s: 4,
+          stack: [
+            { l: 'Official company page', t: 'info' },
+            { l: 'Team 8', t: 'info' },
+          ],
+        },
+      ],
+    ],
+    desktopCaption: 'Desktop, strip under the stats',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [{ l: '◯ ◯ ◯ ◯ ◯ ◯ ◯ →', t: 'nav', h: 2 }],
+      [feed(5, 12)],
+    ],
+    mobileCaption: 'Phone, strip scrolls',
+  },
+  {
+    id: 'sheet',
+    title: 'Pages sheet',
+    after: 'Discord mobile server drawer, Whop mobile, Primer bottom sheet',
+    carries:
+      'The sidebar becomes a sheet. A "Pages" button beside Follow opens it over the feed with every page, document, link and the Manage section, exactly as the column was. The page itself is header and feed, full width.',
+    strengths:
+      'Nothing is redesigned: the sidebar is kept and hidden. The feed gets the whole width. This is what every sidebar product does on a phone already.',
+    costs:
+      'Hidden navigation is the best-measured failure in this list: 27% usage against 48% for visible on desktop, tasks 39% slower, discoverability down more than a fifth, and people open it later in the session. It is the control the other nine are measured against, not a candidate.',
+    evidence: (
+      <>
+        <Cite k="nngHamburger" short="NN/g hidden navigation study" />;{' '}
+        <Cite k="discordMobile" short="Discord mobile redesign" /> (kept the
+        server column because people belong to many servers, and still drew
+        backlash); <Cite k="nngSubnav" short="NN/g mobile subnavigation" />{' '}
+        (drill-in menus disorient and collide with Back).
+      </>
+    ),
+    bestWhen: 'Never on desktop. On a phone, only for the Manage section.',
+    desktop: [
+      chrome,
+      banner,
+      [
+        { l: 'Avatar · CodeRabbit ✓ · meta', s: 6, t: 'chrome', h: 2.25 },
+        { l: '☰ Pages', s: 2, t: 'nav', h: 2.25 },
+        { l: 'Follow', s: 2, t: 'cta', h: 2.25 },
+        { l: 'Bell · ⋯', s: 2, t: 'chrome', h: 2.25 },
+      ],
+      [
+        {
+          l: 'Sheet: Home · Releases · Products · Discussions · Polls · Rules · FAQ · Links · Manage',
+          s: 4,
+          t: 'nav',
+          h: 7,
+        },
+        { l: 'Posts feed (dimmed)', s: 8, t: 'muted', h: 7 },
+      ],
+    ],
+    desktopCaption: 'Desktop, sheet open',
+    mobile: [
+      chrome,
+      ...mobileIdentity(),
+      [feed(3, 12)],
+      [{ l: 'Bottom sheet: pages…', t: 'nav', h: 3 }],
+    ],
+    mobileCaption: 'Phone, bottom sheet',
+  },
+];
+
+/* --------------------------------------------------------------- tables */
+
+const principles: { title: string; body: ReactNode }[] = [
+  {
+    title: 'Visible beats hidden, and combo equals visible.',
+    body: (
+      <>
+        In NN/g&apos;s study of 179 people on six live sites, hidden navigation
+        was used in 27% of desktop tasks against 48% for visible, with tasks 39%
+        slower and content discoverability down more than 20%. A row that shows
+        what fits and folds the rest into a labelled overflow scored the same as
+        fully visible. <Cite k="nngHamburger" />
+      </>
+    ),
+  },
+  {
+    title:
+      'Horizontal local navigation under the header, subordinate to daily.dev.',
+    body: (
+      <>
+        A company page is a subsite. Its areas are local navigation and the
+        documented alternative to the inverted-L sidebar is a row directly under
+        the page header, styled below the global chrome and above parent
+        categories. The sidebar&apos;s cost is content-to-chrome: NN/g&apos;s
+        example goes from 5:1 with a column to 12:1 without.{' '}
+        <Cite k="nngLocal" />, <Cite k="nngUniversal" />,{' '}
+        <Cite k="nngVertical" />
+      </>
+    ),
+  },
+  {
+    title: 'Areas are routed pages styled as tabs, not in-page tabs.',
+    body: (
+      <>
+        One URL per area, one preselected, counts allowed as enhancement,
+        overflow into a menu when the row does not fit, at most two levels,
+        never a second stacked row. Shareable URLs also matter because AI
+        crawlers read raw HTML only. <Cite k="primerNav" />,{' '}
+        <Cite k="govukSecondary" />
+      </>
+    ),
+  },
+  {
+    title: 'Five or six visible, the rest behind a word.',
+    body: (
+      <>
+        Carbon caps tabs at six, Apple at three to five on a phone, and Baymard
+        found horizontal toolbars stop scaling past six to eight kinds with the
+        More button overlooked by some. Priority+ is the responsive rule that
+        keeps the row honest at every width. <Cite k="carbonTabs" />,{' '}
+        <Cite k="higTabs" />, <Cite k="baymardToolbar" />,{' '}
+        <Cite k="priorityPlus" />
+      </>
+    ),
+  },
+  {
+    title: 'Everything common to all areas sits above the row.',
+    body: (
+      <>
+        Identity, seal, meta strip, description, counts, Follow, bell, share and
+        links are utility and identity, not areas, so they live in the header.
+        One primary action; the rest secondary and rolled into one menu on small
+        screens. <Cite k="atlassianTabs" />, <Cite k="nngUtility" />,{' '}
+        <Cite k="polarisPage" />, <Cite k="primerHeader" />
+      </>
+    ),
+  },
+  {
+    title: 'The landing view is hybrid: content first, doors above it.',
+    body: (
+      <>
+        A page that is only links to other pages adds a step and annoys. Product
+        Hunt&apos;s hub redesign drew &quot;this page is a dead-end&quot; and
+        &quot;information hierarchy feels too flat&quot;. Render the default
+        area immediately under the row. A bento of eight doors is eight
+        promo-looking boxes with low scent. <Cite k="nngCategory" />,{' '}
+        <Cite k="phRedesign" />, <Cite k="bento" />
+      </>
+    ),
+  },
+  {
+    title: 'Two levels of disclosure, and Manage is its own control.',
+    body: (
+      <>
+        Areas are level one, the Manage sub-areas level two; nothing deeper.
+        GitHub appends Settings and Teams to the same row only for the people
+        who may see them, which keeps management one click from the public page
+        without mixing it into the visitor&apos;s tabs. Nobody surfaces a
+        moderation queue on the public page. <Cite k="nngDisclosure" />,{' '}
+        <Cite k="githubOrg" />, <Cite k="nngTabs" />
+      </>
+    ),
+  },
+  {
+    title: 'Stick only what repeats, shrunk to a bar.',
+    body: (
+      <>
+        Sticky headers raise use of what is in them at the price of viewport on
+        every page. Collapse the hero into avatar, name, Follow and the row;
+        keep it opaque and one line tall; on phones let it return on scroll-up.
+        Never add a second sticky bar: pinned CTAs on listing pages won none of
+        33 A/B tests. <Cite k="nngSticky" />, <Cite k="smashingSticky" />,{' '}
+        <Cite k="stickyCta" />
+      </>
+    ),
+  },
+  {
+    title:
+      'The right column is support, never the only home of anything required.',
+    body: (
+      <>
+        Right-rail blindness is measured: 0.8% of fixations for 25% of the
+        screen in one case. Reddit&apos;s sidebar rules were invisible on phones
+        for years, mods complained, and Reddit&apos;s 2025 answer was a pre-post
+        rules check rather than hoping people read the column. Cards there must
+        look like content and fold under the feed or into About when the width
+        goes. <Cite k="nngRail" />, <Cite k="redditWidgets" />,{' '}
+        <Cite k="redditPostCheck" />, <Cite k="primerPatterns" />
+      </>
+    ),
+  },
+  {
+    title: 'Shelves are shortcuts with a literal See all and a count.',
+    body: (
+      <>
+        Most people never see past the first card of a carousel, so a shelf can
+        preview an area but never be the only route to it. Five visible, a
+        clipped edge card, no autoplay, and &quot;See all releases&quot; as a
+        link rather than a tappable heading. <Cite k="baymardCarousel" />,{' '}
+        <Cite k="baymardViewAll" />, <Cite k="nngCarousel" />
+      </>
+    ),
+  },
+  {
+    title: 'Infinite scroll for the feed only; nothing required below it.',
+    body: (
+      <>
+        Releases, followers and the moderation queue use Show more with counts
+        and restore position on Back. Rules and FAQ cannot depend on reaching
+        the end of a feed, which is the argument against stacking them under
+        posts on a phone. <Cite k="nngInfinite" />
+      </>
+    ),
+  },
+  {
+    title: 'Labels are nouns with scent, plus counts.',
+    body: (
+      <>
+        Releases, Products, Discussions, Polls, Rules, FAQ, Followers. Not
+        Explore, Community or More from CodeRabbit. Counts on activity tabs
+        (Kickstarter&apos;s FAQ 19, Updates 45) tell people what is behind the
+        label before they click. <Cite k="nngScent" />, <Cite k="ksRewards" />
+      </>
+    ),
+  },
+  {
+    title: 'On a phone: a scrolling row with a clipped last tab, then About.',
+    body: (
+      <>
+        Do not fold the row into a menu (hidden nav costs 15% time and about 30
+        points of usage on mobile). Offset the first tab and let the last one be
+        visibly cut so the row reads as scrollable. Four or five areas reachable
+        without scrolling the row. Accordions over anchors for rules and FAQ.
+        Admin sub-areas as a section menu, not drill-in sheets.{' '}
+        <Cite k="m2Tabs" />, <Cite k="baymardInline" />, <Cite k="nngSubnav" />
+      </>
+    ),
+  },
+  {
+    title: 'The trust token lives on the name line and is echoed on people.',
+    body: (
+      <>
+        GitHub and Hugging Face write Verified beside the name; X gives
+        affiliates a small square of the parent logo and the org an Affiliates
+        tab; Stack Overflow marks recognized members and recommended answers;
+        Bluesky lets a tap on the check show who granted it. A word or a mark,
+        never a banner or a section. <Cite k="githubVerified" />,{' '}
+        <Cite k="xOrgs" />, <Cite k="soCollectives" />, <Cite k="bskyVerify" />
+      </>
+    ),
+  },
+];
+
+const fieldNotes: ReactNode[][] = [
+  [
+    'X',
+    'Six or seven sticky scrolling text tabs; orgs get an Affiliates tab; the 2026 redesign turns them into icon segments',
+    'Header only: meta line, link, joined date, pinned post first in Posts',
+    'Follow, bell, More (share, lists, mute, report)',
+    'Edit profile swaps into the Follow slot; org tools in the global nav',
+    'Same, icon tabs',
+  ],
+  [
+    'YouTube',
+    'Sticky tabs shown only when the channel has that content; Home is up to twelve owner-ordered shelves',
+    'About dialog from "…more": description, up to 14 links, stats',
+    'Subscribe, bell after subscribing, Join',
+    'Customize channel and Manage videos replace Subscribe, open Studio',
+    'Compressed header, sticky scrolling tabs',
+  ],
+  [
+    'Reddit',
+    'Feed and Wiki tabs plus sort chips; a highlights carousel of up to six pinned posts',
+    'Right column: description, Rules accordion, Bookmarks, Moderators; on a phone "See more" opens an About screen',
+    'Join, Create post, bell, More',
+    'Mod Tools button top right, a separate hub',
+    'Column collapses into About; rules went unread, so Post Check was added',
+  ],
+  [
+    'LinkedIn Page',
+    'Five to eight tabs; Home is a snapshot of the others; Jobs and Life only when they exist',
+    'About tab with structured sections',
+    'Follow, a custom button, More',
+    'Separate admin view with its own left nav and "View as member"',
+    'Chip row, compressed header',
+  ],
+  [
+    'Instagram',
+    'Icon tabs; Highlights moved from a ring under the bio into a tab in 2025',
+    'Header: category label, bio, five links',
+    'Follow, Message, Contact',
+    'A full-width Professional dashboard row under the bio',
+    'Canonical',
+  ],
+  [
+    'Bluesky',
+    'Eight scrolling tabs; feeds, lists and starter packs are tabs, not cards',
+    'Bio only',
+    'Follow, More',
+    'Edit profile in the Follow slot',
+    'Same',
+  ],
+  [
+    'GitHub org',
+    'Underline tabs with counts; Teams appended for members, Settings for owners',
+    'README and pinned repos in the main column; People, Languages, Topics cards on the right of Overview only',
+    'Follow, Sponsor',
+    'Settings tab; pin and README in place; Public / Member view toggle',
+    'Tabs scroll or overflow; cards stack under the README',
+  ],
+  [
+    'Hugging Face org',
+    'Tabs with counts (Collections 15, models 70)',
+    'Team members as an avatar row with +270 under the header; org card in the main column; no sidebar',
+    'Follow',
+    'Edit-card button for members; settings on its own route',
+    'Already one column',
+  ],
+  [
+    'Product Hunt',
+    'Tabs with counts and a More overflow; Overview is shelves',
+    'Right cards on Overview only (awards, similar products, company info)',
+    'Follow, upvote, Visit website',
+    'Separate launch dashboard',
+    'Cards stack; users called the hub "a dead-end" and "too flat"',
+  ],
+  [
+    'Kickstarter',
+    'Tab row with counts: FAQ 19, Updates 45, Comments 127k; Rewards tab added so backers stop jumping around',
+    'Creator card in the right column; FAQ is a tab; risks at the bottom',
+    'Back this project, Remind me, Share',
+    'Separate creator dashboard',
+    'Rewards column drops under the story',
+  ],
+  [
+    'Skool',
+    'Six or seven fixed tabs the owner can hide; category pills filter the feed',
+    'Right About card on every tab: description, links, members and online counts, join button',
+    'JOIN GROUP inside the About card',
+    'SETTINGS button in the header',
+    'Same tabs; the card becomes the About tab',
+  ],
+  [
+    'Patreon',
+    'Home (curated shelves) and Posts (chronological) plus owner-added links; other sections in a top-right menu',
+    'Expandable About in the header, More menu',
+    '"Join for free" directly under the header, paid options below',
+    'Edit page top right, a side panel with Public / Free / Paid preview',
+    'Same page on mobile web',
+  ],
+  [
+    'Whop (mobile)',
+    'Home, Apps, Products, About tabs after the 2025 rebuild',
+    'About tab holds the team; FAQ and benefits as storefront sections',
+    'Owner-labelled Join or Subscribe',
+    'Separate business dashboard; owners see the same tabs with owner tools',
+    'Five-tab app bar under a tabbed page',
+  ],
+  [
+    'Twitch',
+    'Home, About, Schedule, Videos; Home is shelves',
+    'About tab is info panels (rules, socials, specs) plus a social row',
+    'Follow with bell, Subscribe',
+    'Creator dashboard; panels edited in place with an Edit Panels toggle',
+    'Tabs under the player; panels read-only',
+  ],
+  [
+    'Steam hub',
+    'Ten tabs; All is a mixed front page with official announcements pinned',
+    'Right column: info, rules, moderators',
+    'Follow',
+    'Admin panel; developer label on posts',
+    'Tabs wrap',
+  ],
+  [
+    'dev.to org',
+    'No tabs; one feed',
+    'Cards beside the feed: Meet the team, posts and members counts, tech stack',
+    'Follow; admins also see Settings and Admin links in the header',
+    'Settings route with analytics',
+    'Cards stack above the feed',
+  ],
+];
+
+const seatItems: Record<string, string[]> = {
+  'Home / posts': [
+    'Posts tab',
+    'Posts tab',
+    'Posts tab',
+    'Posts tab, Home is shelves',
+    'All chip',
+    'Posts tab',
+    'The center',
+    'First section',
+    'The center',
+    'The center',
+  ],
+  Releases: [
+    'Tab',
+    'Tab, count',
+    'Tab',
+    'Tab and shelf',
+    'Chip',
+    'Tab',
+    'Pages card',
+    'Section, anchor',
+    'Glyph',
+    'Sheet',
+  ],
+  Products: [
+    'Tab',
+    'Tab',
+    'Tab',
+    'Tab and shelf',
+    'Widget, See all',
+    'Tab',
+    'Pages card',
+    'Section',
+    'Glyph',
+    'Sheet',
+  ],
+  'Discussions, Polls': [
+    'Tabs',
+    'Tabs, count',
+    'Tabs',
+    'Tabs, poll shelf',
+    'Chips',
+    'Tabs',
+    'Pages card',
+    'Sections (5)',
+    'Glyphs',
+    'Sheet',
+  ],
+  'Rules, FAQ': [
+    'Card by the feed',
+    'About tab, card on Posts',
+    'Card by the feed',
+    'Card by the feed',
+    'Widget',
+    'About accordions',
+    'Rail accordion',
+    'Sections',
+    'Glyphs',
+    'Sheet',
+  ],
+  Links: [
+    'Card',
+    'Header link row',
+    'Header link row',
+    'Card',
+    'Widget',
+    'About, header row',
+    'Rail card',
+    'Header row',
+    'Glyphs, marked',
+    'Sheet',
+  ],
+  Followers: [
+    'Count',
+    'More, count on tab',
+    'Count',
+    'Count',
+    'Count',
+    'About preview',
+    'About card',
+    'Team section',
+    'Count',
+    'Sheet',
+  ],
+  Follow: [
+    'Header',
+    'Header',
+    'Header, then the bar',
+    'Header',
+    'Header',
+    'Header',
+    'Header and rail card',
+    'Header',
+    'Header',
+    'Header',
+  ],
+  Manage: [
+    'Header menu',
+    'Appended tab',
+    'Header menu',
+    'Header menu',
+    'Header menu',
+    'Header menu',
+    'Rail card',
+    'Header menu',
+    'Glyph',
+    'In the sheet',
+  ],
+};
+
+const scoreRows: Record<string, string[]> = {
+  'Visible at first paint': [
+    '5 areas',
+    '6 areas, More',
+    'As the base',
+    '6 areas',
+    '4 chips',
+    '6 areas',
+    '4 in a card',
+    '7 anchors',
+    '8 to 10 glyphs',
+    '1 button',
+  ],
+  'Feed first on Home': [
+    'Yes',
+    'Yes',
+    'Yes',
+    'No, one tab away',
+    'Yes',
+    'Yes',
+    'Yes',
+    'Yes, then sections',
+    'Yes',
+    'Yes',
+  ],
+  'Rules from the composer': [
+    'Beside it',
+    'Beside it on Posts',
+    'Beside it',
+    'Beside it',
+    'Beside it',
+    'One click',
+    'Rail, often unseen',
+    'Same page',
+    'One click',
+    'Two clicks',
+  ],
+  'Grows to': [
+    '6 tabs',
+    'Unlimited via More',
+    'As the base',
+    'Unlimited shelves',
+    '5 chips',
+    '6 tabs and About',
+    'Unlimited rows',
+    '8 anchors',
+    '8 glyphs',
+    'Unlimited',
+  ],
+  Mobile: [
+    'Row scrolls; cards sink',
+    'Row scrolls, More; About',
+    'Bar returns on scroll-up',
+    'Shelves stack',
+    'Chips scroll',
+    'About tab',
+    'Becomes About',
+    'Long page',
+    'Strip scrolls',
+    'Bottom sheet',
+  ],
+  'Strongest evidence': [
+    'NN/g tabs; X, GitHub',
+    'NN/g combo nav; Primer; Kickstarter',
+    'Smashing 22% faster; NN/g sticky',
+    'Patreon, YouTube',
+    'Baymard promoted filters',
+    'NN/g accordions; Twitch, Skool',
+    'Reddit, Skool',
+    'NN/g in-page links; Crunchbase',
+    'Instagram, Whop',
+    'Discord mobile',
+  ],
+  'Evidence against': [
+    'Overflows at 7',
+    'More is overlooked by some',
+    'Viewport cost per page',
+    'Feed one click away; carousel blindness',
+    'Chips are filters, not areas',
+    'Rules a click from the composer',
+    'Right-rail blindness 0.8%',
+    'Nothing lives below a feed',
+    'Icons carry no scent; IG moved its ring',
+    'Hidden nav 27% vs 48%',
+  ],
+  Verdict: [
+    'Base',
+    'Spine',
+    'Add to the spine',
+    'One shelf, not a tab',
+    'Sort, not nav',
+    'The phone fallback',
+    'Cards on Posts only',
+    'For the About tab',
+    'A links row only',
+    'Manage on phones only',
+  ],
+};
+
+const manageOptions: ReactNode[][] = [
+  [
+    'Appended tab',
+    'Manage 3 at the end of the row, visible to staff only; inside it a second-level row: Moderation 3, Content feed, Analytics, Settings. Moderators see Moderation alone.',
+    'GitHub Settings and Teams tabs, npm Settings and Billing',
+    'One click from the public page, badge carries the queue, no new surface. Must read as a different kind of tab.',
+  ],
+  [
+    'Header pill and panel',
+    'A Manage pill beside Edit page opens a side panel with the same four sections and a Preview as Public / Follower / Moderator switch.',
+    'Patreon Edit page panel, GitHub view-as toggle',
+    'Keeps the row clean and gives preview for free. A panel over a page is a modal in disguise for anything long, like the queue.',
+  ],
+  [
+    'Separate dashboard',
+    'Manage opens a full admin surface with its own left nav, the way production has squad settings and moderation as pages today.',
+    'LinkedIn admin view, YouTube Studio, Reddit Mod Tools',
+    'Right for heavy work, but it brings the sidebar back for the people who use the page most and loses the "same page, more tools" feel.',
+  ],
+  [
+    'In place',
+    'Edit page on the header, pencil affordances on the about block, pins and shelves, a Feed settings strip on Releases for admins.',
+    'Wellfound Edit Profile, G2 pencils, Hugging Face edit card, Twitch Edit Panels',
+    'Not a home for the queue or analytics on its own. Pairs with the appended tab.',
+  ],
+];
+
+/* ---------------------------------------------------------------- views */
+
+const Legend = (): ReactElement => (
+  <div className="flex flex-wrap gap-2">
+    {(Object.keys(tones) as Tone[]).map((tone) => (
+      <span
+        key={tone}
+        className={classNames('rounded-8 px-2 py-1 typo-caption2', tones[tone])}
+      >
+        {toneLabel[tone]}
+      </span>
+    ))}
+  </div>
+);
+
+const VariationBlock = ({
+  spec,
+  index,
+}: {
+  spec: Variation;
+  index: number;
+}): ReactElement => (
+  <div className="flex flex-col gap-5 border-t border-border-subtlest-tertiary pt-10">
+    <div className="flex flex-col gap-2">
+      <div className="flex items-baseline gap-3">
+        <span className="sq-nums font-bold text-text-quaternary typo-title3">
+          {String(index + 1).padStart(2, '0')}
+        </span>
+        <h3 className="font-bold typo-title2">{spec.title}</h3>
+        <span className="text-text-quaternary typo-footnote">
+          after {spec.after}
+        </span>
+      </div>
+      <p className="max-w-[100ch] text-text-secondary typo-callout">
+        {spec.carries}
+      </p>
+    </div>
+    <div className="grid grid-cols-[minmax(0,1fr)_10rem] items-start gap-6">
+      <Frame rows={spec.desktop} caption={spec.desktopCaption} />
+      <Frame rows={spec.mobile} caption={spec.mobileCaption} />
+    </div>
+    <div className="grid max-w-[110ch] grid-cols-2 gap-x-8 gap-y-3 text-text-tertiary typo-footnote">
+      <p>
+        <b className="text-text-secondary">Strengths. </b>
+        {spec.strengths}
+      </p>
+      <p>
+        <b className="text-text-secondary">Costs. </b>
+        {spec.costs}
+      </p>
+      <p>
+        <b className="text-text-secondary">Evidence. </b>
+        {spec.evidence}
+      </p>
+      <p>
+        <b className="text-text-secondary">Best when. </b>
+        {spec.bestWhen}
+      </p>
+    </div>
+  </div>
+);
+
+const Spec = ({
+  n,
+  title,
+  children,
+}: {
+  n: string;
+  title: string;
+  children: ReactNode;
+}): ReactElement => (
+  <div className="flex gap-4">
+    <span className="sq-nums w-8 shrink-0 font-bold text-text-quaternary typo-callout">
+      {n}
+    </span>
+    <div className="flex min-w-0 flex-1 flex-col gap-2">
+      <h4 className="font-bold text-text-primary typo-callout">{title}</h4>
+      <div className="flex flex-col gap-2 text-text-secondary typo-footnote">
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page>
+      <header className="flex flex-col gap-3 border-b border-border-subtlest-tertiary pb-8">
+        <Eyebrow>Squad page · No sidebar · Research</Eyebrow>
+        <h1 className="max-w-[26ch] font-bold typo-mega3">
+          Ten ways to seat the sidebar in the page, and the evidence for each
+        </h1>
+        <Prose>
+          <p>
+            The pages column carries eleven things: Home, Releases, Products,
+            Discussions, Polls, Rules, FAQ, the company links, Followers,
+            Follow, and the team&apos;s Manage section. Take the column away and
+            every one of them needs a seat in the header, the row, the center,
+            or the right column. This page collects what the usability
+            literature says about that move, what thirty products do on a
+            profile or organization page that never had a sidebar, ten ways to
+            seat the load scored against that evidence, and the composite
+            written out region by region at the end.
+          </p>
+          <p>
+            Short version: the field and the research agree. One counted tab row
+            under the identity block, everything common above it, the feed
+            rendered immediately below it, the docs in an About tab with support
+            cards beside the feed on desktop, a header that collapses into the
+            row on scroll, and Manage appended to the row for the people who may
+            see it.
+          </p>
+        </Prose>
+      </header>
+
+      <Section
+        eyebrow="Evidence"
+        title="Fourteen rules the literature gives us"
+      >
+        <div className="grid grid-cols-2 gap-x-10 gap-y-6">
+          {principles.map((rule, index) => (
+            <div key={rule.title} className="flex min-w-0 gap-3">
+              <span className="sq-nums shrink-0 font-bold text-text-quaternary typo-callout">
+                {String(index + 1).padStart(2, '0')}
+              </span>
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <span className="font-bold text-text-primary typo-callout">
+                  {rule.title}
+                </span>
+                <p className="text-text-tertiary typo-footnote">{rule.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section
+        eyebrow="Field notes"
+        title="What sixteen products do without a sidebar"
+      >
+        <Prose>
+          <p>
+            Consumer profiles, community platforms and developer organization
+            pages, read in September 2026. The full set covered thirty products;
+            these are the ones that changed a decision. Three things recur
+            everywhere: a counted tab row, the trust mark on the name line, and
+            management entered from the header but done somewhere else.
+          </p>
+        </Prose>
+        <Table
+          minWidth="80rem"
+          head={[
+            'Product',
+            'Navigation',
+            'Info without a sidebar',
+            'Actions',
+            'Manage',
+            'Phone',
+          ]}
+          rows={fieldNotes}
+        />
+      </Section>
+
+      <Section eyebrow="Variations" title="Ten ways to seat the load">
+        <Prose>
+          <p>
+            Each is drawn as a schematic at desktop and phone width, with the
+            colour telling what kind of thing each block is. The research led to
+            the chosen direction, which lives in Squad Page, 1. Direction.
+          </p>
+        </Prose>
+        <Legend />
+        <div className="flex flex-col gap-6">
+          {variations.map((spec, index) => (
+            <VariationBlock key={spec.id} spec={spec} index={index} />
+          ))}
+        </div>
+      </Section>
+
+      <Section eyebrow="Compare" title="Where each sidebar item lands">
+        <Table
+          minWidth="90rem"
+          head={['', ...variations.map((spec) => spec.title)]}
+          rows={Object.entries(seatItems).map(([item, cells]) => [
+            item,
+            ...cells,
+          ])}
+        />
+      </Section>
+
+      <Section eyebrow="Compare" title="Scored against the evidence">
+        <Table
+          minWidth="90rem"
+          head={['', ...variations.map((spec) => spec.title)]}
+          rows={Object.entries(scoreRows).map(([item, cells]) => [
+            item,
+            ...cells,
+          ])}
+        />
+      </Section>
+
+      <Section eyebrow="Manage" title="Where the team's section goes">
+        <Prose>
+          <p>
+            The sidebar&apos;s Manage section is the part with no consumer
+            precedent: no product surfaces a moderation queue on the public
+            page. Four ways to seat it, with the products that do each.
+          </p>
+        </Prose>
+        <Table
+          minWidth="70rem"
+          head={['Option', 'What it is', 'After', 'Trade']}
+          rows={manageOptions}
+        />
+        <Prose>
+          <p>
+            Pick the appended tab, paired with in-place affordances. The queue
+            badge on the tab does the job the sidebar badge did, moderators get
+            one tab with one section, and a separate dashboard stays available
+            later for analytics if it outgrows a page.
+          </p>
+        </Prose>
+      </Section>
+
+      <Section eyebrow="Verdict" title="The composite">
+        <Prose>
+          <p>
+            No single variation wins on its own. The counted row is the spine
+            because it is the only one that scales, keeps everything visible
+            that can be, and has a documented equal to visible navigation. The
+            condensing header gives back the one thing the column did that a
+            header cannot. The About tab is the phone answer to the right column
+            and the natural home of Rules, FAQ and the team, while the desktop
+            keeps support cards beside the feed on Posts. The curated Home
+            survives as one pinned shelf at the top of Posts rather than a
+            second Home. Chips survive as the sort of one list. The highlights
+            strip survives as the header&apos;s link row. The sheet survives
+            only for Manage on a phone.
+          </p>
+        </Prose>
+        <div className="grid grid-cols-[minmax(0,1fr)_10rem] items-start gap-6">
+          <Frame
+            caption="Desktop, Posts, admin view"
+            rows={[
+              chrome,
+              banner,
+              identity('Following'),
+              [
+                {
+                  l: 'Docs ↗ · GitHub ↗ · X ↗ · YouTube ↗ · LinkedIn ↗ · and 1 more   ·   Team ●●●●●●●● 8',
+                  t: 'chrome',
+                },
+              ],
+              [
+                { l: 'Posts', s: 1, t: 'nav' },
+                { l: 'Releases 14', s: 2, t: 'nav' },
+                { l: 'Products', s: 2, t: 'nav' },
+                { l: 'Discussions 38', s: 2, t: 'nav' },
+                { l: 'Polls 1', s: 1, t: 'nav' },
+                { l: 'About', s: 1, t: 'nav' },
+                { l: 'More ▾', s: 1, t: 'nav' },
+                { l: 'Manage 3', s: 2, t: 'manage' },
+              ],
+              [
+                {
+                  l: '',
+                  s: 8,
+                  stack: [
+                    {
+                      l: 'Pinned: CodeRabbit Triage · v2.4 release',
+                      t: 'feed',
+                    },
+                    { l: 'Composer · Posts are reviewed · Rules ↗', t: 'feed' },
+                    { l: 'Latest | Top', t: 'chrome', h: 1.25 },
+                    { l: 'Posts feed', t: 'feed', h: 4 },
+                  ],
+                },
+                supportColumn(),
+              ],
+            ]}
+          />
+          <Frame
+            caption="Phone, scrolled"
+            rows={[
+              chrome,
+              [
+                { l: 'CodeRabbit ✓', s: 7, t: 'chrome' },
+                { l: 'Following', s: 5, t: 'cta' },
+              ],
+              [
+                { l: 'Posts · Releases 14 · Prod…', s: 9, t: 'nav' },
+                { l: 'More', s: 3, t: 'nav' },
+              ],
+              [{ l: 'Pinned', t: 'feed' }],
+              [{ l: 'Composer · Rules ↗', t: 'feed' }],
+              [feed(4, 12)],
+            ]}
+          />
+        </div>
+      </Section>
+
+      <Section eyebrow="Written" title="The composite, region by region">
+        <div className="grid max-w-[110ch] grid-cols-1 gap-8">
+          <Spec n="01" title="Header at rest">
+            <p>
+              Banner (the X asset, 1500 by 500, anchored top), avatar
+              overlapping its bottom edge, name with the seal, then one meta
+              strip: coderabbit.ai · Developer tools · San Francisco, CA · Since
+              Apr 2023. The bio on one line with &quot;more&quot;. A stats row:
+              Followers 6,120 · Posts 184 · Upvotes 12.3k, each a link. Under it
+              a link row of labelled icons, Docs, GitHub, X, YouTube, LinkedIn,
+              and &quot;and 1 more&quot; past five, then the team as an avatar
+              row of eight that opens Followers on the Moderators tab. Featured
+              and Private chips only when true.
+            </p>
+            <p>
+              Right cluster, one primary and the rest secondary: Follow (white)
+              or Following, the bell once following, Share, More with the
+              production items. Admins see Edit page and Boost before them.
+              Anonymous sees Sign up to follow and no bell. Blocked sees Follow
+              disabled and the strip below the row.
+            </p>
+          </Spec>
+          <Spec n="02" title="The row">
+            <p>
+              Posts · Releases 14 · Products · Discussions 38 · Polls 1 · About,
+              underline style, left-aligned, spanning the content width,
+              directly above what it controls. Followers is the first item in
+              More; Priority+ measures the width and moves the rightmost tabs
+              into More one at a time. Counts load together so the row never
+              shifts. Every tab is a routed URL, /squads/coderabbit/releases, so
+              links and crawlers get real pages. Staff see Manage 3 appended at
+              the far right, styled as the team&apos;s tab: dashed underline,
+              badge for the queue.
+            </p>
+          </Spec>
+          <Spec n="03" title="Posts, the default">
+            <p>
+              A pinned strip first (up to three, the team labels and expires
+              them, the way Reddit highlights work), then the composer or the
+              lock card with its reason, a one-line review note and a Rules
+              link, then a Latest | Top segmented control, then the infinite
+              feed. Own pending posts show as the strip above the feed. On
+              desktop the support column sits beside Posts only: Official
+              company page, Rules (first three, See all in About), Team 8,
+              Links. Every other tab is full width.
+            </p>
+          </Spec>
+          <Spec n="04" title="Releases, Products, Discussions, Polls">
+            <p>
+              As the workspace pages, full width. Releases keeps its month
+              groups and the All · Features · Fixes · Betas chips as the filter
+              of that one list, with Show more and the count, and for admins the
+              Content feed strip naming the RSS source. Discussions and Polls
+              keep their composers under the posting rules.
+            </p>
+          </Spec>
+          <Spec n="05" title="About">
+            <p>
+              Description in full, the company facts (website, size, location,
+              founded), the link row again, Rules as an accordion with expand
+              all, FAQ as an accordion, Team with roles, a Followers preview of
+              twelve with See all 6,120. Everything the right column shows on
+              desktop is here too, so nothing lives in the rail alone. Admins
+              get a pencil on each block.
+            </p>
+          </Spec>
+          <Spec n="06" title="Manage">
+            <p>
+              Inside the tab a second-level segmented row: Moderation 3 ·
+              Content feed · Analytics · Settings. Moderators see Moderation
+              only. A Preview as switch (Public / Follower / Moderator) sits at
+              the right of that row. Nothing goes deeper than this level; a
+              queue item opens as the post does.
+            </p>
+          </Spec>
+          <Spec n="07" title="Scroll">
+            <p>
+              When the row reaches the top it sticks and the hero collapses into
+              it: avatar 24px, name, seal, Follow or Following, the row, bell
+              and More as icons. One line, opaque, 48px, animated at scroll
+              speed. No other sticky element on the page.
+            </p>
+          </Spec>
+          <Spec n="08" title="Phone">
+            <p>
+              The banner shortens, the identity stacks, Follow spans the width
+              with More beside it. The row scrolls with the first tab offset and
+              the last visibly cut; More sits at its end. The support column
+              folds into About, and the Official company page card sits under
+              the bio instead. The sticky bar hides on scroll-down and returns
+              on scroll-up. Manage opens as a section menu of its four pages,
+              not a drill-in.
+            </p>
+          </Spec>
+          <Spec n="09" title="States, unchanged">
+            <p>
+              Private squads show the production wall on every tab and the
+              invitation landing; blocked users see Follow disabled and the
+              strip; a young page shows empty states in place of the pinned
+              strip and feed, with connect-the-feed for admins; featured adds
+              the chip; boost stays an admin header action. Vocabulary stays
+              Follow, Following, Followers.
+            </p>
+          </Spec>
+        </div>
+      </Section>
+
+      <Section eyebrow="Sources" title="Everything cited">
+        <div className="grid grid-cols-2 gap-x-10 gap-y-1">
+          {Object.entries(sources).map(([key, source]) => (
+            <a
+              key={key}
+              href={source.href}
+              target="_blank"
+              rel="noreferrer"
+              className="truncate text-text-tertiary typo-footnote hover:text-text-link"
+            >
+              {source.label}
+            </a>
+          ))}
+        </div>
+      </Section>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/OfficialBadge.stories.tsx b/packages/storybook/stories/squad-page/OfficialBadge.stories.tsx
new file mode 100644
index 00000000000..16795e6f142
--- /dev/null
+++ b/packages/storybook/stories/squad-page/OfficialBadge.stories.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ExtensionProviders from '../extension/_providers';
+import { KitStyles } from './kit';
+import { RulesWidget, VerifiedWidget } from './home';
+
+const meta: Meta = {
+  title: 'Squad Page/3. Verified badge',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+const Eyebrow = ({ children }: { children: ReactNode }): ReactElement => (
+  <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+    {children}
+  </span>
+);
+
+/** The chosen badge, Aurora, as it ships at the top of the widget column. */
+export const Overview: StoryObj = {
+  render: () => (
+    <ExtensionProviders>
+      <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+        <KitStyles />
+        <div className="mx-auto flex w-full max-w-[60rem] flex-col gap-10">
+          <header className="flex flex-col gap-4 border-b border-border-subtlest-tertiary pb-8">
+            <Eyebrow>Squad page · The verified badge</Eyebrow>
+            <h1 className="max-w-[24ch] font-bold typo-giga3">Aurora</h1>
+            <p className="max-w-[64ch] text-text-secondary typo-body">
+              Frosted glass with a brand-purple hairline and two soft light
+              sources, cabbage and onion, behind the seal and four words. Picked
+              from 28 explorations; it is the Verified Squad page card at the
+              top of the right column. On phones the right column moves to the
+              About tab: the header shows the verified badge beside the name,
+              and the card sits at the top of About.
+            </p>
+          </header>
+          <div className="flex w-80 flex-col gap-4">
+            <VerifiedWidget />
+            <RulesWidget />
+          </div>
+        </div>
+      </div>
+    </ExtensionProviders>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/archive/Navigation.stories.tsx b/packages/storybook/stories/squad-page/archive/Navigation.stories.tsx
new file mode 100644
index 00000000000..73af2e9e543
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/Navigation.stories.tsx
@@ -0,0 +1,138 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ExtensionProviders from '../../extension/_providers';
+import { KitStyles, Viewer } from '../kit';
+import { WorkspaceStyles } from '../workspace';
+import { Nav, navPageIds, NavShell, specs } from './navigation';
+
+const meta: Meta = {
+  title: 'Squad Page/Archive/Navigation picks',
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <ExtensionProviders>
+        <Story />
+      </ExtensionProviders>
+    ),
+  ],
+};
+
+export default meta;
+
+const Page = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+    <KitStyles />
+    <WorkspaceStyles />
+    <div className="mx-auto flex w-full max-w-[92rem] flex-col gap-14">
+      {children}
+    </div>
+  </div>
+);
+
+const Eyebrow = ({ children }: { children: ReactNode }): ReactElement => (
+  <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+    {children}
+  </span>
+);
+
+const Block = ({
+  spec,
+  index,
+  viewer,
+}: {
+  spec: (typeof specs)[number];
+  index: number;
+  viewer: Viewer;
+}): ReactElement => (
+  <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-2">
+      <div className="flex items-baseline gap-3">
+        <span className="sq-nums font-bold text-text-quaternary typo-title3">
+          {String(index + 1).padStart(2, '0')}
+        </span>
+        <h3 className="font-bold typo-title2">{spec.title}</h3>
+        <span className="text-text-quaternary typo-footnote">
+          after {spec.after}
+        </span>
+      </div>
+      <div className="grid max-w-[100ch] grid-cols-2 gap-6 text-text-tertiary typo-footnote">
+        <p>
+          <b className="text-text-secondary">The idea. </b>
+          {spec.idea}
+        </p>
+        <p>
+          <b className="text-text-secondary">Costs. </b>
+          {spec.costs}
+        </p>
+      </div>
+    </div>
+    <NavShell nav={spec.id} viewer={viewer} height={46} />
+  </div>
+);
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page>
+      <header className="flex flex-col gap-3 border-b border-border-subtlest-tertiary pb-8">
+        <Eyebrow>Squad page · Navigation</Eyebrow>
+        <h1 className="max-w-[24ch] font-bold typo-mega3">
+          The two picks: Chips, and Shelves
+        </h1>
+        <div className="flex max-w-[76ch] flex-col gap-3 text-text-secondary typo-body">
+          <p>
+            Of ten ways to carry the old pages column, these two were picked.
+            Chips filter one feed by kind; Shelves stack the latest release, the
+            products, the open poll and the latest posts. The direction combines
+            them: the chips on the feed, and the products shelf above it. See
+            Squad Page, 1. Direction.
+          </p>
+        </div>
+      </header>
+      <div className="flex flex-col gap-16">
+        {specs.map((spec, index) => (
+          <Block
+            key={spec.id}
+            spec={spec}
+            index={index}
+            viewer={Viewer.Member}
+          />
+        ))}
+      </div>
+    </Page>
+  ),
+};
+
+export const Playground: StoryObj<{
+  nav: Nav;
+  viewer: Viewer;
+  page: string;
+  width: number;
+}> = {
+  args: {
+    nav: Nav.Chips,
+    viewer: Viewer.Member,
+    page: 'home',
+    width: 1440,
+  },
+  argTypes: {
+    nav: { control: 'select', options: Object.values(Nav) },
+    viewer: { control: 'select', options: Object.values(Viewer) },
+    page: { control: 'select', options: navPageIds },
+    width: { control: { type: 'range', min: 720, max: 1600, step: 20 } },
+  },
+  render: ({ nav, viewer, page, width }) => (
+    <div className="flex min-h-screen items-start justify-center bg-background-subtle p-8">
+      <KitStyles />
+      <WorkspaceStyles />
+      <NavShell
+        key={`${nav}-${viewer}-${page}-${width}`}
+        nav={nav}
+        viewer={viewer}
+        initialPage={page}
+        height={52}
+        width={width}
+      />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/archive/Workspace.stories.tsx b/packages/storybook/stories/squad-page/archive/Workspace.stories.tsx
new file mode 100644
index 00000000000..f413eed01c8
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/Workspace.stories.tsx
@@ -0,0 +1,780 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import classNames from 'classnames';
+import ExtensionProviders from '../../extension/_providers';
+import { KitStyles, Viewer } from '../kit';
+import { SquadHome } from '../home';
+import { ProfileHome, ProfileTab } from './profile';
+import {
+  ContentSource,
+  MemberRole,
+  pageIcon,
+  PostingGate,
+  WorkspaceStyles,
+} from '../workspace';
+import {
+  addPage,
+  allPages,
+  findPage,
+  pageCatalogue,
+  WorkspaceShell,
+} from './workspaceShell';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+
+const meta: Meta = {
+  title: 'Squad Page/Archive/Workspace (earlier direction)',
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <ExtensionProviders>
+        <Story />
+      </ExtensionProviders>
+    ),
+  ],
+};
+
+export default meta;
+
+/* ------------------------------------------------------------ furniture */
+
+const Page = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+    <KitStyles />
+    <WorkspaceStyles />
+    <div className="mx-auto flex w-full max-w-[92rem] flex-col gap-14">
+      {children}
+    </div>
+  </div>
+);
+
+const Eyebrow = ({ children }: { children: ReactNode }): ReactElement => (
+  <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+    {children}
+  </span>
+);
+
+const Prose = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="flex max-w-[76ch] flex-col gap-3 text-text-secondary typo-body">
+    {children}
+  </div>
+);
+
+const Section = ({
+  eyebrow,
+  title,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-6">
+    <div className="flex flex-col gap-2">
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="font-bold typo-title1">{title}</h2>
+    </div>
+    {children}
+  </section>
+);
+
+const Caption = ({ children }: { children: ReactNode }): ReactElement => (
+  <p className="max-w-[76ch] text-text-tertiary typo-callout">{children}</p>
+);
+
+const Table = ({
+  head,
+  rows,
+}: {
+  head: string[];
+  rows: ReactNode[][];
+}): ReactElement => (
+  <div className="overflow-x-auto rounded-16 border border-border-subtlest-tertiary">
+    <table className="w-full min-w-[60rem] border-collapse text-left">
+      <thead>
+        <tr className="bg-surface-float">
+          {head.map((cell) => (
+            <th
+              key={cell}
+              className="px-4 py-3 font-bold text-text-secondary typo-caption1"
+            >
+              {cell}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr
+            // eslint-disable-next-line react/no-array-index-key
+            key={rowIndex}
+            className="border-t border-border-subtlest-tertiary align-top"
+          >
+            {row.map((cell, cellIndex) => (
+              <td
+                // eslint-disable-next-line react/no-array-index-key
+                key={cellIndex}
+                className={classNames(
+                  'px-4 py-3 typo-footnote',
+                  cellIndex === 0
+                    ? 'font-bold text-text-primary'
+                    : 'text-text-tertiary',
+                )}
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+const Screen = ({
+  title,
+  note,
+  children,
+}: {
+  title: string;
+  note: string;
+  children: ReactNode;
+}): ReactElement => (
+  <div className="flex flex-col gap-3">
+    <div className="flex flex-col">
+      <span className="font-bold text-text-primary typo-callout">{title}</span>
+      <span className="max-w-[76ch] text-text-tertiary typo-footnote">
+        {note}
+      </span>
+    </div>
+    {children}
+  </div>
+);
+
+/** Two 1152px pages side by side, scaled so both fit. */
+const Pair = ({ items }: { items: [string, ReactNode][] }): ReactElement => (
+  <div className="flex gap-6 overflow-x-auto">
+    {items.map(([label, node]) => (
+      <div
+        key={label}
+        className="flex shrink-0 flex-col gap-2"
+        style={{ width: 1152, zoom: 0.62 }}
+      >
+        <span className="text-text-quaternary typo-callout">{label}</span>
+        <div className="overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-default">
+          {node}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+/* --------------------------------------------------------------- stories */
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page>
+      <header className="flex flex-col gap-4 border-b border-border-subtlest-tertiary pb-10">
+        <Eyebrow>Squad page · The workspace</Eyebrow>
+        <h1 className="max-w-[22ch] font-bold typo-giga3">
+          A squad is a workspace, not a page.
+        </h1>
+        <Prose>
+          <p>
+            Whop&apos;s idea is not a sidebar of widgets. It is that a community
+            is a small product the owner assembles: a left column of pages, each
+            page a different kind of thing (a feed, a chat, a document, a link,
+            a bounty board), and the main area becomes whatever the selected
+            page is. The owner adds, names, orders, sections and hides pages. A
+            visitor sees a place, not a profile.
+          </p>
+          <p>
+            For daily.dev this is a small structural change with a large product
+            surface. The v2 rail already exists and does not move. The
+            squad&apos;s pages take the second column. The main area renders the
+            page. Home is the only page that carries the identity block; every
+            other page is just its content, because the sidebar already says
+            where you are.
+          </p>
+          <p className="text-text-quaternary typo-callout">
+            Real squad, real posts, real team. Products, the polls, the rules,
+            the links and the verified badge are illustrative. Click around in
+            the playground below; it is live.
+          </p>
+        </Prose>
+      </header>
+
+      <Section eyebrow="Try it" title="The workspace, as a member">
+        <Caption>
+          Click the pages in the second column. Home is the identity block plus
+          the feed. Releases is the changelog as a log, Products the list of
+          what the company makes. Discussions is the feed with a posting rule;
+          Polls is the poll card, one vote each. Rules and FAQ are pages, and
+          the rules sit in a widget on Home too. The links open outside.
+        </Caption>
+        <WorkspaceShell viewer={Viewer.Member} />
+      </Section>
+
+      <Section eyebrow="Parity" title="Home is the profile page, for a squad">
+        <Caption>
+          A person and a squad are the same kind of thing on daily.dev, so their
+          pages share one skeleton, and both get the same correction: the posts
+          are the page. Everything that used to stack down the column (the
+          readme, the stack, the CV, the roles) sits under one About tab, and
+          Posts is the default. Left: the profile on the new frame. Right: the
+          squad. Same card, cover, avatar seat, name, meta, actions, stats,
+          tabs, widget column. Only the nouns change.
+        </Caption>
+        <Pair
+          items={[
+            ['Profile, on the new frame', <ProfileHome key="profile" />],
+            [
+              'Squad Home, same frame',
+              <SquadHome key="squad" viewer={Viewer.Visitor} standalone />,
+            ],
+          ]}
+        />
+        <Table
+          head={['Profile', 'Squad Home', 'Note']}
+          rows={[
+            [
+              'Cover, avatar at the foot of it',
+              'Cover, logo in the same seat',
+              'Same sizes: h-36 cover, 7.5rem rounded-16 avatar at left-6 top-16.',
+            ],
+            [
+              'Name + Plus mark',
+              'Name + Verified mark',
+              "The verified mark is the squad's Plus mark: same seat, same size.",
+            ],
+            ['Bio', 'Tagline', 'One line. The long form lives in About.'],
+            [
+              'Company badge',
+              '"Verified company" · location',
+              'The company badge is what makes the page sellable, so it stays in the header.',
+            ],
+            ['@handle · Joined date', '@handle · Created date', ''],
+            [
+              'Follow, more',
+              'Join, notifications, more',
+              'Joined state uses the secondary button with a check, like Following.',
+            ],
+            [
+              'Reputation · Upvotes · Followers · Following',
+              'Members · Posts · Views · Upvotes',
+              'Same 2x2 grid; members take the reputation seat with the icon.',
+            ],
+            [
+              'Tabs: Activity · About',
+              'Tabs: Posts · About',
+              'New on both. Posts is the default and takes the whole card.',
+            ],
+            [
+              'Activity: Posts / Replies / Upvoted chips, 2-up card grid, Load more',
+              'Posts: Latest / Top / Discussed chips, pinned row, 2-up card grid, Load more',
+              'The cards are the page again. Load more, not a rail.',
+            ],
+            [
+              'About: readme, social links, work experience',
+              'About: readme, links, stack, open roles',
+              'One tab for everything that is not posts.',
+            ],
+            [
+              'Reading overview, Active in squads, Badges',
+              'Squad overview, Team, Awards and milestones',
+              'Same widget frames. Reading heatmap becomes a posting heatmap.',
+            ],
+          ]}
+        />
+      </Section>
+
+      <Section eyebrow="Three columns" title="How it sits inside daily.dev">
+        <div className="grid grid-cols-3 gap-4">
+          {[
+            [
+              'The rail',
+              'Unchanged. The app: Home, Search, Explore, Squads, Streak, your account. Whop has the same thing on its far left, one icon per community.',
+            ],
+            [
+              'The squad’s pages',
+              'New. Owner-composed. Sections with labels, pages with icons and counts, admin-only Manage at the end. The Join button lives here for a visitor, so it is on screen on every page.',
+            ],
+            [
+              'The page',
+              'Whatever the selected page is. A page bar names it and holds its actions. Home is the only page with a cover and a name, because everywhere else the sidebar already says where you are.',
+            ],
+          ].map(([title, body], index) => (
+            <div
+              key={title}
+              className="flex flex-col gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-5"
+            >
+              <span className="sq-nums font-bold text-text-quaternary typo-caption1">
+                0{index + 1}
+              </span>
+              <span className="font-bold text-text-primary typo-callout">
+                {title}
+              </span>
+              <span className="text-text-tertiary typo-footnote">{body}</span>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section eyebrow="Translation" title="Whop to daily.dev">
+        <Table
+          head={['Whop', 'daily.dev today', 'In the workspace']}
+          rows={[
+            [
+              'Community sidebar with apps and sections',
+              'Squad header with Settings and Pending posts tabs',
+              'The pages column: sections, pages, counts, hide, reorder',
+            ],
+            [
+              'Home: cover, logo, rating, members, "joined by"',
+              'SquadPageHeader: name, stats, moderators, top members, stack',
+              'Home page: cover, logo, name, one line of meta, "joined by", pinned, feed',
+            ],
+            [
+              'Announcements app',
+              'Any post; pinned posts',
+              "Releases: the team's posts as a log, grouped by month",
+            ],
+            [
+              'Chat app',
+              'Nothing. Slack integration posts out, not in',
+              'Not carried over. Discussions and Polls are where members talk',
+            ],
+            [
+              '"Start here" document',
+              'A freeform post',
+              'A Page: a freeform post rendered as a document, with Edit for admins',
+            ],
+            [
+              'Content Rewards, Bounties',
+              'Cores and Awards',
+              'Not carried over. Developer communities do not organise around rewards; awards stay on posts',
+            ],
+            [
+              'Products, Reviews tabs',
+              'Plus, Recruiter, the source stack',
+              "Products page imported from Product Hunt, G2, Trustpilot, GitHub or a URL, with the source's rating and a link into the member stack",
+            ],
+            [
+              'Links, "Our website"',
+              'Website in the description, source stack',
+              'Link pages that open in a new tab; Stack and Team as pages',
+            ],
+            [
+              'Add app, Preview as Admin',
+              'Nothing',
+              'Add a page (the catalogue below), Preview as',
+            ],
+            [
+              'Far-left communities rail',
+              'The v2 rail, Squads tab with a panel of your squads',
+              'Unchanged',
+            ],
+          ]}
+        />
+      </Section>
+
+      <Section
+        eyebrow="Research"
+        title="How developer communities organise themselves"
+      >
+        <Caption>
+          The subreddits developers actually live in (r/reactjs, r/rust,
+          r/golang, r/webdev, r/devops, r/ExperiencedDevs) and the company ones
+          (r/nextjs, r/supabase, r/cursor) converge on one shape. GitHub
+          Discussions ships that shape as its default categories, and every
+          Discord dev server names the same channels. daily.dev already has most
+          of the parts; what it lacks is the container.
+        </Caption>
+        <Table
+          head={[
+            'Convention',
+            'Reddit',
+            'GitHub Discussions',
+            'Discord',
+            'daily.dev today',
+            'In the sidebar',
+          ]}
+          rows={[
+            [
+              'Post types, chosen when posting',
+              'Post flairs: Needs help, Discussion, Show and tell, News, Resource, Announcement',
+              'Categories: Announcements, General, Ideas, Polls, Q&A, Show and tell',
+              '#announcements #general #help #showcase',
+              'Post types (link, freeform, poll, video), tags, posting gates',
+              'Channels: one feed, one flair per post, a posting rule per channel',
+            ],
+            [
+              'Team-only news',
+              'Announcement flair, mod-only; pinned',
+              'Announcements category, maintainers only',
+              '#announcements, locked',
+              'Pinned posts; posting gate is squad-wide',
+              "Releases, the team's log, beside Discussions with a posting rule",
+            ],
+            [
+              'Threads on a schedule',
+              "Monthly Who's hiring, weekly Easy questions, Showoff Saturday",
+              'Pinned discussions',
+              'Scheduled events',
+              'Scheduled posts (14 days), pinning',
+              'Not carried over. Polls carry the scheduled question instead',
+            ],
+            [
+              'Read before you post',
+              'Rules widget (numbered), wiki, FAQ',
+              'CONTRIBUTING, discussion guidelines',
+              '#rules, #start-here',
+              'Welcome post, description',
+              'Documentation: Rules and FAQ, with the rules also as a widget on Home',
+            ],
+            [
+              'Where else to go',
+              'Sidebar links, related communities, Discord',
+              'Repository links',
+              'Link channels',
+              'Website in the description, source stack',
+              'Links: docs, GitHub, status, Discord, related squads',
+            ],
+            [
+              'Who is here',
+              'Moderators list, member and online counts',
+              'Maintainers',
+              'Member list, online',
+              'Admins, moderators, top members',
+              'Followers behind the count on Home; the team in its widget',
+            ],
+            [
+              'Points and rewards',
+              'None per community (karma is global)',
+              'None',
+              'Levels bots, rarely',
+              'Reputation, Cores, Awards (global)',
+              'Removed from the sidebar. Bounties and a leaderboard are not how developer communities organise; awards stay on posts.',
+            ],
+          ]}
+        />
+      </Section>
+
+      <Section eyebrow="Catalogue" title="What a page can be">
+        <Caption>
+          Grouped the way a company thinks about it. Discussions and Polls are
+          the feed and the poll post with a rule each; Rules, Releases and
+          Products are the three pages that need new work.
+        </Caption>
+        <div className="flex flex-col gap-6">
+          {pageCatalogue.map((group) => (
+            <div key={group.group} className="flex flex-col gap-3">
+              <span className="font-bold uppercase tracking-wide text-text-quaternary typo-caption2">
+                {group.group}
+              </span>
+              <div className="grid grid-cols-4 gap-3">
+                {group.items.map((item) => (
+                  <div
+                    key={item.title}
+                    className="flex flex-col gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4"
+                  >
+                    <span className="flex items-center justify-between text-text-primary">
+                      {pageIcon(item.type, IconSize.Small)}
+                      <span
+                        className={classNames(
+                          'rounded-6 px-1.5 typo-caption2',
+                          item.exists
+                            ? 'bg-background-default text-text-quaternary'
+                            : 'bg-accent-cabbage-flat text-accent-cabbage-default',
+                        )}
+                      >
+                        {item.exists ? 'Exists' : 'New'}
+                      </span>
+                    </span>
+                    <span className="font-bold text-text-primary typo-callout">
+                      {item.title}
+                    </span>
+                    <span className="text-text-tertiary typo-footnote">
+                      {item.description}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section eyebrow="The pages" title="One shell, every page type">
+        <div className="flex flex-col gap-10">
+          <Screen
+            title="Home, as a visitor"
+            note="The only page with an identity block. Join is in the sidebar; the official badge, the rules, the team, activity and links fill the column."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Visitor}
+              initialPage={findPage('home')}
+              height={48}
+            />
+          </Screen>
+          <Screen
+            title="Discussions, as an admin"
+            note="The feed with its posting rule in the strip and the same sort, layout and search row as Home. Post to Discussions lands the post in the right place without a picker."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Admin}
+              initialPage={findPage('discussions')}
+              height={44}
+            />
+          </Screen>
+          <Screen
+            title="Polls, as a member"
+            note="The production poll card, one per question. The team asks, members vote in place, the card flips to its results."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Member}
+              initialPage={findPage('polls')}
+              height={44}
+            />
+          </Screen>
+          <Screen
+            title="Releases"
+            note="The changelog as a log, not a feed: every release post grouped by month, newest first, filterable by kind. GitHub Releases' shape."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Member}
+              initialPage={findPage('releases')}
+              height={52}
+            />
+          </Screen>
+          <Screen
+            title="Products, as an admin"
+            note="Everything the company makes, imported from a Product Hunt, G2, Trustpilot, GitHub or website link, as a Product Hunt style list. The box on the right counts stacks and is the add button."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Admin}
+              initialPage={findPage('products')}
+              height={52}
+            />
+          </Screen>
+          <Screen
+            title="Rules"
+            note="Reddit's rules widget as a page: numbered, one line and the why. Shown once before a first post; moderators point at a number when they remove something."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Member}
+              initialPage={findPage('rules')}
+              height={40}
+            />
+          </Screen>
+          <Screen
+            title="FAQ, a document page"
+            note="A freeform post rendered as a page. Admins get Edit page in the bar."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Admin}
+              initialPage={findPage('faq')}
+              height={44}
+            />
+          </Screen>
+          <Screen
+            title="Followers"
+            note="Reached from the member count on Home. The team first, then everyone, with search and the newest members."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Member}
+              initialPage={findPage('members')}
+              height={40}
+            />
+          </Screen>
+          <Screen
+            title="Add a page, as an admin"
+            note="The catalogue. Pick a type, then name it and choose its section. Every + in the sidebar lands here."
+          >
+            <WorkspaceShell
+              viewer={Viewer.Admin}
+              initialPage={addPage}
+              height={44}
+            />
+          </Screen>
+        </div>
+      </Section>
+
+      <Section eyebrow="Phone" title="The column becomes a strip">
+        <Prose>
+          <p>
+            On a phone the pages column folds into a horizontal strip of chips
+            under the squad name (Home, Releases, Products, Discussions, and so
+            on, in the owner&apos;s order) and the page fills the screen. The
+            squad name opens the full list as a sheet. Nothing is lost, and the
+            owner&apos;s order decides what is visible without scrolling, the
+            same as on desktop.
+          </p>
+        </Prose>
+      </Section>
+
+      <Section eyebrow="Build order" title="What to build first">
+        <Table
+          head={['Step', 'What', 'Why first']}
+          rows={[
+            [
+              '1',
+              'The pages column with Home, Discussions, FAQ (a document) and Links. Sections, order, hide.',
+              'Every one of these is an existing primitive: the feed, a freeform post, a URL. The column is the whole shift; the pages are already here.',
+            ],
+            [
+              '2',
+              'The official badge, Add a page, Preview as, page settings.',
+              'Turns the column from a layout into a product the owner shapes. This is what a verified company page is sold on.',
+            ],
+            [
+              '3',
+              'Polls and Rules as pages.',
+              'The poll post already exists; Rules is a page type with a widget on Home.',
+            ],
+            [
+              '4',
+              'Releases and Products.',
+              'Releases is a flair on a post plus a grouped view; Products needs the import and the stack link.',
+            ],
+          ]}
+        />
+      </Section>
+
+      <Section
+        eyebrow="Recommendation"
+        title="Do this, and take the tiles with it"
+      >
+        <Prose>
+          <p>
+            This is the direction. It is simpler than any of the eight layouts
+            before it because the page stops trying to be everything at once:
+            the sidebar is the table of contents and each page does one thing.
+            It is what X and Reddit feel like to use and what Whop lets an owner
+            build, and it fits daily.dev&apos;s v2 shell without moving anything
+            that exists.
+          </p>
+          <p>
+            Round two is not wasted. The tiles become the Home page&apos;s
+            optional strip (Activity, Top this week, Team) for squads that want
+            them, and the Shelf is how they collapse on a phone. Everything else
+            from rounds one and two can be retired.
+          </p>
+        </Prose>
+      </Section>
+    </Page>
+  ),
+};
+
+const Full = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="flex min-h-screen items-start justify-center bg-background-subtle p-8">
+    <KitStyles />
+    <WorkspaceStyles />
+    {children}
+  </div>
+);
+
+export const Playground: StoryObj<{
+  viewer: Viewer;
+  page: string;
+  source: ContentSource;
+  empty: boolean;
+  isPrivate: boolean;
+  featured: boolean;
+  memberPostingRole: MemberRole;
+  postingGate: PostingGate;
+  viewerReputation: number;
+  memberInviteRole: MemberRole;
+  campaign: boolean;
+  slack: boolean;
+  ownPending: number;
+}> = {
+  args: {
+    viewer: Viewer.Member,
+    page: 'home',
+    source: ContentSource.Feed,
+    empty: false,
+    isPrivate: false,
+    featured: false,
+    memberPostingRole: MemberRole.Member,
+    postingGate: PostingGate.Moderation,
+    viewerReputation: 1200,
+    memberInviteRole: MemberRole.Member,
+    campaign: false,
+    slack: false,
+    ownPending: 0,
+  },
+  argTypes: {
+    viewer: {
+      control: 'inline-radio' as const,
+      options: Object.values(Viewer),
+    },
+    page: {
+      control: 'select' as const,
+      options: [...allPages.map((page) => page.id), 'add'],
+    },
+    source: {
+      control: 'inline-radio' as const,
+      options: [ContentSource.Feed, ContentSource.Manual],
+    },
+    memberPostingRole: {
+      control: 'inline-radio' as const,
+      options: Object.values(MemberRole),
+    },
+    postingGate: {
+      control: 'inline-radio' as const,
+      options: Object.values(PostingGate),
+    },
+    memberInviteRole: {
+      control: 'inline-radio' as const,
+      options: Object.values(MemberRole),
+    },
+  },
+  render: (args) => (
+    <Full>
+      <WorkspaceShell
+        key={JSON.stringify(args)}
+        viewer={args.viewer}
+        source={args.source}
+        empty={args.empty}
+        isPrivate={args.isPrivate}
+        config={{
+          featured: args.featured,
+          memberPostingRole: args.memberPostingRole,
+          postingGate: args.postingGate,
+          viewerReputation: args.viewerReputation,
+          memberInviteRole: args.memberInviteRole,
+          campaign: args.campaign,
+          slack: args.slack,
+          ownPending: args.ownPending,
+        }}
+        initialPage={args.page === 'add' ? addPage : findPage(args.page)}
+        height={60}
+      />
+    </Full>
+  ),
+};
+
+export const ProfileOnNewFrame: StoryObj<{
+  isOwner: boolean;
+  tab: ProfileTab;
+}> = {
+  args: { isOwner: false, tab: ProfileTab.Activity },
+  argTypes: {
+    tab: {
+      control: 'inline-radio' as const,
+      options: [ProfileTab.Activity, ProfileTab.About],
+    },
+  },
+  render: (args) => (
+    <Full>
+      <div className="w-[72rem] max-w-full overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-default">
+        <ProfileHome
+          key={`${args.isOwner}-${args.tab}`}
+          isOwner={args.isOwner}
+          initialTab={args.tab}
+        />
+      </div>
+    </Full>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/archive/chipPages.tsx b/packages/storybook/stories/squad-page/archive/chipPages.tsx
new file mode 100644
index 00000000000..a85463e7307
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/chipPages.tsx
@@ -0,0 +1,197 @@
+import type { ReactElement } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  DiscussIcon,
+  MegaphoneIcon,
+  PlusIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { entriesByMonth, formatDay, polls, squad, team } from '../data';
+import { Avatar, isAdmin, isJoined, isStaff, Viewer } from '../kit';
+import { PollList } from '@dailydotdev/shared/src/components/cards/poll/PollList';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { ContentSource, useWorkspace } from '../state';
+import { cardHandlers, Column, hidden, toPollPost } from '../workspace';
+
+// The Releases and Polls chips' pages, from before the feed dropped its
+// chips. Only the archived Navigation picks render them.
+
+/**
+ * The changelog as a log, not a feed: GitHub Releases' shape. Every post
+ * flaired as a release lands here grouped by month, newest first, with the
+ * kind as a filter. The Announcements channel is where they are discussed;
+ * this is where they are found.
+ */
+export const ReleasesPage = ({
+  viewer,
+  bare,
+}: {
+  viewer: Viewer;
+  bare?: boolean;
+}): ReactElement => {
+  const { source, empty } = useWorkspace();
+
+  return (
+    <Column width="max-w-[52rem]" bare={bare} className="gap-6">
+      {source === ContentSource.Feed && (
+        <div className="flex items-center gap-3 rounded-12 bg-surface-float px-4 py-2.5 text-text-tertiary typo-footnote">
+          <MegaphoneIcon size={IconSize.Small} />
+          <span className="min-w-0 flex-1">
+            Published from the company&apos;s feed,{' '}
+            <span className="break-all text-text-secondary">
+              {squad.feedUrl}
+            </span>
+            . Every item becomes a post here the hour it goes live.
+          </span>
+          <span className="sq-nums hidden shrink-0 text-text-quaternary typo-caption1 tablet:inline">
+            Synced 2h ago
+          </span>
+        </div>
+      )}
+      {empty && (
+        <div className="flex flex-col items-center gap-2 rounded-16 border border-dashed border-border-subtlest-secondary px-6 py-12 text-center">
+          <span className="font-bold text-text-primary typo-callout">
+            No releases yet
+          </span>
+          <span className="max-w-[40ch] text-text-tertiary typo-footnote">
+            {source === ContentSource.Feed
+              ? 'The feed is connected. The first item lands here the hour it is published.'
+              : 'Post the first release and it starts the log.'}
+          </span>
+        </div>
+      )}
+      {((isStaff(viewer) && source === ContentSource.Manual) ||
+        (isAdmin(viewer) && source === ContentSource.Feed)) && (
+        <div className="flex justify-end">
+          {source === ContentSource.Manual ? (
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Small}
+              icon={<PlusIcon />}
+            >
+              New release
+            </Button>
+          ) : (
+            <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+              Feed settings
+            </Button>
+          )}
+        </div>
+      )}
+      <ol className={classNames('flex flex-col gap-6', empty && 'hidden')}>
+        {entriesByMonth
+          .flatMap((group) => group.items)
+          .map((entry) => (
+            <li key={entry.id} className="group flex gap-4">
+              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+                <span className="font-bold text-text-primary typo-callout">
+                  {entry.title}
+                </span>
+                <p className="line-clamp-2 text-text-secondary typo-footnote">
+                  {entry.summary}
+                </p>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-text-quaternary typo-caption1">
+                  <time className="sq-nums">{formatDay(entry.createdAt)}</time>
+                  <span className="flex items-center gap-1.5">
+                    <Avatar member={entry.author} size={1} />
+                    {entry.author.name}
+                  </span>
+                  <span className="sq-nums flex items-center gap-3">
+                    <span className="flex items-center gap-1">
+                      <UpvoteIcon size={IconSize.XSmall} />
+                      {entry.upvotes}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <DiscussIcon size={IconSize.XSmall} />
+                      {entry.comments}
+                    </span>
+                  </span>
+                </div>
+              </div>
+              {entry.image && (
+                <img
+                  src={entry.image}
+                  alt=""
+                  className="h-16 w-24 shrink-0 rounded-12 object-cover tablet:h-20 tablet:w-32"
+                />
+              )}
+            </li>
+          ))}
+      </ol>
+    </Column>
+  );
+};
+
+/**
+ * Polls, on the production poll card. The company asks, members vote in
+ * place, the card flips to its results. The click is caught before the
+ * card's own vote mutation so the story stays offline.
+ */
+export const PollsPage = ({
+  viewer,
+  bare,
+}: {
+  viewer: Viewer;
+  bare?: boolean;
+}): ReactElement => {
+  const [votes, setVotes] = useState<Record<string, number>>({});
+
+  return (
+    <Column bare={bare} className="gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <span className="min-w-0 flex-1 basis-56 text-text-tertiary typo-footnote">
+          What the team wants to know from you. One vote each, results when you
+          vote.
+        </span>
+        {isStaff(viewer) ? (
+          <Button
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            New poll
+          </Button>
+        ) : (
+          <span className="sq-nums shrink-0 text-text-quaternary typo-caption1">
+            {polls.length} open
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col gap-4">
+        {polls.map((poll) => {
+          const picked = votes[poll.id];
+
+          return (
+            <div
+              key={poll.id}
+              onClickCapture={(event) => {
+                if (picked !== undefined || !isJoined(viewer)) {
+                  return;
+                }
+                const option = (event.target as HTMLElement)
+                  .closest('button')
+                  ?.textContent?.trim();
+                const index = poll.options.indexOf(option ?? '');
+                if (index === -1) {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                setVotes((current) => ({ ...current, [poll.id]: index }));
+              }}
+            >
+              <PollList post={toPollPost(poll, picked)} {...cardHandlers} />
+            </div>
+          );
+        })}
+      </div>
+    </Column>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/archive/navigation.tsx b/packages/storybook/stories/squad-page/archive/navigation.tsx
new file mode 100644
index 00000000000..6eeb99367c6
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/navigation.tsx
@@ -0,0 +1,548 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  ArrowIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+  feedEntries,
+  formatCount,
+  pinnedEntry,
+  polls,
+  products,
+  squad,
+} from '../data';
+import {
+  Avatar,
+  CardList,
+  isBlocked,
+  isJoined,
+  isLoggedIn,
+  Viewer,
+} from '../kit';
+import { Kit2Styles } from '../kit2';
+import { PostsArea, SquadComposer, SquadHeader, SquadWidgets } from '../home';
+import type { SquadPage } from '../workspace';
+import { PollsPage, ReleasesPage } from './chipPages';
+import {
+  AnalyticsPage,
+  ChannelPage,
+  channels,
+  common,
+  ContentSource,
+  defaultConfig,
+  docs,
+  DocPage,
+  FeedSourcePage,
+  manage,
+  MembersPage,
+  ModerationPage,
+  ProductsPage,
+  Rail,
+  RulesPage,
+  SettingsPage,
+  useWorkspace,
+  WorkspaceContext,
+  WorkspaceStyles,
+} from '../workspace';
+
+// The squad's left column is gone. The profile header and the profile's
+// right column (Verified company page, Rules, Team, Stack and tools,
+// Overview, Links) stay exactly as they are. What the column carried
+// besides those, the pages (Home, Releases, Products, Discussions, Polls)
+// and the team's Manage section, has to live in the header or the centre.
+// Ten ways to do that, one idea each, all on the same base.
+
+/* ------------------------------------------------------------------ model */
+
+export enum Nav {
+  Chips = 'chips',
+  Shelves = 'shelves',
+}
+
+export interface NavSpec {
+  id: Nav;
+  title: string;
+  after: string;
+  idea: string;
+  costs: string;
+}
+
+export const specs: NavSpec[] = [
+  {
+    id: Nav.Chips,
+    title: 'Chips',
+    after: 'Threads and Bluesky feed switches',
+    idea: 'One feed. Chips on the toolbar filter it by kind: All, Releases, Discussions, Polls. Products is a chip too, and swaps the body for the catalogue.',
+    costs:
+      'Releases lose their log shape, and a chip is a filter that has to act like a page for Products.',
+  },
+  {
+    id: Nav.Shelves,
+    title: 'Shelves',
+    after: 'YouTube channel Home, Patreon Home',
+    idea: 'Home is a stack of shelves: the latest release, the products, the open poll, the latest posts, each with See all. A page opens over Home with a back button.',
+    costs: 'The feed no longer dominates Home; it starts one click away.',
+  },
+];
+
+interface View {
+  viewer: Viewer;
+  active: string;
+  onSelect: (id: string) => void;
+}
+
+const pages: SquadPage[] = [
+  common.home,
+  common.releases,
+  common.products,
+  channels.discussions,
+  channels.polls,
+];
+
+/* ------------------------------------------------------------- furniture */
+
+export const FollowButton = ({
+  viewer,
+  size = ButtonSize.Small,
+}: {
+  viewer: Viewer;
+  size?: ButtonSize;
+}): ReactElement => {
+  const { config } = useWorkspace();
+
+  if (isJoined(viewer)) {
+    return (
+      <Button variant={ButtonVariant.Subtle} size={size}>
+        Following
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant={ButtonVariant.Primary}
+      size={size}
+      disabled={isBlocked(viewer) || !config.isPublic}
+    >
+      {!config.isPublic
+        ? 'Invite only'
+        : isLoggedIn(viewer)
+        ? 'Follow'
+        : 'Sign up to follow'}
+    </Button>
+  );
+};
+
+/** The profile header; the team's pages open from its options menu. */
+const Header = ({ viewer, onSelect }: View): ReactElement => (
+  <SquadHeader
+    viewer={viewer}
+    standalone
+    onOpenMembers={() => onSelect('members')}
+    onManage={onSelect}
+  />
+);
+
+/** The profile's right column, untouched. */
+const Widgets = ({ viewer, onSelect }: View): ReactElement => (
+  <SquadWidgets
+    viewer={viewer}
+    onOpenRules={() => onSelect('rules')}
+    onOpenFaq={() => onSelect('faq')}
+  />
+);
+
+const Frame = ({
+  children,
+  aside,
+  before,
+  after,
+}: {
+  children: ReactNode;
+  aside: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+}): ReactElement => (
+  <div className="m-auto flex w-full max-w-[72rem] gap-4 p-4 pb-6">
+    {before}
+    <main className="flex min-w-0 flex-1 flex-col">
+      <div className="rounded-16 border border-border-subtlest-tertiary">
+        {children}
+      </div>
+      {after}
+    </main>
+    <aside className="flex w-80 shrink-0 flex-col gap-4">{aside}</aside>
+  </div>
+);
+
+const Posts = ({
+  viewer,
+  entries = feedEntries.slice(0, 6),
+  pinned = pinnedEntry,
+  toolbarChildren,
+}: {
+  viewer: Viewer;
+  entries?: typeof feedEntries;
+  pinned?: typeof pinnedEntry;
+  toolbarChildren?: ReactNode;
+}): ReactElement => (
+  <PostsArea
+    sort="Latest"
+    entries={entries}
+    pinned={pinned}
+    composer={<SquadComposer viewer={viewer} />}
+    toolbarChildren={toolbarChildren}
+  />
+);
+
+const Body = ({ id, viewer }: { id: string; viewer: Viewer }): ReactElement => {
+  switch (id) {
+    case 'home':
+      return <Posts viewer={viewer} />;
+    case 'releases':
+      return <ReleasesPage viewer={viewer} />;
+    case 'products':
+      return <ProductsPage viewer={viewer} />;
+    case 'discussions':
+      return <ChannelPage page={channels.discussions} viewer={viewer} />;
+    case 'polls':
+      return <PollsPage viewer={viewer} />;
+    case 'rules':
+      return <RulesPage />;
+    case 'faq':
+      return <DocPage page={docs.faq} />;
+    case 'members':
+      return <MembersPage viewer={viewer} />;
+    case 'moderation':
+      return <ModerationPage />;
+    case 'feed':
+      return <FeedSourcePage />;
+    case 'analytics':
+      return <AnalyticsPage />;
+    case 'settings':
+      return <SettingsPage />;
+    default:
+      return <Posts viewer={viewer} />;
+  }
+};
+
+const titles: Record<string, string> = {
+  rules: 'Rules',
+  faq: 'FAQ',
+  members: 'Followers',
+  moderation: 'Moderation',
+  feed: 'Content feed',
+  analytics: 'Analytics',
+  settings: 'Settings',
+};
+
+/** A page that opened over the centre, and the way back. */
+const Over = ({
+  id,
+  onBack,
+  children,
+}: {
+  id: string;
+  onBack: () => void;
+  children: ReactNode;
+}): ReactElement => (
+  <>
+    <div className="flex h-12 items-center gap-2 border-t border-border-subtlest-tertiary px-4">
+      <Button
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        icon={<ArrowIcon className="-rotate-90" />}
+        aria-label="Back"
+        onClick={onBack}
+      />
+      <span className="font-bold text-text-primary typo-callout">
+        {titles[id] ?? id}
+      </span>
+    </div>
+    {children}
+  </>
+);
+
+/* ---------------------------------------------------------------- 01 tabs */
+
+const chips = [
+  { id: 'home', label: 'All' },
+  { id: 'releases', label: 'Releases' },
+  { id: 'discussions', label: 'Discussions' },
+  { id: 'polls', label: 'Polls' },
+  { id: 'products', label: 'Products' },
+];
+
+const releaseEntries = feedEntries.filter((_, index) => index % 3 !== 2);
+const discussionEntries = feedEntries.filter((_, index) => index % 3 === 2);
+
+const ChipRow = ({ active, onSelect }: Omit<View, 'viewer'>): ReactElement => (
+  <div className="flex items-center gap-1">
+    {chips.map((chip) => (
+      <button
+        key={chip.id}
+        type="button"
+        onClick={() => onSelect(chip.id)}
+        className={classNames(
+          'rounded-[999px] px-3 py-1 typo-callout transition-colors',
+          active === chip.id
+            ? 'bg-text-primary font-bold text-background-default'
+            : 'bg-surface-float text-text-secondary hover:text-text-primary',
+        )}
+      >
+        {chip.label}
+      </button>
+    ))}
+  </div>
+);
+
+const ChipsView = (view: View): ReactElement => {
+  const { viewer, active, onSelect } = view;
+  const row = <ChipRow active={active} onSelect={onSelect} />;
+  const centre = (): ReactElement => {
+    switch (active) {
+      case 'releases':
+        return (
+          <Posts
+            viewer={viewer}
+            entries={releaseEntries.slice(0, 6)}
+            pinned={undefined}
+            toolbarChildren={row}
+          />
+        );
+      case 'discussions':
+        return (
+          <Posts
+            viewer={viewer}
+            entries={discussionEntries.slice(0, 6)}
+            pinned={undefined}
+            toolbarChildren={row}
+          />
+        );
+      case 'polls':
+        return (
+          <div className="flex flex-col gap-4 p-6 pb-0">
+            <div className="flex items-center gap-2">{row}</div>
+            <PollsPage viewer={viewer} />
+          </div>
+        );
+      case 'products':
+        return (
+          <div className="flex flex-col gap-4 p-6 pb-0">
+            <div className="flex items-center gap-2">{row}</div>
+            <ProductsPage viewer={viewer} />
+          </div>
+        );
+      case 'home':
+        return <Posts viewer={viewer} toolbarChildren={row} />;
+      default:
+        return (
+          <Over id={active} onBack={() => onSelect('home')}>
+            <Body id={active} viewer={viewer} />
+          </Over>
+        );
+    }
+  };
+
+  return (
+    <Frame aside={<Widgets {...view} />}>
+      <Header {...view} />
+      <div className="border-t border-border-subtlest-tertiary">{centre()}</div>
+    </Frame>
+  );
+};
+
+/* ------------------------------------------------------------- 10 shelves */
+
+const Shelf = ({
+  title,
+  count,
+  onOpen,
+  children,
+}: {
+  title: string;
+  count?: number;
+  onOpen: () => void;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-3">
+    <div className="flex items-center justify-between">
+      <span className="font-bold text-text-primary typo-body">{title}</span>
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.XSmall}
+        icon={<ArrowIcon size={IconSize.Size16} className="rotate-90" />}
+        iconPosition={ButtonIconPosition.Right}
+        onClick={onOpen}
+      >
+        See all{count ? ` ${count}` : ''}
+      </Button>
+    </div>
+    {children}
+  </section>
+);
+
+const latestRelease =
+  feedEntries.find((entry) => entry.image === null) ?? feedEntries[0];
+const poll = polls[0];
+
+const ShelvesHome = ({ viewer, onSelect }: View): ReactElement => (
+  <div className="flex flex-col gap-8 p-6">
+    <SquadComposer viewer={viewer} />
+    <Shelf title="Latest release" onOpen={() => onSelect('releases')}>
+      <CardList entries={[latestRelease]} />
+    </Shelf>
+    <Shelf
+      title="Products"
+      count={products.length}
+      onOpen={() => onSelect('products')}
+    >
+      <ul className="grid grid-cols-3 gap-3">
+        {products.slice(0, 3).map((product) => (
+          <li
+            key={product.id}
+            className="flex flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3"
+          >
+            <img
+              src={product.image}
+              alt=""
+              className="size-9 rounded-10 object-cover"
+            />
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {product.name}
+            </span>
+            <span className="line-clamp-2 text-text-tertiary typo-footnote">
+              {product.tagline}
+            </span>
+            <span className="sq-nums mt-auto flex items-center gap-0.5 text-text-quaternary typo-caption1">
+              <UpvoteIcon size={IconSize.XSmall} />
+              {formatCount(product.inStacks)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </Shelf>
+    <Shelf title="Open poll" onOpen={() => onSelect('polls')}>
+      <div className="flex flex-col gap-3 rounded-16 border border-border-subtlest-tertiary p-4">
+        <div className="flex items-center gap-2 text-text-tertiary typo-footnote">
+          <Avatar member={poll.author} size={1.25} />
+          {poll.author.name} asks
+        </div>
+        <span className="font-bold text-text-primary typo-body">
+          {poll.question}
+        </span>
+        <div className="flex flex-col gap-1.5">
+          {poll.options.map((option, index) => (
+            <div
+              key={option}
+              className="relative flex items-center justify-between overflow-hidden rounded-10 border border-border-subtlest-tertiary px-3 py-1.5 typo-footnote"
+            >
+              <span
+                className="absolute inset-y-0 left-0 bg-accent-cabbage-flat"
+                style={{ width: `${poll.split[index]}%` }}
+              />
+              <span className="relative text-text-primary">{option}</span>
+              <span className="sq-nums relative text-text-tertiary">
+                {poll.split[index]}%
+              </span>
+            </div>
+          ))}
+        </div>
+        <span className="sq-nums text-text-quaternary typo-caption1">
+          {poll.votes.toLocaleString()} votes
+        </span>
+      </div>
+    </Shelf>
+    <Shelf title="Latest posts" onOpen={() => onSelect('posts')}>
+      <CardList entries={feedEntries.slice(0, 3)} />
+    </Shelf>
+  </div>
+);
+
+const ShelvesView = (view: View): ReactElement => {
+  const { viewer, active, onSelect } = view;
+
+  return (
+    <Frame aside={<Widgets {...view} />}>
+      <Header {...view} />
+      <div className="border-t border-border-subtlest-tertiary">
+        {active === 'home' ? (
+          <ShelvesHome {...view} />
+        ) : (
+          <Over
+            id={active === 'posts' ? 'home' : active}
+            onBack={() => onSelect('home')}
+          >
+            <Body id={active === 'posts' ? 'home' : active} viewer={viewer} />
+          </Over>
+        )}
+      </div>
+    </Frame>
+  );
+};
+
+/* ---------------------------------------------------------------- shell */
+
+const viewsByNav: Record<Nav, (view: View) => ReactElement> = {
+  [Nav.Chips]: ChipsView,
+  [Nav.Shelves]: ShelvesView,
+};
+
+export const navPageIds = [
+  ...pages.map((page) => page.id),
+  'rules',
+  'faq',
+  'members',
+  ...manage.pages.map((page) => page.id),
+];
+
+export const NavShell = ({
+  nav,
+  viewer = Viewer.Visitor,
+  initialPage = 'home',
+  height = 48,
+  width = 1440,
+}: {
+  nav: Nav;
+  viewer?: Viewer;
+  initialPage?: string;
+  /** rem */
+  height?: number;
+  width?: number;
+}): ReactElement => {
+  const [active, setActive] = useState(initialPage);
+  const View = viewsByNav[nav];
+
+  return (
+    <WorkspaceContext.Provider
+      value={{
+        viewer,
+        source: ContentSource.Feed,
+        empty: false,
+        isPrivate: false,
+        config: defaultConfig,
+      }}
+    >
+      <div
+        style={{ width, maxWidth: '100%', height: `${height}rem` }}
+        className="sq-elevated flex overflow-hidden rounded-16 bg-background-default text-text-primary"
+      >
+        <WorkspaceStyles />
+        <Kit2Styles />
+        <Rail />
+        <main className="ws-scroll flex min-w-0 flex-1 flex-col overflow-y-auto">
+          <View viewer={viewer} active={active} onSelect={setActive} />
+        </main>
+      </div>
+    </WorkspaceContext.Provider>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/archive/profile.tsx b/packages/storybook/stories/squad-page/archive/profile.tsx
new file mode 100644
index 00000000000..a1950d75ff8
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/profile.tsx
@@ -0,0 +1,461 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  DevPlusIcon,
+  EditIcon,
+  GitHubIcon,
+  LinkIcon,
+  LinkedInIcon,
+  MenuIcon,
+  ReputationIcon,
+  TwitterIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import type { Entry } from '../data';
+import { feedEntries, formatCount, team } from '../data';
+import {
+  HomeFrame,
+  PostsArea,
+  SectionTitle,
+  Separator,
+  Tile,
+  Widget,
+} from '../home';
+
+// The profile page, rebuilt on the same frame as the squad Home, with the
+// same change: Activity becomes the Posts tab and is the page; the CV and
+// the readme move under About. Tsahi's public profile, as fetched on
+// 16 Sep 2026; the counts that need a session are the ones on the live page.
+
+const user = {
+  name: 'Tsahi Matsliah',
+  username: 'tsahimatsliah',
+  bio: 'Co-Founder, CDO at daily.dev, Designing this platform',
+  image:
+    'https://media.daily.dev/image/upload/s--k80T3WJe--/f_auto,q_auto/v1703793130/avatars/avatar_5e0af68445e04c02b0656c3530664aff',
+  cover:
+    'https://media.daily.dev/image/upload/s--3rJakxg8--/f_auto,q_auto/v1703792493/covers/cover_5e0af68445e04c02b0656c3530664aff',
+  company: {
+    name: 'daily.dev',
+    image:
+      'https://daily-now-res.cloudinary.com/image/upload/s--MASZOhnv--/f_auto/v1614088267/landing/Daily.dev_logo',
+  },
+  joined: 'May 25. 2020',
+  reputation: 3980,
+  upvotes: 534,
+  followers: 52,
+  following: 12,
+  posts: 38,
+};
+
+const author = team[2];
+const posts: Entry[] = feedEntries.map((entry) => ({ ...entry, author }));
+
+const ProfileHeader = ({ isOwner }: { isOwner: boolean }): ReactElement => (
+  <div className="relative w-full overflow-hidden rounded-t-16">
+    <div className="h-36">
+      <img
+        src={user.cover}
+        alt="Cover"
+        className="h-full w-full object-cover"
+      />
+    </div>
+    <img
+      src={user.image}
+      alt="Avatar"
+      className="absolute left-6 top-16 h-[7.5rem] w-[7.5rem] rounded-16 object-cover"
+    />
+    <div className="flex flex-col gap-3 px-6">
+      <div className="mb-4 ml-auto mt-2 flex items-center gap-2">
+        <Button
+          className={classNames('text-text-secondary', !isOwner && 'invisible')}
+          variant={ButtonVariant.Float}
+          icon={<EditIcon />}
+          aria-label="Edit profile"
+        />
+        <div className="flex items-center rounded-12 bg-surface-float p-0.5 typo-footnote">
+          <span className="rounded-10 bg-background-default px-3 py-1 font-bold text-text-primary">
+            Professional side
+          </span>
+          <span className="px-3 py-1 text-text-tertiary">Fun side</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-1">
+        <span className="font-bold typo-title2">{user.name}</span>
+        <DevPlusIcon
+          className="text-action-plus-default"
+          size={IconSize.Size16}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="typo-body">{user.bio}</span>
+        <div className="flex items-center text-text-secondary typo-subhead">
+          <span className="flex items-center gap-1">
+            <img src={user.company.image} alt="" className="size-4 rounded-4" />
+            {user.company.name}
+          </span>
+        </div>
+        <div className="flex items-center text-text-secondary typo-subhead">
+          <span>@{user.username}</span>
+          <Separator />
+          <span>Joined {user.joined}</span>
+        </div>
+        {!isOwner && (
+          <div className="flex items-center gap-2">
+            <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+              Follow
+            </Button>
+            <Button
+              variant={ButtonVariant.Float}
+              size={ButtonSize.Small}
+              icon={<MenuIcon />}
+              aria-label="More"
+            />
+          </div>
+        )}
+        <div className="-ml-1 grid w-fit grid-cols-[auto_auto] gap-x-2 gap-y-1 text-text-tertiary typo-footnote">
+          <div className="flex">
+            <ReputationIcon
+              className="text-accent-onion-default"
+              size={IconSize.Small}
+            />
+            <span className="flex items-center gap-1">
+              <b className="text-text-primary typo-subhead">
+                {formatCount(user.reputation)}
+              </b>
+              Reputation
+            </span>
+          </div>
+          <span className="flex items-center gap-1">
+            <b className="text-text-primary typo-subhead">{user.upvotes}</b>
+            Upvotes
+          </span>
+          <span className="flex items-center gap-1 pl-6">
+            <b className="text-text-primary typo-subhead">{user.followers}</b>
+            Followers
+          </span>
+          <span className="flex items-center gap-1">
+            <b className="text-text-primary typo-subhead">{user.following}</b>
+            Following
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const AboutMe = (): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle>About me</SectionTitle>
+    <div className="flex flex-wrap items-center gap-2">
+      {[
+        <GitHubIcon key="gh" size={IconSize.XSmall} />,
+        <LinkedInIcon key="li" size={IconSize.XSmall} />,
+        <TwitterIcon key="x" size={IconSize.XSmall} />,
+        <LinkIcon key="link" size={IconSize.XSmall} />,
+      ].map((icon, index) => (
+        <Button
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          variant={ButtonVariant.Subtle}
+          size={ButtonSize.Small}
+          icon={icon}
+        />
+      ))}
+    </div>
+    <div className="flex flex-col gap-3 text-text-primary typo-body">
+      <p className="font-bold">Hello Dev World! 👋</p>
+      <p>
+        I&apos;m <b>Tsahi Matsliah</b>, the UX maestro behind the scenes at
+        daily.dev. 🎨 As a <b>co-founder and Chief Design Officer</b>, I&apos;m
+        not just crafting pixels. I make sure your daily.dev journey is smooth,
+        cool, and exactly how you need it.
+      </p>
+      <p>My main focus at daily.dev</p>
+      <p>
+        <b>🌈 Easy Peasy Designs:</b> Making sure daily.dev is simple to use and
+        looks great.
+      </p>
+      <p>
+        <b>🧠 Dev-Focused Thinking:</b> Every cool feature is made with you, the
+        devs, in mind.
+      </p>
+      <p>
+        <b>💪 Keep Improving:</b> Always working to make daily.dev better based
+        on what you tell us.
+      </p>
+    </div>
+  </div>
+);
+
+const experiences = [
+  {
+    title: 'CDO and Co-Founder',
+    company: 'daily.dev',
+    when: 'Aug 2020',
+    tags: ['Current', 'Verified'],
+  },
+  {
+    title: 'Professional Freelancer',
+    company: 'TsDesign',
+    when: 'Jan 2007 · Tel Aviv-Yafo, Israel',
+    tags: ['Current'],
+  },
+  {
+    title: 'Co-Founder | Chief Design Officer',
+    company: 'The Elegant Monkeys Ltd.',
+    when: 'Jul 2013 - Jul 2020 · Tel Aviv-Yafo, Israel',
+    tags: [],
+  },
+];
+
+const Experiences = (): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle>Work experiences</SectionTitle>
+    <div className="flex flex-col gap-4">
+      {experiences.map((job) => (
+        <div key={job.title} className="flex gap-3">
+          <span className="flex size-8 shrink-0 items-center justify-center rounded-8 bg-surface-float text-text-tertiary typo-caption1">
+            {job.company[0]}
+          </span>
+          <div className="flex flex-col gap-1">
+            <span className="flex items-center gap-2">
+              <span className="font-bold text-text-primary typo-callout">
+                {job.title}
+              </span>
+              {job.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className={classNames(
+                    'rounded-6 px-1.5 typo-caption2',
+                    tag === 'Verified'
+                      ? 'bg-accent-avocado-flat text-accent-avocado-default'
+                      : 'bg-surface-float text-text-tertiary',
+                  )}
+                >
+                  {tag}
+                </span>
+              ))}
+            </span>
+            <span className="text-text-tertiary typo-footnote">
+              {job.company}
+            </span>
+            <span className="text-text-quaternary typo-footnote">
+              {job.when}
+            </span>
+            <div className="mt-1 flex gap-2">
+              {[
+                'Photoshop',
+                'User Interface Design',
+                'Mobile Applications',
+              ].map((skill) => (
+                <span
+                  key={skill}
+                  className="rounded-8 border border-border-subtlest-tertiary px-2 py-0.5 text-text-secondary typo-caption1"
+                >
+                  {skill}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const readingTags = [
+  ['AI Agents', 29],
+  ['AI Coding', 26],
+  ['Architecture', 25],
+  ['Career', 25],
+  ['Open Source', 23],
+  ['Rust', 19],
+] as const;
+
+const ReadingOverview = (): ReactElement => (
+  <Widget title="Reading Overview">
+    <span className="text-text-link typo-footnote">Learn more</span>
+    <div className="my-3 grid grid-cols-2 gap-2">
+      <Tile value="19" label="Longest streak 🏆" />
+      <Tile value="907" label="Total reading days" />
+    </div>
+    <span className="text-text-tertiary typo-subhead">
+      Top tags by reading days
+    </span>
+    <div className="my-3 grid grid-cols-2 gap-2">
+      {readingTags.map(([tag, share]) => (
+        <div
+          key={tag}
+          className="relative flex justify-between overflow-hidden rounded-6 border border-border-subtlest-tertiary px-2 typo-caption1"
+        >
+          <span
+            className="absolute bottom-0 left-0 top-0 bg-action-share-default opacity-40"
+            style={{ width: `${share * 2}%` }}
+          />
+          <span className="relative z-1 my-auto text-text-primary">{tag}</span>
+          <span className="relative z-1 my-auto text-text-secondary">
+            +{share}%
+          </span>
+        </div>
+      ))}
+    </div>
+    <span className="text-text-tertiary typo-subhead">
+      Posts read in the last months (597)
+    </span>
+    <div className="mt-3 flex gap-0.5">
+      {Array.from({ length: 26 }, (_, week) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={week} className="flex flex-col gap-0.5">
+          {Array.from({ length: 7 }, (_, day) => {
+            const level = (week * 3 + day * 5) % 7;
+            return (
+              <span
+                // eslint-disable-next-line react/no-array-index-key
+                key={day}
+                className={classNames(
+                  'size-2 rounded-6',
+                  level < 2 && 'border border-border-subtlest-quaternary',
+                  level >= 2 && level < 5 && 'bg-text-disabled',
+                  level >= 5 && 'bg-text-primary',
+                )}
+              />
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  </Widget>
+);
+
+const squads = [
+  ['daily.dev World', '@dailydevworld', '10.2K members'],
+  ['daily.dev Changelog', '@daily_updates', '11.5K members'],
+  ['Devs with ADHD', '@clariti', '1.2K members'],
+  ['All Frontend', '@allfrontend', '3.2K members'],
+  ['Webflow', '@webflow', '42 members'],
+];
+
+const ActiveSquads = (): ReactElement => (
+  <Widget title="Active in these Squads">
+    <ul className="mt-4 flex flex-col gap-2">
+      {squads.map(([name, handle, members]) => (
+        <li key={handle} className="flex items-center gap-2">
+          <span className="size-8 shrink-0 rounded-full bg-surface-hover" />
+          <div className="flex min-w-0 flex-col">
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {name}
+            </span>
+            <span className="text-text-tertiary typo-footnote">{handle}</span>
+            <span className="text-text-tertiary typo-footnote">{members}</span>
+          </div>
+        </li>
+      ))}
+    </ul>
+    <div className="mt-auto pt-3">
+      <Button
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        className="w-full"
+      >
+        Show all Squads
+      </Button>
+    </div>
+  </Widget>
+);
+
+const Badges = (): ReactElement => (
+  <Widget title="Badges & Awards">
+    <span className="text-text-link typo-footnote">Learn more</span>
+    <div className="my-3 grid grid-cols-2 gap-2">
+      <Tile value="x8" label="Top reader badge" />
+      <Tile value="x0" label="Total Awards" />
+    </div>
+    <ul className="flex flex-col gap-2">
+      {[
+        ['cuda', 'August 2026'],
+        ['opencode', 'July 2026'],
+        ['wwdc', 'June 2026'],
+        ['ios', 'April 2026'],
+      ].map(([tag, date]) => (
+        <li key={tag} className="flex items-center justify-between">
+          <span className="rounded-6 bg-surface-float px-1.5 py-0.5 text-text-primary typo-caption1">
+            {tag}
+          </span>
+          <span className="text-text-quaternary typo-caption1">{date}</span>
+        </li>
+      ))}
+    </ul>
+  </Widget>
+);
+
+export enum ProfileTab {
+  Activity = 'activity',
+  About = 'about',
+}
+
+const profileTabs = [
+  { id: ProfileTab.Activity, label: 'Activity', count: user.posts },
+  { id: ProfileTab.About, label: 'About' },
+];
+
+export const ProfileHome = ({
+  isOwner = false,
+  initialTab = ProfileTab.Activity,
+}: {
+  isOwner?: boolean;
+  initialTab?: ProfileTab;
+}): ReactElement => {
+  const [tab, setTab] = useState<ProfileTab>(initialTab);
+
+  return (
+    <HomeFrame
+      header={<ProfileHeader isOwner={isOwner} />}
+      widgets={
+        <>
+          <ReadingOverview />
+          <ActiveSquads />
+          <Badges />
+        </>
+      }
+    >
+      <div className="flex items-center gap-6 border-b border-border-subtlest-tertiary px-6">
+        {profileTabs.map((item) => (
+          <button
+            type="button"
+            key={item.id}
+            onClick={() => setTab(item.id)}
+            className={classNames(
+              'relative flex items-center gap-1.5 py-3 typo-callout',
+              item.id === tab
+                ? 'sq-tab-active font-bold text-text-primary'
+                : 'text-text-tertiary hover:text-text-primary',
+            )}
+          >
+            {item.label}
+            {typeof item.count === 'number' && (
+              <span className="sq-nums font-normal text-text-quaternary">
+                {item.count}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+      {tab === ProfileTab.Activity ? (
+        <PostsArea sort="Posts" entries={posts.slice(0, 6)} />
+      ) : (
+        <div className="flex flex-col divide-y divide-border-subtlest-tertiary p-6">
+          <div />
+          <AboutMe />
+          <Experiences />
+        </div>
+      )}
+    </HomeFrame>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/archive/workspaceShell.tsx b/packages/storybook/stories/squad-page/archive/workspaceShell.tsx
new file mode 100644
index 00000000000..b740d3804c0
--- /dev/null
+++ b/packages/storybook/stories/squad-page/archive/workspaceShell.tsx
@@ -0,0 +1,730 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AddUserIcon,
+  ArrowIcon,
+  BellIcon,
+  DragIcon,
+  EyeCancelIcon,
+  LinkIcon,
+  LockIcon,
+  OpenLinkIcon,
+  PlusIcon,
+  SettingsIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { rules, squad, team } from '../data';
+import {
+  isAdmin,
+  isBlocked,
+  isJoined,
+  isStaff,
+  VerifiedMark,
+  Viewer,
+} from '../kit';
+import { Kit2Styles } from '../kit2';
+import { SquadHome } from '../home';
+import type { SquadConfig, WorkspaceState } from '../state';
+import {
+  ContentSource,
+  defaultConfig,
+  MemberRole,
+  useWorkspace,
+  WorkspaceContext,
+} from '../state';
+import {
+  AnalyticsPage,
+  ChannelPage,
+  Column,
+  common,
+  DocPage,
+  docs,
+  FeedSourcePage,
+  hidden,
+  iconFor,
+  InvitePage,
+  MembersPage,
+  ModerationPage,
+  NotFoundPage,
+  pageIcon,
+  PageType,
+  PendingPostsPage,
+  PrivateWall,
+  ProductsPage,
+  Rail,
+  RulesPage,
+  sections,
+  SettingsPage,
+  SquadPage,
+  WorkspaceStyles,
+} from '../workspace';
+import { PollsPage, ReleasesPage } from './chipPages';
+
+// The earlier direction's shell: a workspace sidebar of channels and
+// pages, the bar above each page, and the Add a page picker. Only the
+// archived Workspace story renders it; the chosen direction reuses the
+// pages in ../workspace.tsx.
+
+export const allPages: SquadPage[] = [
+  ...sections.flatMap((section) => section.pages),
+  common.members,
+  ...Object.values(hidden),
+].filter(
+  (candidate, index, list) =>
+    list.findIndex((other) => other.id === candidate.id) === index,
+);
+
+/** What an admin can add, grouped the way a community thinks about it. */
+export const pageCatalogue: {
+  group: string;
+  items: {
+    type: PageType;
+    title: string;
+    description: string;
+    exists: boolean;
+  }[];
+}[] = [
+  {
+    group: 'Channels',
+    items: [
+      {
+        type: PageType.Channel,
+        title: 'Discussions',
+        description:
+          'The feed, with a posting rule. Questions, feedback and bug reports live here too.',
+        exists: true,
+      },
+      {
+        type: PageType.Polls,
+        title: 'Polls',
+        description:
+          'The poll post type, on its own page. The team asks, members vote.',
+        exists: true,
+      },
+    ],
+  },
+  {
+    group: 'Documentation',
+    items: [
+      {
+        type: PageType.Rules,
+        title: 'Rules',
+        description:
+          'Numbered, one line each, expandable. Also shown on Home and before a first post.',
+        exists: false,
+      },
+      {
+        type: PageType.Doc,
+        title: 'FAQ or wiki',
+        description: 'A freeform post rendered as a page.',
+        exists: true,
+      },
+      {
+        type: PageType.Doc,
+        title: 'Page',
+        description: 'Any long-form document: a welcome, a roadmap, a guide.',
+        exists: true,
+      },
+    ],
+  },
+  {
+    group: 'Company',
+    items: [
+      {
+        type: PageType.Releases,
+        title: 'Releases',
+        description:
+          'Every release post as a log, grouped by month, filterable by kind. Reads like GitHub Releases.',
+        exists: false,
+      },
+      {
+        type: PageType.Products,
+        title: 'Products',
+        description:
+          'Everything the company makes. Imported from Product Hunt, G2, GitHub or a URL; each row links to the member stack.',
+        exists: false,
+      },
+    ],
+  },
+  {
+    group: 'Links and people',
+    items: [
+      {
+        type: PageType.Link,
+        title: 'Link',
+        description:
+          'Docs, GitHub, X, YouTube, LinkedIn, Discord. Opens in a new tab.',
+        exists: true,
+      },
+      {
+        type: PageType.Members,
+        title: 'Followers',
+        description: 'Everyone in the squad, with the team on top.',
+        exists: true,
+      },
+    ],
+  },
+];
+
+const Badge = ({ value }: { value: number }): ReactElement => (
+  <span className="sq-nums ml-auto rounded-8 bg-surface-float px-1.5 font-bold text-text-tertiary typo-caption2">
+    {value}
+  </span>
+);
+
+const SidebarItem = ({
+  page,
+  active,
+  admin,
+  onSelect,
+}: {
+  page: SquadPage;
+  active: boolean;
+  admin: boolean;
+  onSelect: (page: SquadPage) => void;
+}): ReactElement => (
+  <button
+    type="button"
+    onClick={() => onSelect(page)}
+    className={classNames(
+      'ws-item group relative flex w-full items-center gap-2.5 rounded-10 px-2.5 py-1.5 text-left typo-callout transition-colors',
+      active
+        ? 'ws-active bg-surface-float font-bold text-text-primary'
+        : 'text-text-tertiary hover:bg-surface-float hover:text-text-primary',
+    )}
+  >
+    <span
+      className={classNames(
+        'flex shrink-0',
+        active
+          ? 'text-text-primary'
+          : 'text-text-quaternary group-hover:text-text-primary',
+      )}
+    >
+      {iconFor(page)}
+    </span>
+    <span className="truncate">{page.label}</span>
+    {page.href && (
+      <OpenLinkIcon
+        size={IconSize.XSmall}
+        className="ml-auto shrink-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100"
+      />
+    )}
+    {page.restricted && (
+      <LockIcon
+        size={IconSize.XSmall}
+        className="shrink-0 text-text-quaternary"
+      />
+    )}
+    {typeof page.badge === 'number' && <Badge value={page.badge} />}
+    {admin && (
+      <span
+        className={classNames(
+          'ws-item-tools flex items-center gap-1 text-text-quaternary',
+          typeof page.badge !== 'number' && 'ml-auto',
+        )}
+      >
+        <EyeCancelIcon size={IconSize.XSmall} />
+        <DragIcon size={IconSize.XSmall} />
+      </span>
+    )}
+  </button>
+);
+
+export const SquadSidebar = ({
+  active,
+  viewer,
+  onSelect,
+  className,
+}: {
+  active: SquadPage;
+  viewer: Viewer;
+  onSelect: (page: SquadPage) => void;
+  className?: string;
+}): ReactElement => {
+  const admin = isAdmin(viewer);
+  const staff = isStaff(viewer);
+  const { source, config } = useWorkspace();
+  const canInvite = staff || config.memberInviteRole === MemberRole.Member;
+
+  return (
+    <aside
+      className={classNames(
+        'ws-scroll flex w-64 shrink-0 flex-col overflow-y-auto border-r border-border-subtlest-tertiary',
+        className,
+      )}
+    >
+      <header className="flex flex-col gap-3 border-b border-border-subtlest-tertiary p-4">
+        <div className="flex items-center gap-3">
+          <img
+            src={squad.image}
+            alt=""
+            className="size-10 rounded-full bg-background-default object-cover ring-1 ring-border-subtlest-tertiary"
+          />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <span className="flex items-center gap-1 truncate font-bold text-text-primary typo-callout">
+              {squad.name}
+              <VerifiedMark label={false} className="shrink-0" />
+            </span>
+            <span className="truncate text-text-tertiary typo-caption1">
+              Verified · {squad.company.website}
+            </span>
+          </div>
+        </div>
+        {viewer === Viewer.Anonymous && (
+          <div className="flex flex-col gap-2">
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Medium}
+              className="w-full"
+            >
+              Sign up to follow
+            </Button>
+            <span className="text-center text-text-tertiary typo-caption1">
+              Already on daily.dev?{' '}
+              <span className="text-text-link">Log in</span>
+            </span>
+          </div>
+        )}
+        {viewer === Viewer.Visitor && config.isPublic && (
+          <Button
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            className="w-full"
+          >
+            Follow
+          </Button>
+        )}
+        {viewer === Viewer.Visitor && !config.isPublic && (
+          <div className="flex items-center gap-2 rounded-10 bg-surface-float px-3 py-2 text-text-tertiary typo-caption1">
+            <LockIcon size={IconSize.Small} />
+            Private squad. Followers join by invitation link.
+          </div>
+        )}
+        {isBlocked(viewer) && (
+          <div className="flex flex-col gap-2">
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Medium}
+              className="w-full"
+              disabled
+            >
+              Follow
+            </Button>
+            <span className="text-center text-text-tertiary typo-caption1">
+              You are not allowed to follow this Squad
+            </span>
+          </div>
+        )}
+        {(viewer === Viewer.Member || viewer === Viewer.Moderator) && (
+          <div
+            className={classNames(
+              'grid gap-1',
+              canInvite ? 'grid-cols-3' : 'grid-cols-2',
+            )}
+          >
+            {[
+              [<BellIcon key="bell" size={IconSize.Small} />, 'Alerts'],
+              ...(canInvite
+                ? [
+                    [
+                      <AddUserIcon key="invite" size={IconSize.Small} />,
+                      'Invite',
+                    ],
+                  ]
+                : []),
+              [<LinkIcon key="share" size={IconSize.Small} />, 'Share'],
+            ].map(([icon, label]) => (
+              <button
+                type="button"
+                key={label as string}
+                className="flex flex-col items-center gap-0.5 rounded-10 bg-surface-float py-2 text-text-tertiary typo-caption1 transition-colors hover:bg-surface-hover hover:text-text-primary"
+              >
+                {icon}
+                {label}
+              </button>
+            ))}
+          </div>
+        )}
+        {staff && (
+          <div className="flex items-center justify-between rounded-10 bg-surface-float px-3 py-1.5 text-text-tertiary typo-caption1">
+            Preview as
+            <span className="flex items-center gap-1 font-bold text-text-primary">
+              {admin ? 'Admin' : 'Moderator'}
+              <ArrowIcon size={IconSize.XSmall} className="rotate-180" />
+            </span>
+          </div>
+        )}
+      </header>
+      <div className="flex flex-col gap-4 px-2 py-3">
+        {sections
+          .filter((section) => !section.admin || staff)
+          .map((section) => ({
+            ...section,
+            pages: section.pages.filter(
+              (item) =>
+                (!item.adminOnly || admin) &&
+                (item.type !== PageType.Feed || source === ContentSource.Feed),
+            ),
+          }))
+          .map((section) => (
+            <div key={section.id} className="flex flex-col gap-0.5">
+              {section.label && (
+                <div className="flex items-center justify-between px-2 pb-1">
+                  <span className="flex items-center gap-1 font-bold uppercase tracking-[0.12em] text-text-quaternary typo-caption2">
+                    {section.label}
+                    <ArrowIcon size={IconSize.XSmall} className="rotate-180" />
+                  </span>
+                  {admin && (
+                    <button
+                      type="button"
+                      aria-label={`Add a page to ${section.label}`}
+                      className="text-text-quaternary hover:text-text-primary"
+                      onClick={() =>
+                        onSelect({
+                          id: 'add',
+                          label: 'Add a page',
+                          type: PageType.Add,
+                        })
+                      }
+                    >
+                      <PlusIcon size={IconSize.XSmall} />
+                    </button>
+                  )}
+                </div>
+              )}
+              {section.pages.map((page) => (
+                <SidebarItem
+                  key={page.id}
+                  page={page}
+                  active={page.id === active.id}
+                  admin={admin}
+                  onSelect={onSelect}
+                />
+              ))}
+            </div>
+          ))}
+        {admin && (
+          <button
+            type="button"
+            onClick={() =>
+              onSelect({ id: 'add', label: 'Add a page', type: PageType.Add })
+            }
+            className={classNames(
+              'flex items-center gap-2 rounded-10 border border-dashed border-border-subtlest-secondary px-2 py-1.5 text-text-tertiary typo-callout hover:border-border-subtlest-primary hover:text-text-primary',
+              active.type === PageType.Add &&
+                'border-border-subtlest-primary text-text-primary',
+            )}
+          >
+            <PlusIcon size={IconSize.Small} />
+            Add a page
+          </button>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+/** Every page's top strip: where you are, and what you can do here. */
+export const PageBar = ({
+  page,
+  children,
+}: {
+  page: SquadPage;
+  children?: ReactNode;
+}): ReactElement => (
+  <div className="sticky top-0 z-3 flex h-12 items-center gap-2 border-b border-border-subtlest-tertiary bg-background-default px-6">
+    <span className="text-text-tertiary">{iconFor(page)}</span>
+    <span className="font-bold text-text-primary typo-callout">
+      {page.label}
+    </span>
+    {page.restricted && (
+      <span className="ml-1 flex items-center gap-1 rounded-8 bg-surface-float px-2 py-0.5 text-text-tertiary typo-caption1">
+        <LockIcon size={IconSize.XSmall} />
+        Team only
+      </span>
+    )}
+    <div className="ml-auto flex items-center gap-1">{children}</div>
+  </div>
+);
+
+const IconButton = ({
+  icon,
+  label,
+}: {
+  icon: ReactElement;
+  label: string;
+}): ReactElement => (
+  <Button
+    variant={ButtonVariant.Float}
+    size={ButtonSize.Small}
+    icon={icon}
+    aria-label={label}
+  />
+);
+
+/** Home is the profile page's skeleton, for a squad. See home.tsx. */
+const HomePage = ({
+  viewer,
+  empty,
+  onOpenMembers,
+  onOpenRules,
+  onOpenFaq,
+  onOpenPending,
+}: {
+  viewer: Viewer;
+  empty: boolean;
+  onOpenMembers: () => void;
+  onOpenRules: () => void;
+  onOpenFaq: () => void;
+  onOpenPending: () => void;
+}): ReactElement => (
+  <SquadHome
+    viewer={viewer}
+    empty={empty}
+    onOpenMembers={onOpenMembers}
+    onOpenRules={onOpenRules}
+    onOpenFaq={onOpenFaq}
+    onOpenPending={onOpenPending}
+  />
+);
+
+const AddPage = (): ReactElement => (
+  <Column width="max-w-[52rem]" className="gap-8">
+    <div className="flex flex-col gap-1">
+      <h1 className="font-bold text-text-primary typo-title2">Add a page</h1>
+      <p className="text-text-tertiary typo-callout">
+        Pick what the page is. You name it and choose the section afterwards.
+      </p>
+    </div>
+    {pageCatalogue.map((group) => (
+      <div key={group.group} className="flex flex-col gap-3">
+        <span className="font-bold uppercase tracking-wide text-text-quaternary typo-caption2">
+          {group.group}
+        </span>
+        <div className="grid grid-cols-2 gap-3">
+          {group.items.map((item) => (
+            <button
+              type="button"
+              key={item.title}
+              className="flex items-start gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 text-left hover:border-border-subtlest-primary"
+            >
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-10 bg-background-default text-text-primary">
+                {pageIcon(item.type, IconSize.Small)}
+              </span>
+              <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span className="flex items-center gap-2 font-bold text-text-primary typo-callout">
+                  {item.title}
+                  {!item.exists && (
+                    <span className="rounded-6 bg-accent-cabbage-flat px-1.5 text-accent-cabbage-default typo-caption2">
+                      New
+                    </span>
+                  )}
+                </span>
+                <span className="text-text-tertiary typo-footnote">
+                  {item.description}
+                </span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    ))}
+  </Column>
+);
+
+export const AdminPlaceholder = ({
+  page,
+}: {
+  page: SquadPage;
+}): ReactElement => (
+  <Column>
+    <div className="flex flex-col items-center gap-2 rounded-16 border border-dashed border-border-subtlest-secondary p-10 text-center">
+      <span className="text-text-tertiary">
+        {pageIcon(page.type, IconSize.Large)}
+      </span>
+      <span className="font-bold text-text-primary typo-callout">
+        {page.label}
+      </span>
+      <span className="max-w-[40ch] text-text-tertiary typo-footnote">
+        The existing {page.label.toLowerCase()} screen, opened inside the
+        workspace instead of on its own route.
+      </span>
+    </div>
+  </Column>
+);
+
+const PageBody = ({
+  page: current,
+  viewer,
+  onSelect,
+}: {
+  page: SquadPage;
+  viewer: Viewer;
+  onSelect: (page: SquadPage) => void;
+}): ReactElement => {
+  const { isPrivate, empty } = useWorkspace();
+
+  if (
+    isPrivate &&
+    !isJoined(viewer) &&
+    current.type !== PageType.Home &&
+    current.type !== PageType.Invite &&
+    current.type !== PageType.NotFound
+  ) {
+    return <PrivateWall viewer={viewer} />;
+  }
+
+  switch (current.type) {
+    case PageType.Home:
+      return (
+        <HomePage
+          viewer={viewer}
+          empty={empty}
+          onOpenMembers={() => onSelect(common.members)}
+          onOpenRules={() => onSelect(docs.rules)}
+          onOpenFaq={() => onSelect(docs.faq)}
+          onOpenPending={() => onSelect(hidden.pending)}
+        />
+      );
+    case PageType.Moderation:
+      return <ModerationPage />;
+    case PageType.Pending:
+      return <PendingPostsPage />;
+    case PageType.Settings:
+      return <SettingsPage />;
+    case PageType.Analytics:
+      return <AnalyticsPage />;
+    case PageType.Invite:
+      return <InvitePage viewer={viewer} />;
+    case PageType.NotFound:
+      return <NotFoundPage />;
+    case PageType.Feed:
+      return <FeedSourcePage />;
+    case PageType.Channel:
+      return <ChannelPage page={current} viewer={viewer} />;
+    case PageType.Releases:
+      return <ReleasesPage viewer={viewer} />;
+    case PageType.Polls:
+      return <PollsPage viewer={viewer} />;
+    case PageType.Doc:
+      return <DocPage page={current} />;
+    case PageType.Rules:
+      return <RulesPage />;
+    case PageType.Products:
+      return <ProductsPage viewer={viewer} />;
+    case PageType.Members:
+      return <MembersPage viewer={viewer} />;
+    case PageType.Add:
+      return <AddPage />;
+    default:
+      return <AdminPlaceholder page={current} />;
+  }
+};
+
+const pageBarTools = (page: SquadPage, viewer: Viewer): ReactNode => {
+  switch (page.type) {
+    case PageType.Home:
+    case PageType.Channel:
+      return isAdmin(viewer) ? (
+        <IconButton icon={<SettingsIcon />} label="Page settings" />
+      ) : null;
+    case PageType.Products:
+      return isAdmin(viewer) ? (
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+          Sync now
+        </Button>
+      ) : null;
+    case PageType.Doc:
+      return isStaff(viewer) ? (
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+          Edit page
+        </Button>
+      ) : (
+        <IconButton icon={<LinkIcon />} label="Copy link" />
+      );
+    default:
+      return null;
+  }
+};
+
+/* -------------------------------------------------------------- workspace */
+
+export const WorkspaceShell = ({
+  viewer = Viewer.Member,
+  initialPage = allPages[0],
+  source = ContentSource.Feed,
+  empty = false,
+  isPrivate = false,
+  config,
+  height = 56,
+  width = 1440,
+}: {
+  viewer?: Viewer;
+  initialPage?: SquadPage;
+  source?: ContentSource;
+  empty?: boolean;
+  isPrivate?: boolean;
+  config?: Partial<SquadConfig>;
+  /** rem */
+  height?: number;
+  width?: number;
+}): ReactElement => {
+  const [active, setActive] = useState<SquadPage>(initialPage);
+  const state: WorkspaceState = {
+    viewer,
+    source,
+    empty,
+    isPrivate,
+    config: { ...defaultConfig, isPublic: !isPrivate, ...config },
+  };
+
+  const standalonePage =
+    active.type === PageType.Invite || active.type === PageType.NotFound;
+
+  const onSelect = (page: SquadPage) => {
+    if (page.href) {
+      return;
+    }
+    setActive(page);
+  };
+
+  return (
+    <WorkspaceContext.Provider value={state}>
+      <div
+        style={{ width, maxWidth: '100%', height: `${height}rem` }}
+        className="sq-elevated flex overflow-hidden rounded-16 bg-background-default text-text-primary"
+      >
+        <WorkspaceStyles />
+        <Kit2Styles />
+        <Rail />
+        {!standalonePage && (
+          <SquadSidebar active={active} viewer={viewer} onSelect={onSelect} />
+        )}
+        <main className="ws-scroll flex min-w-0 flex-1 flex-col overflow-y-auto">
+          {active.type !== PageType.Home && !standalonePage && (
+            <PageBar page={active}>{pageBarTools(active, viewer)}</PageBar>
+          )}
+          <div className="flex-1">
+            <PageBody page={active} viewer={viewer} onSelect={onSelect} />
+          </div>
+        </main>
+      </div>
+    </WorkspaceContext.Provider>
+  );
+};
+
+export const findPage = (id: string): SquadPage =>
+  allPages.find((page) => page.id === id) ?? allPages[0];
+
+export const addPage: SquadPage = {
+  id: 'add',
+  label: 'Add a page',
+  type: PageType.Add,
+};
diff --git a/packages/storybook/stories/squad-page/composer.tsx b/packages/storybook/stories/squad-page/composer.tsx
new file mode 100644
index 00000000000..b7866e13254
--- /dev/null
+++ b/packages/storybook/stories/squad-page/composer.tsx
@@ -0,0 +1,283 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  LinkIcon,
+  MaximizeIcon,
+  MiniCloseIcon,
+  PlusIcon,
+  PollIcon,
+  TimerIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { RootPortal } from '@dailydotdev/shared/src/components/tooltips/Portal';
+import { AudienceChip } from '@dailydotdev/shared/src/components/post/composer/AudienceChip';
+import { KindModePicker } from '@dailydotdev/shared/src/components/post/composer/KindModePicker';
+import type { ComposerKind } from '@dailydotdev/shared/src/components/post/composer/types';
+import type { Squad } from '@dailydotdev/shared/src/graphql/sources';
+import { squad, team } from './data';
+import { Avatar } from './kit';
+
+// The squad's way into the new composer. The bar is production's
+// watercooler shell and prompt; under it sit the composer's own kinds,
+// named as the composer names them, so each one opens the composer
+// already set to that kind with this squad as the audience.
+
+const kinds: { kind: ComposerKind; label: string; icon: ReactElement }[] = [
+  { kind: 'link', label: 'Share a link', icon: <LinkIcon /> },
+  { kind: 'poll', label: 'Poll', icon: <PollIcon /> },
+];
+
+const audience = {
+  id: squad.handle,
+  name: squad.name,
+  handle: squad.handle,
+  image: squad.image,
+  permalink: `https://app.daily.dev/squads/${squad.handle}`,
+} as unknown as Squad;
+
+const me = team[2];
+
+const titleClass =
+  'w-full resize-none bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary';
+const bodyClass =
+  'w-full resize-none bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary';
+
+const ComposerBody = ({
+  kind,
+  onReady,
+}: {
+  kind: ComposerKind;
+  onReady: (ready: boolean) => void;
+}): ReactElement => {
+  const [first, setFirst] = useState('');
+  const [options, setOptions] = useState(['', '']);
+
+  useEffect(() => {
+    onReady(
+      kind === 'poll'
+        ? !!first.trim() && options.filter((o) => o.trim()).length >= 2
+        : !!first.trim(),
+    );
+  }, [first, kind, onReady, options]);
+
+  if (kind === 'poll') {
+    return (
+      <div className="flex flex-col gap-4">
+        <textarea
+          autoFocus
+          rows={1}
+          value={first}
+          onChange={(event) => setFirst(event.target.value)}
+          placeholder="Ask a question…"
+          aria-label="Poll question"
+          className={titleClass}
+        />
+        <div className="flex flex-col gap-2">
+          {options.map((option, index) => (
+            <input
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              value={option}
+              onChange={(event) =>
+                setOptions((list) =>
+                  list.map((entry, at) =>
+                    at === index ? event.target.value : entry,
+                  ),
+                )
+              }
+              placeholder={`Option ${index + 1}`}
+              aria-label={`Poll option ${index + 1}`}
+              className="rounded-12 border border-border-subtlest-tertiary bg-transparent px-3 py-2.5 text-text-primary outline-none typo-callout placeholder:text-text-quaternary focus:border-border-subtlest-primary"
+            />
+          ))}
+          {options.length < 4 && (
+            <Button
+              type="button"
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.Small}
+              icon={<PlusIcon />}
+              className="self-start"
+              onClick={() => setOptions((list) => [...list, ''])}
+            >
+              Add option
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <textarea
+        autoFocus
+        rows={1}
+        value={first}
+        onChange={(event) => setFirst(event.target.value)}
+        placeholder={kind === 'link' ? 'Paste a link…' : 'Post title…'}
+        aria-label={kind === 'link' ? 'Link URL' : 'Post title'}
+        className={titleClass}
+      />
+      <textarea
+        rows={kind === 'link' ? 2 : 5}
+        placeholder={
+          kind === 'link' ? 'Add a comment (optional)' : 'Share your thoughts'
+        }
+        aria-label={kind === 'link' ? 'Post commentary' : 'Post body'}
+        className={bodyClass}
+      />
+    </div>
+  );
+};
+
+/** The new composer as it opens from the squad: this squad preselected. */
+export const ComposerPreview = ({
+  kind: initialKind,
+  onClose,
+}: {
+  kind: ComposerKind;
+  onClose: () => void;
+}): ReactElement => {
+  const [kind, setKind] = useState(initialKind);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <RootPortal>
+      <div
+        role="presentation"
+        onClick={onClose}
+        className="fixed inset-0 z-modal flex items-start justify-center bg-overlay-quaternary-onion px-4 pt-[12vh]"
+      >
+        <div
+          role="dialog"
+          aria-label="New post"
+          onClick={(event) => event.stopPropagation()}
+          className="flex w-full max-w-[40rem] flex-col rounded-16 border border-border-subtlest-tertiary bg-background-default shadow-2"
+        >
+          <div className="flex items-center justify-between gap-2 px-5 pb-2 pt-5">
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              <Avatar member={me} size={2} />
+              <AudienceChip
+                audiences={[audience]}
+                selectedIds={[squad.handle]}
+                onChange={() => undefined}
+                userAudienceId={undefined}
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.Small}
+                icon={<MaximizeIcon />}
+                aria-label="Expand composer"
+              />
+              <Button
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.Small}
+                icon={<MiniCloseIcon />}
+                aria-label="Close"
+                onClick={onClose}
+              />
+            </div>
+          </div>
+          <div className="px-5 pb-3 pt-3">
+            <ComposerBody key={kind} kind={kind} onReady={setReady} />
+          </div>
+          <div className="flex items-center justify-between gap-3 px-5 pb-5 pt-4">
+            <KindModePicker value={kind} onChange={setKind} />
+            <Button
+              type="button"
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Small}
+              disabled={!ready}
+              onClick={onClose}
+              className="px-5"
+            >
+              Post
+            </Button>
+          </div>
+        </div>
+      </div>
+    </RootPortal>
+  );
+};
+
+/**
+ * The bar on the squad. The whole box opens the composer in free form,
+ * its default; the shortcuts under the prompt open the other kinds.
+ */
+export const ComposerEntry = ({
+  canPoll,
+  reviewed,
+}: {
+  canPoll: boolean;
+  reviewed?: boolean;
+}): ReactElement => {
+  const [open, setOpen] = useState<ComposerKind | null>(null);
+  const shown = kinds.filter(({ kind }) => canPoll || kind !== 'poll');
+
+  return (
+    <>
+      <div
+        role="presentation"
+        onClick={() => setOpen('text')}
+        className="mx-4 flex cursor-text flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float transition-colors focus-within:border-border-subtlest-secondary hover:border-border-subtlest-secondary tablet:mx-0"
+      >
+        <button
+          type="button"
+          className="flex items-center gap-3 px-4 pb-2 pt-3 text-left"
+        >
+          <Avatar member={me} size={2} />
+          <span className="min-w-0 flex-1 truncate text-text-quaternary typo-body">
+            What&apos;s on your mind?
+          </span>
+        </button>
+        <div className="flex items-center gap-1 px-3 pb-2 tablet:pl-[3.75rem]">
+          {shown.map(({ kind, label, icon }) => (
+            <Button
+              key={kind}
+              type="button"
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.Small}
+              icon={React.cloneElement(icon, { size: IconSize.Size16 })}
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                setOpen(kind);
+              }}
+              className="!px-2 text-text-tertiary"
+            >
+              {label}
+            </Button>
+          ))}
+          {reviewed && (
+            <span
+              title="Posts are reviewed by a moderator before they go live."
+              className="ml-auto hidden items-center gap-1.5 pr-1 text-text-quaternary typo-caption1 tablet:flex"
+            >
+              <TimerIcon size={IconSize.Size16} />
+              Reviewed before it goes live
+            </span>
+          )}
+        </div>
+      </div>
+      {open && <ComposerPreview kind={open} onClose={() => setOpen(null)} />}
+    </>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/data.ts b/packages/storybook/stories/squad-page/data.ts
new file mode 100644
index 00000000000..e00aa9a3ddb
--- /dev/null
+++ b/packages/storybook/stories/squad-page/data.ts
@@ -0,0 +1,1056 @@
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { PostType, UserVote } from '@dailydotdev/shared/src/graphql/posts';
+
+// CodeRabbit as a verified company page, the prospect the mock is built for.
+// Posts are CodeRabbit's real blog and changelog entries (coderabbit.ai/blog,
+// docs.coderabbit.ai/changelog, 23 Sep 2026); the bio, avatar and banner are
+// from x.com/coderabbitai; the team is the company's public GitHub org; counts, ratings and polls are illustrative. Formerly the daily.dev
+// Changelog squad (@daily_updates), snapshotted from the public
+// API on 15 Sep 2026: identity, stats, the admin/moderator list and the last
+// 14 posts are real. Everything marked "illustrative" is what a verified
+// company page would add on top and does not exist on the API yet.
+
+export interface SquadLink {
+  label: string;
+  href: string;
+}
+
+export interface SquadData {
+  handle: string;
+  name: string;
+  description: string;
+  /** One line. The description is the paragraph; this is the promise. */
+  tagline: string;
+  image: string;
+  headerImage: string;
+  /** Which part of the cover survives the crop. Banners carry their message at the top. */
+  headerImagePosition?: 'top' | 'center' | 'bottom';
+  permalink: string;
+  category: string;
+  createdAt: string;
+  membersCount: number;
+  totalPosts: number;
+  totalViews: number;
+  totalUpvotes: number;
+  totalAwards: number;
+  /** Illustrative: the badge is the thing being sold. */
+  verified: boolean;
+  /** The RSS the page is fed by. */
+  feedUrl: string;
+  /** Illustrative. */
+  links: SquadLink[];
+  /** Illustrative. Company location and size the way LinkedIn shows them. */
+  company: { location: string; size: string; website: string };
+}
+
+export const squad: SquadData = {
+  handle: 'coderabbit',
+  name: 'CodeRabbit',
+  tagline:
+    'CodeRabbit helps teams review, understand, govern, and trust agent-generated code.',
+  description:
+    'CodeRabbit helps teams review, understand, govern, and trust agent-generated code.',
+  image: '/squad-page/coderabbit-avatar.jpg',
+  headerImage: '/squad-page/coderabbit-banner.jpg',
+  headerImagePosition: 'top',
+  permalink: 'https://daily.dev/squads/coderabbit',
+  category: 'Developer tools',
+  createdAt: '2023-04-28T10:00:00.000Z',
+  membersCount: 6120,
+  totalPosts: 184,
+  totalViews: 418230,
+  totalUpvotes: 12340,
+  totalAwards: 3,
+  verified: true,
+  feedUrl: 'docs.coderabbit.ai/changelog/rss.xml',
+  links: [
+    { label: 'coderabbit.ai', href: 'https://www.coderabbit.ai' },
+    {
+      label: 'github.com/coderabbitai',
+      href: 'https://github.com/coderabbitai',
+    },
+    { label: 'x.com/coderabbitai', href: 'https://x.com/coderabbitai' },
+  ],
+  company: {
+    location: 'San Francisco, CA',
+    size: '51-200 employees',
+    website: 'coderabbit.ai',
+  },
+};
+
+export enum TeamRole {
+  Admin = 'Admin',
+  Moderator = 'Moderator',
+}
+
+export interface TeamMember {
+  id: string;
+  name: string;
+  username: string;
+  image: string;
+  role: TeamRole;
+  title: string;
+  reputation: number;
+}
+
+export const team: TeamMember[] = [
+  {
+    id: 'harjotgill',
+    name: 'Harjot Gill',
+    username: 'harjotgill',
+    image: 'https://avatars.githubusercontent.com/u/18579817?v=4',
+    role: TeamRole.Admin,
+    title: 'Co-founder & CEO',
+    reputation: 48120,
+  },
+  {
+    id: 'hasit',
+    name: 'Hasit Mistry',
+    username: 'hasit',
+    image: 'https://avatars.githubusercontent.com/u/1553055?v=4',
+    role: TeamRole.Admin,
+    title: 'Engineering',
+    reputation: 36400,
+  },
+  {
+    id: 'santoshyadavdev',
+    name: 'Santosh Yadav',
+    username: 'santoshyadavdev',
+    image: 'https://avatars.githubusercontent.com/u/11923975?v=4',
+    role: TeamRole.Moderator,
+    title: 'Principal Developer Advocate',
+    reputation: 92100,
+  },
+  {
+    id: 'helizaga',
+    name: 'Tom Elizaga',
+    username: 'helizaga',
+    image: 'https://avatars.githubusercontent.com/u/22605247?v=4',
+    role: TeamRole.Moderator,
+    title: 'Software engineer',
+    reputation: 21430,
+  },
+  {
+    id: 'dundeezhang',
+    name: 'Dundee Zhang',
+    username: 'dundeezhang',
+    image: 'https://avatars.githubusercontent.com/u/60833894?v=4',
+    role: TeamRole.Moderator,
+    title: 'Engineer',
+    reputation: 18240,
+  },
+  {
+    id: 'recrsn',
+    name: 'Amitosh Swain Mahapatra',
+    username: 'recrsn',
+    image: 'https://avatars.githubusercontent.com/u/16816719?v=4',
+    role: TeamRole.Moderator,
+    title: 'Engineer',
+    reputation: 14010,
+  },
+  {
+    id: 'ahmetskilinc',
+    name: 'Ahmet Kilinc',
+    username: 'ahmetskilinc',
+    image: 'https://avatars.githubusercontent.com/u/37756565?v=4',
+    role: TeamRole.Moderator,
+    title: 'Engineer',
+    reputation: 9200,
+  },
+  {
+    id: 'averyjennings',
+    name: 'Avery Jennings',
+    username: 'averyjennings',
+    image: 'https://avatars.githubusercontent.com/u/14079159?v=4',
+    role: TeamRole.Moderator,
+    title: 'Engineer',
+    reputation: 7700,
+  },
+];
+
+const teamById = Object.fromEntries(team.map((member) => [member.id, member]));
+
+export interface Entry {
+  id: string;
+  title: string;
+  image: string | null;
+  summary: string;
+  createdAt: string;
+  upvotes: number;
+  comments: number;
+  awards: number;
+  tags: string[];
+  author: TeamMember;
+  pinned?: boolean;
+}
+
+export const entries: Entry[] = [
+  {
+    id: 'coderabbit-triage',
+    title: 'CodeRabbit Triage: know which pull request to review next',
+    image: 'https://www.coderabbit.ai/content/assets/triage-pr-queue/hero.png',
+    summary:
+      'CodeRabbit Triage scores and explains pull request priorities so reviewers can focus their attention, route work, and identify the next action. One queue across every repository your organization tracks.',
+    createdAt: '2026-09-15T16:00:00.000Z',
+    upvotes: 412,
+    comments: 58,
+    awards: 2,
+    tags: ['code-review', 'devtools', 'coderabbit'],
+    author: teamById.harjotgill,
+    pinned: true,
+  },
+  {
+    id: 'do-you-understand-what-youre-about-to-merge',
+    title: 'Do you understand what you are about to merge?',
+    image:
+      'https://www.coderabbit.ai/content/assets/change-stack-understanding/hero.png',
+    summary:
+      'Five questions every reviewer should answer before approving a pull request, and how Change Stack ties intent, behavior, dependencies, and risk back to the code.',
+    createdAt: '2026-09-23T15:00:00.000Z',
+    upvotes: 186,
+    comments: 24,
+    awards: 0,
+    tags: ['code-review', 'coderabbit'],
+    author: teamById.santoshyadavdev,
+  },
+  {
+    id: 'opus-5-5-model-review',
+    title: 'Claude Opus 5.5 code review benchmarks',
+    image: 'https://www.coderabbit.ai/content/assets/opus-5-5-header.png',
+    summary:
+      "We benchmarked Anthropic's Claude Opus 5.5 for AI code review against our production reviewer: which bugs it catches, which it misses, and whether higher effort helps.",
+    createdAt: '2026-09-22T14:00:00.000Z',
+    upvotes: 341,
+    comments: 47,
+    awards: 1,
+    tags: ['ai', 'llm', 'code-review'],
+    author: teamById.hasit,
+  },
+  {
+    id: 'rethinking-pr-triage-from-first-principles',
+    title: 'Rethinking PR triage from first principles',
+    image:
+      'https://www.coderabbit.ai/content/assets/rethinking-pr-triage-from-first-principles/hero.png',
+    summary:
+      'Why a blocked pull request is not automatically an urgent one, and how a priority should weigh risk, reward, effort and activity instead of age.',
+    createdAt: '2026-09-18T14:00:00.000Z',
+    upvotes: 158,
+    comments: 19,
+    awards: 0,
+    tags: ['code-review', 'engineering-management'],
+    author: teamById.harjotgill,
+  },
+  {
+    id: 'software-factory-review-gate',
+    title: 'A software factory needs a review gate it can trust',
+    image:
+      'https://www.coderabbit.ai/content/assets/software-factory-review-gate/consequential-change.png',
+    summary:
+      'Agents can write, test, and revise code across much of the delivery process. Teams still need a reliable way to decide which changes can move automatically and which require accountable human review.',
+    createdAt: '2026-09-10T14:00:00.000Z',
+    upvotes: 229,
+    comments: 31,
+    awards: 1,
+    tags: ['ai', 'code-review'],
+    author: teamById.harjotgill,
+  },
+  {
+    id: 'taste-decides-what-should-ship',
+    title: 'Whose taste is shaping your agentic SDLC?',
+    image:
+      'https://www.coderabbit.ai/content/assets/taste-decides-what-should-ship/cover.png',
+    summary:
+      'Engineering taste develops through experience, exploring alternatives, and learning from use. How can teams preserve those opportunities in an agentic SDLC?',
+    createdAt: '2026-09-09T14:00:00.000Z',
+    upvotes: 121,
+    comments: 14,
+    awards: 0,
+    tags: ['ai', 'engineering-management'],
+    author: teamById.santoshyadavdev,
+  },
+  {
+    id: 'gpt-6-astra-code-review-evaluation',
+    title: 'GPT-6 Astra review: code review gains, privacy, and cost',
+    image: 'https://www.coderabbit.ai/content/assets/gpt-6-astra/header.png',
+    summary:
+      "CodeRabbit's early GPT-6 Astra evaluation covers cross-file bug detection, customer data protection, public API pricing, and building NIGHTSHIFT.",
+    createdAt: '2026-09-04T14:00:00.000Z',
+    upvotes: 298,
+    comments: 39,
+    awards: 1,
+    tags: ['ai', 'llm', 'code-review'],
+    author: teamById.hasit,
+  },
+  {
+    id: 'the-last-software-engineer-knows-what-to-build',
+    title: 'What would the last software engineer still need to do?',
+    image:
+      'https://www.coderabbit.ai/content/assets/last-software-engineer-cover.png',
+    summary:
+      'Kent C. Dodds explains why knowing what to build, understanding the system, and owning outcomes matter as AI agents take on implementation.',
+    createdAt: '2026-09-03T14:00:00.000Z',
+    upvotes: 402,
+    comments: 63,
+    awards: 2,
+    tags: ['ai', 'career'],
+    author: teamById.santoshyadavdev,
+  },
+  {
+    id: 'fable-5-1-model-review',
+    title: 'Fable 5.1 model review and code review results',
+    image: 'https://www.coderabbit.ai/content/assets/fable-5-1.png',
+    summary:
+      'Fable 5.1 feels fast on small coding tasks and produces fewer review comments than Fable 5, but it needs clear instructions and careful use in code review.',
+    createdAt: '2026-09-01T14:00:00.000Z',
+    upvotes: 276,
+    comments: 35,
+    awards: 0,
+    tags: ['ai', 'llm', 'code-review'],
+    author: teamById.hasit,
+  },
+  {
+    id: 'metrics-api-retry-guidance',
+    title: 'Metrics API retry guidance',
+    image: null,
+    summary:
+      'Build more reliable metrics integrations by reading the Retry-After response header when the metrics endpoints return 503 while isolated metrics prepare, then retry the same request.',
+    createdAt: '2026-09-20T10:00:00.000Z',
+    upvotes: 44,
+    comments: 3,
+    awards: 0,
+    tags: ['api', 'coderabbit'],
+    author: teamById.helizaga,
+  },
+  {
+    id: 'cli-0-7-8',
+    title: 'CLI v0.7.8',
+    image: null,
+    summary:
+      'More reliable large reviews: reviews avoid duplicate file content and report oversized requests with guidance to reduce the scope. Git branch detection avoids interactive credential prompts that can stall reviews.',
+    createdAt: '2026-09-16T10:00:00.000Z',
+    upvotes: 97,
+    comments: 11,
+    awards: 0,
+    tags: ['cli', 'coderabbit'],
+    author: teamById.dundeezhang,
+  },
+  {
+    id: 'metrics-api-retries',
+    title: 'Metrics API retries',
+    image: null,
+    summary:
+      'The MCP server usage and review comment metrics endpoints return 503 while isolated metrics are preparing and include a Retry-After header.',
+    createdAt: '2026-09-16T09:00:00.000Z',
+    upvotes: 31,
+    comments: 2,
+    awards: 0,
+    tags: ['api', 'coderabbit'],
+    author: teamById.helizaga,
+  },
+  {
+    id: 'dynamic-configuration-typescript',
+    title: 'Dynamic CodeRabbit configuration with TypeScript',
+    image: null,
+    summary:
+      'Define CodeRabbit settings in a programmatic .coderabbit.config.ts, with PR-aware conditions, reusable merged fragments, local TypeScript or YAML includes, and shared includes from the organization config repository.',
+    createdAt: '2026-09-15T10:00:00.000Z',
+    upvotes: 213,
+    comments: 29,
+    awards: 0,
+    tags: ['typescript', 'devtools', 'coderabbit'],
+    author: teamById.recrsn,
+  },
+  {
+    id: 'cli-0-7-7',
+    title: 'CLI v0.7.7',
+    image: null,
+    summary:
+      'Review without a local clone: cr review --remote owner/repo reviews an installed GitHub repository from any directory. Configure reviews from the CLI with cr config.',
+    createdAt: '2026-09-10T10:00:00.000Z',
+    upvotes: 142,
+    comments: 17,
+    awards: 0,
+    tags: ['cli', 'coderabbit'],
+    author: teamById.dundeezhang,
+  },
+  {
+    id: 'requested-team-overrides',
+    title: 'Requested team overrides',
+    image: null,
+    summary:
+      'When pre-merge check override access is restricted to requested reviewers, members of a requested GitHub reviewer team can now ignore failing checks.',
+    createdAt: '2026-09-10T09:00:00.000Z',
+    upvotes: 38,
+    comments: 4,
+    awards: 0,
+    tags: ['github', 'coderabbit'],
+    author: teamById.ahmetskilinc,
+  },
+  {
+    id: 'connections-and-scopes',
+    title: 'Connections and scopes',
+    image: null,
+    summary:
+      'Connecting CodeRabbit to issue trackers, documentation systems and analytics tools used to mean setting up each service separately for reviews, the Slack agent and the Discord agent. That setup is now unified.',
+    createdAt: '2026-09-10T08:00:00.000Z',
+    upvotes: 76,
+    comments: 9,
+    awards: 0,
+    tags: ['integrations', 'coderabbit'],
+    author: teamById.helizaga,
+  },
+  {
+    id: 'custom-jira-issue-templates',
+    title: 'Custom Jira issue templates',
+    image: null,
+    summary:
+      'Let CodeRabbit create Jira issues that follow your team standards. Configure chat.integrations.jira.issue_template to define the structure of issue descriptions created from chat.',
+    createdAt: '2026-09-09T10:00:00.000Z',
+    upvotes: 54,
+    comments: 6,
+    awards: 0,
+    tags: ['jira', 'coderabbit'],
+    author: teamById.ahmetskilinc,
+  },
+  {
+    id: 'review-comment-metrics-api',
+    title: 'Review comment metrics API',
+    image: null,
+    summary:
+      'Enterprise organizations can retrieve finding-level metadata for review comments on merged pull requests: severity, category, stored resolution outcome and comment URL.',
+    createdAt: '2026-09-09T09:00:00.000Z',
+    upvotes: 63,
+    comments: 5,
+    awards: 0,
+    tags: ['api', 'coderabbit'],
+    author: teamById.recrsn,
+  },
+  {
+    id: 'project-vocabulary',
+    title: 'Project vocabulary',
+    image: null,
+    summary:
+      'Comment @coderabbitai generate project vocabulary on a pull request to receive an alphabetized list of up to 50 terms specific to that repository, drawn from source, docs and configuration.',
+    createdAt: '2026-09-04T10:00:00.000Z',
+    upvotes: 88,
+    comments: 12,
+    awards: 0,
+    tags: ['coderabbit'],
+    author: teamById.averyjennings,
+  },
+  {
+    id: 'cli-0-7-6',
+    title: 'CLI v0.7.6',
+    image: null,
+    summary:
+      'Improves large-review handling, expands security finding output, and makes usage reporting more accurate. Large reviews send smaller requests and report oversized payloads directly.',
+    createdAt: '2026-09-04T09:00:00.000Z',
+    upvotes: 71,
+    comments: 8,
+    awards: 0,
+    tags: ['cli', 'coderabbit'],
+    author: teamById.dundeezhang,
+  },
+  {
+    id: 'attack-surface-map',
+    title: 'Attack surface map',
+    image: null,
+    summary:
+      'A living view of the security-relevant parts of a repository: mapped code locations grouped into subsystems and sorted into lanes, from entry points and trust boundaries to sinks and security configuration.',
+    createdAt: '2026-09-02T10:00:00.000Z',
+    upvotes: 167,
+    comments: 21,
+    awards: 0,
+    tags: ['security', 'coderabbit'],
+    author: teamById.recrsn,
+  },
+  {
+    id: 'cross-repository-targeted-guidelines',
+    title: 'Cross-repository targeted guidelines',
+    image: null,
+    summary:
+      'Path-scoped review guidelines that apply across repositories, so a rule written once for a shared library follows it everywhere it is used.',
+    createdAt: '2026-08-28T10:00:00.000Z',
+    upvotes: 59,
+    comments: 7,
+    awards: 0,
+    tags: ['code-review', 'coderabbit'],
+    author: teamById.ahmetskilinc,
+  },
+  {
+    id: 'rate-limit-observability',
+    title: 'Rate limit observability and control',
+    image: null,
+    summary:
+      'See how close each organization is to its review rate limits, and set per-repository controls so a noisy repository cannot starve the rest.',
+    createdAt: '2026-08-26T10:00:00.000Z',
+    upvotes: 47,
+    comments: 5,
+    awards: 0,
+    tags: ['api', 'coderabbit'],
+    author: teamById.averyjennings,
+  },
+];
+
+export const pinnedEntry = entries.find((entry) => entry.pinned) as Entry;
+export const latestEntry = entries.find((entry) => !entry.pinned) as Entry;
+export const feedEntries = entries.filter((entry) => !entry.pinned);
+
+/** The moderation queue: three posts and a poll. */
+export const pendingQueue = feedEntries.slice(3, 6);
+export const moderationQueueCount = pendingQueue.length + 1;
+
+/** Illustrative. What a CodeRabbit-shaped stack would list. */
+export const stack = [
+  { name: 'TypeScript', image: 'https://cdn.simpleicons.org/typescript' },
+  { name: 'Go', image: 'https://cdn.simpleicons.org/go' },
+  { name: 'Python', image: 'https://cdn.simpleicons.org/python' },
+  { name: 'PostgreSQL', image: 'https://cdn.simpleicons.org/postgresql' },
+  { name: 'Kubernetes', image: 'https://cdn.simpleicons.org/kubernetes' },
+  { name: 'GitHub', image: 'https://cdn.simpleicons.org/github/white' },
+];
+
+/** Illustrative. Recruiter already exists; a company page would surface it. */
+export const jobs = [
+  {
+    title: 'Senior Software Engineer, Agents',
+    location: 'San Francisco',
+    type: 'Full-time',
+  },
+  { title: 'Developer Advocate', location: 'Remote (US)', type: 'Full-time' },
+];
+
+const source = {
+  id: squad.handle,
+  handle: squad.handle,
+  name: squad.name,
+  permalink: squad.permalink,
+  image: squad.image,
+  type: 'squad' as const,
+  active: true,
+  public: true,
+  membersCount: squad.membersCount,
+};
+
+/** The shape the real feed cards take, so the grid layouts render production cards. */
+export const toPost = (entry: Entry): Post =>
+  ({
+    id: entry.id,
+    title: entry.title,
+    summary: entry.summary,
+    image: entry.image ?? undefined,
+    permalink: `https://daily.dev/posts/${entry.id}`,
+    commentsPermalink: `https://daily.dev/posts/${entry.id}`,
+    createdAt: entry.createdAt,
+    numUpvotes: entry.upvotes,
+    numComments: entry.comments,
+    numAwards: entry.awards,
+    tags: entry.tags,
+    pinnedAt: entry.pinned ? entry.createdAt : undefined,
+    type: PostType.Freeform,
+    contentHtml: `<p>${entry.summary}</p>`,
+    source,
+    author: {
+      id: entry.author.id,
+      name: entry.author.name,
+      username: entry.author.username,
+      image: entry.author.image,
+      permalink: `https://daily.dev/${entry.author.username}`,
+      reputation: entry.author.reputation,
+    },
+    bookmarked: false,
+    read: false,
+    upvoted: false,
+    commented: false,
+    userState: { vote: UserVote.None, flags: { feedbackDismiss: false } },
+  } as unknown as Post);
+
+export const formatCount = (value: number): string => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1).replace(/\.0$/, '')}K`;
+  }
+  return String(value);
+};
+
+const monthFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'long',
+  year: 'numeric',
+});
+const dayFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+});
+const shortMonthYear = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  year: 'numeric',
+});
+
+export const formatMonth = (iso: string): string =>
+  monthFormatter.format(new Date(iso));
+export const formatDay = (iso: string): string =>
+  dayFormatter.format(new Date(iso));
+export const formatSince = (iso: string): string =>
+  shortMonthYear.format(new Date(iso));
+
+/** Newest first, grouped by month. The publication layout reads like a changelog. */
+export const entriesByMonth = feedEntries.reduce<
+  { month: string; items: Entry[] }[]
+>((groups, entry) => {
+  const month = formatMonth(entry.createdAt);
+  const group = groups.find((item) => item.month === month);
+  if (group) {
+    group.items.push(entry);
+  } else {
+    groups.push({ month, items: [entry] });
+  }
+  return groups;
+}, []);
+
+export interface Product {
+  id: string;
+  name: string;
+  tagline: string;
+  image: string;
+  category: string;
+  pricing: 'Free' | 'Freemium' | 'Paid' | 'Open source';
+  /** Where the listing was imported from. Ratings are the source's. */
+  source: 'Product Hunt' | 'G2' | 'GitHub' | 'Website';
+  rating?: number;
+  reviews?: number;
+  /** daily.dev members with this in their stack. */
+  inStacks: number;
+  links: { label: string; href: string }[];
+}
+
+/** Illustrative. Real products; ratings and counts are placeholders. */
+export const products: Product[] = [
+  {
+    id: 'reviews',
+    name: 'CodeRabbit',
+    tagline:
+      'AI code reviews on every pull request, in GitHub, GitLab, Azure DevOps and Bitbucket.',
+    image: squad.image,
+    category: 'Code review',
+    pricing: 'Freemium',
+    source: 'Product Hunt',
+    rating: 4.9,
+    reviews: 640,
+    inStacks: 12400,
+    links: [
+      { label: 'Website', href: 'https://www.coderabbit.ai' },
+      {
+        label: 'Product Hunt',
+        href: 'https://www.producthunt.com/products/coderabbit',
+      },
+    ],
+  },
+  {
+    id: 'triage',
+    name: 'CodeRabbit Triage',
+    tagline:
+      'One cross-repository queue of open pull requests, ranked by what each one needs next.',
+    image: squad.image,
+    category: 'Developer productivity',
+    pricing: 'Paid',
+    source: 'Website',
+    inStacks: 2100,
+    links: [{ label: 'Website', href: 'https://www.coderabbit.ai/triage' }],
+  },
+  {
+    id: 'cli',
+    name: 'CodeRabbit CLI',
+    tagline:
+      'Review your changes before you push, from the terminal or inside any coding agent.',
+    image: squad.image,
+    category: 'CLI',
+    pricing: 'Free',
+    source: 'GitHub',
+    rating: 4.7,
+    reviews: 310,
+    inStacks: 5300,
+    links: [
+      {
+        label: 'Docs',
+        href: 'https://docs.coderabbit.ai/overview/ide-cli-review',
+      },
+      { label: 'GitHub', href: 'https://github.com/coderabbitai' },
+    ],
+  },
+  {
+    id: 'ide',
+    name: 'CodeRabbit for VS Code',
+    tagline: 'Reviews in the IDE, before the pull request exists.',
+    image: squad.image,
+    category: 'IDE extension',
+    pricing: 'Free',
+    source: 'Website',
+    rating: 4.6,
+    reviews: 1180,
+    inStacks: 4800,
+    links: [
+      {
+        label: 'Marketplace',
+        href: 'https://marketplace.visualstudio.com/items?itemName=CodeRabbit.coderabbit-vscode',
+      },
+    ],
+  },
+  {
+    id: 'change-stack',
+    name: 'Change Stack',
+    tagline:
+      'Intent, behavior, dependencies and risk, tied back to the code you are about to merge.',
+    image: squad.image,
+    category: 'Code review',
+    pricing: 'Paid',
+    source: 'Website',
+    inStacks: 1900,
+    links: [
+      { label: 'Website', href: 'https://www.coderabbit.ai/change-stack' },
+    ],
+  },
+  {
+    id: 'slack-agent',
+    name: 'Agent for Slack',
+    tagline:
+      'Investigation, planning and code edits from Slack, with shared context and governed access.',
+    image: squad.image,
+    category: 'Integrations',
+    pricing: 'Paid',
+    source: 'Website',
+    inStacks: 860,
+    links: [
+      {
+        label: 'Docs',
+        href: 'https://docs.coderabbit.ai/overview/slack-agent',
+      },
+    ],
+  },
+];
+
+/** Illustrative. Reddit's rules widget: numbered, one line, the why underneath. */
+export const rules: [string, string][] = [
+  [
+    'Stay on topic',
+    'Posts are about CodeRabbit: releases, questions, feedback, bugs.',
+  ],
+  [
+    'Search before you ask',
+    'Q&A and FAQ first. Duplicates get merged into the original.',
+  ],
+  [
+    'Show your work, not your product',
+    'Show and tell is for the technical details of what you built. Commercial promotion is removed.',
+  ],
+  [
+    'Bugs get a template',
+    'Repository host, plan, the pull request if you can share it, a screenshot.',
+  ],
+  [
+    'Be useful',
+    'Low-effort posts and comments are removed. Answers that help stay.',
+  ],
+  [
+    'One account, one voice',
+    'No vote brigading, no sockpuppets, no reposting removed content.',
+  ],
+];
+
+/** Illustrative. Ratings on the web, pulled into one place. */
+export interface ReviewSource {
+  id: string;
+  name: string;
+  image: string;
+  rating: number;
+  count: number;
+  href: string;
+}
+
+export const reviewSources: ReviewSource[] = [
+  {
+    id: 'trustpilot',
+    name: 'Trustpilot',
+    image: 'https://cdn.simpleicons.org/trustpilot',
+    rating: 4.5,
+    count: 1240,
+    href: 'https://www.trustpilot.com/review/daily.dev',
+  },
+  {
+    id: 'g2',
+    name: 'G2',
+    image: 'https://cdn.simpleicons.org/g2',
+    rating: 4.6,
+    count: 212,
+    href: 'https://www.g2.com/products/daily-dev',
+  },
+  {
+    id: 'chrome',
+    name: 'Chrome Web Store',
+    image: 'https://cdn.simpleicons.org/googlechrome',
+    rating: 4.7,
+    count: 3100,
+    href: 'https://daily.dev/extension',
+  },
+  {
+    id: 'appstore',
+    name: 'App Store',
+    image: 'https://cdn.simpleicons.org/appstore',
+    rating: 4.8,
+    count: 890,
+    href: 'https://daily.dev/ios',
+  },
+  {
+    id: 'producthunt',
+    name: 'Product Hunt',
+    image: 'https://cdn.simpleicons.org/producthunt',
+    rating: 4.9,
+    count: 1180,
+    href: 'https://www.producthunt.com/products/daily-dev',
+  },
+];
+
+export interface Review {
+  id: string;
+  author: TeamMember;
+  rating: number;
+  title: string;
+  body: string;
+  date: string;
+  helpful: number;
+  reply?: { author: TeamMember; body: string; date: string };
+}
+
+/** Illustrative. Authors are the team, standing in for members. */
+export const reviews: Review[] = [
+  {
+    id: 'r1',
+    author: team[6],
+    rating: 5,
+    title: 'Replaced three newsletters and a Slack channel',
+    body: 'The feed is the first thing I open. Custom feeds got good enough that I dropped my RSS reader, and the in-app reader means I stop tab hoarding. Squads are where the actual conversation is.',
+    date: 'Sep 12',
+    helpful: 41,
+    reply: {
+      author: team[3],
+      body: 'Thank you. The reader was the most requested thing this year, glad it landed for you.',
+      date: 'Sep 13',
+    },
+  },
+  {
+    id: 'r2',
+    author: team[5],
+    rating: 4,
+    title: 'Great on desktop, the mobile app is catching up',
+    body: 'Extension and web are excellent. The iOS app is fine for reading but posting from it is still clunky, and I want the same keyboard shortcuts.',
+    date: 'Sep 4',
+    helpful: 18,
+  },
+  {
+    id: 'r3',
+    author: team[7],
+    rating: 5,
+    title: 'The public API changed how I use it',
+    body: 'Morning briefing agent in Claude Code, bookmarks synced to Obsidian, all with a personal token. 200 free requests is enough for a daily digest.',
+    date: 'Aug 30',
+    helpful: 27,
+  },
+  {
+    id: 'r4',
+    author: team[4],
+    rating: 3,
+    title: 'Too many notifications by default',
+    body: 'Good product, but a new account gets a lot of streak and Squad noise before it learns you. Turn it down out of the box.',
+    date: 'Aug 22',
+    helpful: 9,
+    reply: {
+      author: team[1],
+      body: 'Fair. Defaults are getting a pass this quarter; the streak ones are already quieter for new accounts.',
+      date: 'Aug 23',
+    },
+  },
+];
+
+export const ratingBreakdown: [number, number][] = [
+  [5, 68],
+  [4, 21],
+  [3, 7],
+  [2, 3],
+  [1, 1],
+];
+
+export interface QuizQuestion {
+  id: string;
+  question: string;
+  options: string[];
+  answer: number;
+  /** How the squad answered, in percent, one per option. */
+  split: number[];
+  /** The release the question is generated from. */
+  source: string;
+}
+
+/** Illustrative. Generated from the changelog's own posts. */
+export const quiz = {
+  title: 'This month on daily.dev',
+  played: 2140,
+  questions: [
+    {
+      id: 'q1',
+      question:
+        'How many free requests a month does a non-Plus account get on the public API?',
+      options: ['50', '200', '1,000', 'Unlimited in beta'],
+      answer: 1,
+      split: [12, 61, 19, 8],
+      source: 'Public API access is now open for everyone',
+    },
+    {
+      id: 'q2',
+      question: 'In World, what does a district grow with?',
+      options: [
+        'Posts you write',
+        'Days in your streak',
+        'How much you read on that topic',
+        'Upvotes you receive',
+      ],
+      answer: 2,
+      split: [9, 23, 58, 10],
+      source: 'Meet World: the 3D place your reading builds',
+    },
+    {
+      id: 'q3',
+      question: 'How many streak freezes can you keep stashed at once?',
+      options: ['Two', 'Three', 'Five', 'Ten'],
+      answer: 2,
+      split: [14, 31, 47, 8],
+      source: 'Miss a day, keep your streak',
+    },
+    {
+      id: 'q4',
+      question: 'Which communities does Community Take pull discussion from?',
+      options: [
+        'Reddit and X',
+        'Hacker News and Lobsters',
+        'Discord and Slack',
+        'GitHub and Stack Overflow',
+      ],
+      answer: 1,
+      split: [22, 52, 11, 15],
+      source: 'Community take: see what other developers think about a post',
+    },
+  ] as QuizQuestion[],
+};
+
+export interface SquadPoll {
+  id: string;
+  question: string;
+  options: string[];
+  split: number[];
+  votes: number;
+  author: TeamMember;
+  endsAt: string;
+}
+
+/** Illustrative. The polls a company squad runs: product decisions, not trivia. */
+export const polls: SquadPoll[] = [
+  {
+    id: 'p1',
+    question: 'Which coding agent do you pair CodeRabbit with most?',
+    options: ['Claude Code', 'Cursor', 'Codex', 'GitHub Copilot'],
+    split: [44, 27, 18, 11],
+    votes: 1860,
+    author: team[2],
+    endsAt: '2026-09-30T09:00:00.000Z',
+  },
+  {
+    id: 'p2',
+    question: 'Where should Triage go next?',
+    options: ['GitLab', 'Azure DevOps', 'Bitbucket', 'A CLI view'],
+    split: [41, 22, 15, 22],
+    votes: 1130,
+    author: team[0],
+    endsAt: '2026-09-26T09:00:00.000Z',
+  },
+  {
+    id: 'p3',
+    question: 'How many pull requests does your team open a day?',
+    options: ['Under 10', '10 to 50', '50 to 200', '200 or more'],
+    split: [34, 38, 19, 9],
+    votes: 990,
+    author: team[1],
+    endsAt: '2026-09-24T09:00:00.000Z',
+  },
+];
+
+export interface CompanyLink {
+  id: 'docs' | 'github' | 'x' | 'youtube' | 'linkedin' | 'discord';
+  label: string;
+  /** What the link reads as in a list: the handle, not the URL. */
+  handle: string;
+  href: string;
+}
+
+/** The company's places on the web, in the order it wants them. */
+export const companyLinks: CompanyLink[] = [
+  {
+    id: 'docs',
+    label: 'Docs',
+    handle: 'docs.coderabbit.ai',
+    href: 'https://docs.coderabbit.ai',
+  },
+  {
+    id: 'github',
+    label: 'GitHub',
+    handle: 'coderabbitai',
+    href: 'https://github.com/coderabbitai',
+  },
+  {
+    id: 'x',
+    label: 'X',
+    handle: '@coderabbitai',
+    href: 'https://x.com/coderabbitai',
+  },
+  {
+    id: 'youtube',
+    label: 'YouTube',
+    handle: '@coderabbitai',
+    href: 'https://www.youtube.com/@coderabbitai',
+  },
+  {
+    id: 'linkedin',
+    label: 'LinkedIn',
+    handle: 'in/coderabbitai',
+    href: 'https://www.linkedin.com/company/coderabbitai',
+  },
+  {
+    id: 'discord',
+    label: 'Discord',
+    handle: 'discord.gg/coderabbit',
+    href: 'https://discord.gg/coderabbit',
+  },
+];
+
+/**
+ * Squad analytics, the metrics production's /squads/[handle]/analytics
+ * shows for the last 45 days. Illustrative numbers.
+ */
+export const analyticsDays = Array.from({ length: 45 }, (_, index) => {
+  const seed = (index * 7) % 13;
+  return { organic: 40 + seed * 9, boosted: index > 30 ? 60 + seed * 6 : 0 };
+});
+
+export const analyticsDiscovery: [string, number][] = [
+  ['Impressions', 184200],
+  ['Unique reach', 61400],
+];
+
+export const analyticsEngagement: [string, string][] = [
+  ['Upvotes', formatCount(squad.totalUpvotes)],
+  ['Upvotes ratio', '4.5%'],
+  ['Comments', '2.1K'],
+  ['Bookmarks', '3.8K'],
+  ['Awards', String(squad.totalAwards)],
+  ['Shares', '912'],
+  ['Clicks', '48.2K'],
+];
diff --git a/packages/storybook/stories/squad-page/direction.tsx b/packages/storybook/stories/squad-page/direction.tsx
new file mode 100644
index 00000000000..4c31fbb5eb8
--- /dev/null
+++ b/packages/storybook/stories/squad-page/direction.tsx
@@ -0,0 +1,717 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  ArrowIcon,
+  EyeIcon,
+  MiniCloseIcon,
+  MoveToIcon,
+  PlusIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+  SquadDirectoryNavbar,
+  SquadDirectoryNavbarItem,
+} from '@dailydotdev/shared/src/components/squads/layout/SquadDirectoryNavbar';
+import { polls, products, squad } from './data';
+import { matchSquadPosts, SquadSpotlight } from './squadSpotlight';
+import { CardList, isAdmin, isJoined, isStaff, Viewer } from './kit';
+import { Kit2Styles } from './kit2';
+import { MobileFooterNav, TabletSidebar } from './rail';
+import type { SquadConfig } from './state';
+import { useWorkspace } from './state';
+import { PreviewModeToggle, SharePageWidget } from './owner';
+import type { ManageSection } from './manage';
+import { manageSectionIds, ManageView } from './manage';
+import { AddProductPage, SaveProductButton } from './productForm';
+import { PinnedArea, PinStyle, feedUnder } from './pins';
+import { SquadComposer, SquadHeader, SquadWidgets } from './home';
+import {
+  AnalyticsPage,
+  InvitePage,
+  NotFoundPage,
+  PendingPostsPage,
+  PrivateWall,
+  ColumnFitContext,
+  ContentSource,
+  defaultConfig,
+  docs,
+  DocPage,
+  FeedPoll,
+  FeedSourcePage,
+  manage,
+  MembersPage,
+  ModerationPage,
+  ProductsPage,
+  Rail,
+  RulesPage,
+  SettingsPage,
+  WorkspaceContext,
+  WorkspaceStyles,
+} from './workspace';
+
+// The profile header and the profile's right column, for a squad. Home is
+// the products shelf and one feed under a heading with search; anything
+// that is not the feed (Rules, FAQ, Members, Products, the team's pages)
+// replaces the centre card under a back button and the page title.
+
+/* -------------------------------------------------------------- products */
+
+const ProductsShelf = ({ onOpen }: { onOpen: () => void }): ReactElement => (
+  <section className="flex flex-col gap-3 border-t border-border-subtlest-tertiary px-4 py-4 tablet:px-6">
+    <div className="flex items-center justify-between">
+      <span className="font-bold text-text-primary typo-callout">Products</span>
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.XSmall}
+        icon={<ArrowIcon size={IconSize.Size16} className="rotate-90" />}
+        iconPosition={ButtonIconPosition.Right}
+        onClick={onOpen}
+      >
+        See all {products.length}
+      </Button>
+    </div>
+    <ul
+      className="-mx-4 flex gap-3 overflow-x-auto px-4 tablet:-mx-6 tablet:px-6"
+      style={{ scrollbarWidth: 'none' }}
+    >
+      {products.map((product) => (
+        <li
+          key={product.id}
+          className="flex w-56 shrink-0 items-start gap-3 rounded-16 border border-border-subtlest-tertiary p-3 transition-colors hover:border-border-subtlest-secondary"
+        >
+          <img
+            src={product.image}
+            alt=""
+            className="size-10 shrink-0 rounded-12 object-cover"
+          />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {product.name}
+            </span>
+            <span className="line-clamp-2 text-text-tertiary typo-footnote">
+              {product.tagline}
+            </span>
+          </div>
+        </li>
+      ))}
+    </ul>
+  </section>
+);
+
+/* ------------------------------------------------------------------ feed */
+
+type FeedView = 'feed' | 'about';
+
+/**
+ * Below laptop the right column's widgets sit behind an About tab beside
+ * Posts, drawn as the tags directory draws its tabs. From laptop up the
+ * column is beside the page and the tabs are not needed.
+ */
+const FeedTabs = ({
+  view,
+  onView,
+}: {
+  view: FeedView;
+  onView: (view: FeedView) => void;
+}): ReactElement => (
+  <div className="laptop:hidden">
+    <SquadDirectoryNavbar
+      aria-label="Posts and About"
+      className="!mx-0 !border-0 px-4 tablet:!px-0"
+    >
+      {(
+        [
+          ['feed', 'Posts'],
+          ['about', 'About'],
+        ] as [FeedView, string][]
+      ).map(([id, label]) => (
+        <SquadDirectoryNavbarItem
+          key={id}
+          buttonSize={ButtonSize.Small}
+          isActive={view === id}
+          label={label}
+          ariaLabel={label}
+          onClick={() => onView(id)}
+        />
+      ))}
+    </SquadDirectoryNavbar>
+  </div>
+);
+
+/**
+ * The results page, the way X answers a search from a profile: the page
+ * gives way to the results under a back button and the query. The query
+ * is one chip with the Squad's logo for context: the text reopens
+ * Spotlight to edit it, the cross ends the search.
+ */
+const SearchHeader = ({
+  query,
+  count,
+  onEdit,
+  onClear,
+}: {
+  query: string;
+  count: number;
+  onEdit: () => void;
+  onClear: () => void;
+}): ReactElement => (
+  <div className="flex items-center gap-2 border-b border-border-subtlest-tertiary px-4 py-3">
+    <Button
+      variant={ButtonVariant.Tertiary}
+      size={ButtonSize.Small}
+      icon={<MoveToIcon className="rotate-180" />}
+      aria-label="Back"
+      title="Back"
+      onClick={onClear}
+    />
+    <span className="flex h-8 min-w-0 items-center rounded-10 bg-surface-float pr-1 text-text-primary">
+      <button
+        type="button"
+        onClick={onEdit}
+        title="Edit search"
+        className="flex h-full min-w-0 items-center gap-2 pl-2 pr-1 typo-callout"
+      >
+        <img
+          src={squad.image}
+          alt={squad.name}
+          className="size-5 shrink-0 rounded-full"
+        />
+        <span className="truncate">{query}</span>
+      </button>
+      <Button
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.XSmall}
+        icon={<MiniCloseIcon />}
+        aria-label="Clear search"
+        title="Clear search"
+        onClick={onClear}
+      />
+    </span>
+    <span className="sq-nums ml-auto shrink-0 text-text-tertiary typo-footnote">
+      {count} {count === 1 ? 'post' : 'posts'}
+    </span>
+  </div>
+);
+
+const SearchResults = ({ query }: { query: string }): ReactElement => {
+  const matches = matchSquadPosts(query);
+
+  if (!matches.length) {
+    return (
+      <div className="flex flex-col items-center gap-1 px-4 py-12 text-center">
+        <span className="font-bold text-text-primary typo-callout">
+          No posts match “{query}”
+        </span>
+        <span className="text-text-tertiary typo-footnote">
+          Try a product name, a tag, or fewer words.
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pb-4 tablet:p-6">
+      <CardList
+        entries={matches.map((entry) => ({ ...entry, pinned: false }))}
+      />
+    </div>
+  );
+};
+
+const Feed = ({
+  viewer,
+  pinStyle,
+  onSelect,
+  initialView = 'feed',
+}: {
+  viewer: Viewer;
+  pinStyle: PinStyle;
+  onSelect: (id: string) => void;
+  initialView?: FeedView;
+}): ReactElement => {
+  const { empty } = useWorkspace();
+  const [view, setView] = useState<FeedView>(initialView);
+  const entries = feedUnder(pinStyle).slice(0, 6);
+
+  let body: ReactElement;
+  if (view === 'about') {
+    body = (
+      <div className="flex flex-col gap-4 px-4 tablet:px-0 laptop:hidden">
+        <SquadWidgets
+          viewer={viewer}
+          afterVerified={isStaff(viewer) && <SharePageWidget />}
+          onOpenRules={() => onSelect('rules')}
+          onOpenFaq={() => onSelect('faq')}
+          onOpenAnalytics={() => onSelect('analytics')}
+        />
+      </div>
+    );
+  } else if (empty) {
+    body = (
+      <div className="flex flex-col items-center gap-1 px-4 py-12 text-center">
+        <span className="font-bold text-text-primary typo-callout">
+          Nothing posted yet
+        </span>
+        <span className="max-w-[44ch] text-text-tertiary typo-footnote">
+          {isStaff(viewer)
+            ? 'Connect the content feed or write the first post. Members see the rules, the team and the links until then.'
+            : 'The team has not posted yet. Join to hear when they do.'}
+        </span>
+      </div>
+    );
+  } else {
+    body = (
+      <>
+        <div className="px-4 tablet:px-0">
+          <PinnedArea style={pinStyle} />
+        </div>
+        <div className="flex flex-col gap-3">
+          <CardList entries={entries.slice(0, 2)} />
+          <FeedPoll viewer={viewer} poll={polls[0]} />
+          <CardList entries={entries.slice(2)} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 pb-4 tablet:p-6">
+      <FeedTabs view={view} onView={setView} />
+      {view === 'feed' && <SquadComposer viewer={viewer} />}
+      {body}
+    </div>
+  );
+};
+
+/* -------------------------------------------------------------- sub-page */
+
+const titles: Record<string, string> = {
+  rules: 'Rules',
+  faq: 'FAQ',
+  members: 'Members',
+  products: 'Products',
+  'add-product': 'Add product',
+  moderation: 'Moderation',
+  feed: 'Content feed',
+  analytics: 'Analytics',
+  settings: 'Settings',
+  pending: 'Pending posts',
+};
+
+/**
+ * The sub-page header, the way a profile's Add experience page does it:
+ * back, the page's title, and the page's one action on the right.
+ */
+const SubHeader = ({
+  id,
+  onBack,
+  action,
+}: {
+  id: string;
+  onBack: () => void;
+  action?: ReactNode;
+}): ReactElement => (
+  <div className="flex items-center gap-2 border-b border-border-subtlest-tertiary px-4 py-3">
+    <Button
+      variant={ButtonVariant.Tertiary}
+      size={ButtonSize.Small}
+      icon={<MoveToIcon className="rotate-180" />}
+      aria-label="Back"
+      title="Back"
+      onClick={onBack}
+    />
+    <h1 className="min-w-0 flex-1 truncate font-bold text-text-primary typo-body">
+      {titles[id] ?? id}
+    </h1>
+    {action && <div className="shrink-0">{action}</div>}
+  </div>
+);
+
+const SubPage = ({
+  id,
+  viewer,
+}: {
+  id: string;
+  viewer: Viewer;
+}): ReactElement => {
+  switch (id) {
+    case 'rules':
+      return <RulesPage />;
+    case 'faq':
+      return <DocPage page={docs.faq} />;
+    case 'members':
+      return <MembersPage viewer={viewer} />;
+    case 'products':
+      return <ProductsPage viewer={viewer} />;
+    case 'add-product':
+      return <AddProductPage />;
+    case 'pending':
+      return <PendingPostsPage />;
+    case 'moderation':
+      return <ModerationPage />;
+    case 'feed':
+      return <FeedSourcePage />;
+    case 'analytics':
+      return <AnalyticsPage />;
+    case 'settings':
+      return <SettingsPage />;
+    default:
+      return <RulesPage />;
+  }
+};
+
+/* ------------------------------------------------------------------ page */
+
+const Frame = ({
+  children,
+  aside,
+  notice,
+}: {
+  children: ReactNode;
+  aside?: ReactNode;
+  /** Above the page card, outside it: the preview strip. */
+  notice?: ReactNode;
+}): ReactElement => (
+  <div className="mx-auto flex w-full flex-col laptop:max-w-5xl laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6 laptopL:max-w-6xl">
+    <main className="flex min-w-0 flex-1 flex-col">
+      {notice}
+      <div className="border-border-subtlest-tertiary laptop:rounded-16 laptop:border">
+        {children}
+      </div>
+    </main>
+    {aside && (
+      <aside className="hidden w-80 shrink-0 flex-col gap-4 laptop:flex">
+        {aside}
+      </aside>
+    )}
+  </div>
+);
+
+const PreviewNotice = ({
+  onExit,
+  asAdmin,
+}: {
+  onExit: () => void;
+  asAdmin: boolean;
+}): ReactElement => (
+  <div className="flex items-center gap-3 bg-surface-float px-4 py-2.5 laptop:mb-3 laptop:rounded-16">
+    <EyeIcon
+      size={IconSize.Small}
+      secondary
+      className="shrink-0 text-text-tertiary"
+    />
+    <span className="min-w-0 flex-1 text-text-secondary typo-footnote">
+      <b className="text-text-primary">
+        You&apos;re viewing the page as a visitor.
+      </b>{' '}
+      Team tools are hidden.
+    </span>
+    <Button
+      variant={ButtonVariant.Subtle}
+      size={ButtonSize.XSmall}
+      onClick={onExit}
+    >
+      {asAdmin ? 'Back to admin view' : 'Back to your view'}
+    </Button>
+  </div>
+);
+
+export const DirectionPage = ({
+  viewer: realViewer,
+  active,
+  onSelect,
+  pinStyle = PinStyle.Reddit,
+  initialView,
+}: {
+  viewer: Viewer;
+  active: string;
+  onSelect: (id: string) => void;
+  pinStyle?: PinStyle;
+  initialView?: FeedView;
+}): ReactElement => {
+  const { empty, isPrivate } = useWorkspace();
+  const [previewing, setPreviewing] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState('review');
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        event.preventDefault();
+        setSearching(true);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const spotlight = searching && (
+    <SquadSpotlight
+      initialQuery={active === 'search' ? query : ''}
+      onClose={() => setSearching(false)}
+      onSeeAll={(next) => {
+        setQuery(next);
+        setSearching(false);
+        onSelect('search');
+      }}
+    />
+  );
+  const runsPage = isStaff(realViewer);
+  // Preview renders the page for a logged-in visitor who has not joined:
+  // the public page, without any of the team's controls.
+  const viewer = previewing && runsPage ? Viewer.Visitor : realViewer;
+  // Production gates a private squad behind its Unauthorized copy; the
+  // identity, rules and team stay readable so the door explains itself.
+  const walled = isPrivate && !isJoined(viewer);
+
+  if (active.startsWith('manage') && isStaff(viewer)) {
+    const section = active.startsWith('manage-')
+      ? active.slice('manage-'.length)
+      : undefined;
+    return (
+      <ManageView
+        key={active}
+        viewer={viewer}
+        initialSection={section as ManageSection | undefined}
+        onExit={() => onSelect('home')}
+      />
+    );
+  }
+
+  if (active === 'invite' || active === 'not-found') {
+    return (
+      <Frame>
+        <ColumnFitContext.Provider value>
+          {active === 'invite' ? (
+            <InvitePage viewer={viewer} />
+          ) : (
+            <NotFoundPage />
+          )}
+        </ColumnFitContext.Provider>
+      </Frame>
+    );
+  }
+
+  return (
+    <Frame
+      notice={
+        previewing ? (
+          <PreviewNotice
+            onExit={() => setPreviewing(false)}
+            asAdmin={isAdmin(realViewer)}
+          />
+        ) : undefined
+      }
+      aside={
+        <>
+          {runsPage && (
+            <PreviewModeToggle
+              checked={previewing}
+              onToggle={() => setPreviewing((value) => !value)}
+            />
+          )}
+          <SquadWidgets
+            afterVerified={runsPage && !previewing && <SharePageWidget />}
+            viewer={viewer}
+            onOpenRules={() => onSelect('rules')}
+            onOpenFaq={() => onSelect('faq')}
+            onOpenAnalytics={() => onSelect('analytics')}
+          />
+        </>
+      }
+    >
+      {active === 'home' ? (
+        <>
+          <SquadHeader
+            viewer={viewer}
+            standalone
+            onOpenMembers={() => onSelect('members')}
+            onManage={onSelect}
+            onSearch={() => setSearching(true)}
+          />
+          {walled ? (
+            <div className="border-t border-border-subtlest-tertiary">
+              <ColumnFitContext.Provider value>
+                <PrivateWall viewer={viewer} />
+              </ColumnFitContext.Provider>
+            </div>
+          ) : (
+            <>
+              {!empty && <ProductsShelf onOpen={() => onSelect('products')} />}
+              <div className="border-t border-border-subtlest-tertiary">
+                <Feed
+                  key={viewer}
+                  viewer={viewer}
+                  pinStyle={pinStyle}
+                  onSelect={onSelect}
+                  initialView={initialView}
+                />
+              </div>
+            </>
+          )}
+        </>
+      ) : active === 'search' ? (
+        <>
+          <SearchHeader
+            query={query}
+            count={matchSquadPosts(query).length}
+            onEdit={() => setSearching(true)}
+            onClear={() => onSelect('home')}
+          />
+          <SearchResults query={query} />
+        </>
+      ) : (
+        <>
+          <SubHeader
+            id={active}
+            onBack={() =>
+              onSelect(active === 'add-product' ? 'products' : 'home')
+            }
+            action={
+              (active === 'products' && isAdmin(viewer) && (
+                <Button
+                  variant={ButtonVariant.Subtle}
+                  size={ButtonSize.Small}
+                  icon={<PlusIcon />}
+                  onClick={() => onSelect('add-product')}
+                >
+                  Add product
+                </Button>
+              )) ||
+              (active === 'add-product' && (
+                <SaveProductButton onSave={() => onSelect('products')} />
+              )) ||
+              undefined
+            }
+          />
+          <ColumnFitContext.Provider value>
+            {walled ? (
+              <PrivateWall viewer={viewer} />
+            ) : (
+              <SubPage id={active} viewer={viewer} />
+            )}
+          </ColumnFitContext.Provider>
+        </>
+      )}
+      {spotlight}
+    </Frame>
+  );
+};
+
+/** The team's pages live in the Manage area; Settings opens its Details. */
+const toManage: Record<string, string> = {
+  moderation: 'manage-moderation',
+  feed: 'manage-feed',
+  analytics: 'manage-analytics',
+  settings: 'manage-details',
+};
+
+export const directionPageIds = [
+  'home',
+  'about',
+  'search',
+  'add-product',
+  'rules',
+  'faq',
+  'members',
+  'products',
+  ...manage.pages.map((page) => page.id),
+  'pending',
+  'invite',
+  'not-found',
+  'manage',
+  ...manageSectionIds.map((id) => `manage-${id}`),
+];
+
+export const DirectionShell = ({
+  viewer = Viewer.Visitor,
+  initialPage = 'home',
+  height = 48,
+  width = 1440,
+  pinStyle,
+  fluid = false,
+  source = ContentSource.Feed,
+  empty = false,
+  isPrivate = false,
+  config,
+}: {
+  viewer?: Viewer;
+  /** A page id, or about for the right column's widgets below laptop. */
+  initialPage?: string;
+  /** rem */
+  height?: number;
+  width?: number;
+  pinStyle?: PinStyle;
+  source?: ContentSource;
+  empty?: boolean;
+  isPrivate?: boolean;
+  config?: Partial<SquadConfig>;
+  /**
+   * Fill the viewport and let its breakpoints decide the layout, the way
+   * the app does: the classic sidebar from laptop, the tablet column from
+   * 656px, the floating tab bar on phones.
+   */
+  fluid?: boolean;
+}): ReactElement => {
+  const aboutPage = initialPage === 'about';
+  const [active, setPage] = useState(
+    aboutPage ? 'home' : toManage[initialPage] ?? initialPage,
+  );
+  const setActive = (id: string) => setPage(toManage[id] ?? id);
+  const loggedIn = viewer !== Viewer.Anonymous;
+  const page = (
+    <main className="ws-scroll flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto">
+      <DirectionPage
+        viewer={viewer}
+        active={active}
+        onSelect={setActive}
+        pinStyle={pinStyle}
+        initialView={aboutPage ? 'about' : undefined}
+      />
+    </main>
+  );
+
+  return (
+    <WorkspaceContext.Provider
+      value={{
+        viewer,
+        source,
+        empty,
+        isPrivate,
+        config: { ...defaultConfig, ...config },
+      }}
+    >
+      <WorkspaceStyles />
+      <Kit2Styles />
+      {fluid ? (
+        <div className="flex h-dvh w-full flex-col bg-background-default text-text-primary tablet:flex-row">
+          <div className="hidden laptop:flex">
+            <Rail loggedIn={loggedIn} />
+          </div>
+          <div className="hidden tablet:flex laptop:hidden">
+            <TabletSidebar />
+          </div>
+          {page}
+          <div className="tablet:hidden">
+            <MobileFooterNav />
+          </div>
+        </div>
+      ) : (
+        <div
+          style={{ width, maxWidth: '100%', height: `${height}rem` }}
+          className="sq-elevated flex overflow-hidden rounded-16 bg-background-default text-text-primary"
+        >
+          <Rail loggedIn={loggedIn} />
+          {page}
+        </div>
+      )}
+    </WorkspaceContext.Provider>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/home.tsx b/packages/storybook/stories/squad-page/home.tsx
new file mode 100644
index 00000000000..fbb538f1169
--- /dev/null
+++ b/packages/storybook/stories/squad-page/home.tsx
@@ -0,0 +1,1542 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { useShareOrCopyLink } from '@dailydotdev/shared/src/hooks/useShareOrCopyLink';
+import { LogEvent } from '@dailydotdev/shared/src/lib/log';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AddUserIcon,
+  ArrowIcon,
+  BellIcon,
+  CardLayout,
+  EarthIcon,
+  EditIcon,
+  ExitIcon,
+  FeedbackIcon,
+  FlagIcon,
+  HashtagIcon,
+  LockIcon,
+  GitHubIcon,
+  LinkIcon,
+  LinkedInIcon,
+  MedalBadgeIcon,
+  MenuIcon,
+  PinIcon,
+  PlusIcon,
+  SearchIcon,
+  SettingsIcon,
+  SourceIcon,
+  TimerIcon,
+  TourIcon,
+  TwitterIcon,
+  AnalyticsIcon,
+  MegaphoneIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { BoostIcon } from '@dailydotdev/shared/src/components/icons/Boost';
+import type { Entry } from './data';
+import {
+  companyLinks,
+  feedEntries,
+  analyticsDays,
+  analyticsDiscovery,
+  analyticsEngagement,
+  formatCount,
+  formatSince,
+  jobs,
+  pinnedEntry,
+  squad,
+  stack,
+  rules,
+  team,
+  moderationQueueCount,
+} from './data';
+import {
+  Avatar,
+  CardList,
+  Facepile,
+  isAdmin,
+  isBlocked,
+  isJoined,
+  isLoggedIn,
+  isStaff,
+  linkIcon,
+  VerifiedMark,
+  VerifiedSeal,
+  Viewer,
+} from './kit';
+import { ComposerEntry } from './composer';
+import {
+  ContentSource,
+  MemberRole,
+  PostingGate,
+  postingState,
+  useWorkspace,
+} from './state';
+
+// The squad's Home, built on the profile page's skeleton so a person and a
+// squad read as the same kind of thing. Same card, same cover height, same
+// avatar seat, same name/meta/actions/stats stack, same divide-y sections
+// below (About, Stack, Activity, Experiences becomes Open roles), and the
+// same right column of widgets. Where the profile shows Reading Overview,
+// the squad shows its posting overview; where it lists Active in these
+// Squads, the squad lists its team.
+
+export const Separator = (): ReactElement => (
+  <span className="mx-1 text-text-secondary typo-subhead">•</span>
+);
+
+/* -------------------------------------------------------------- header */
+
+/** ProfileHeader, for a squad. */
+const MetaItem = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}): ReactElement => (
+  <span
+    className={classNames(
+      'flex items-center gap-2 whitespace-nowrap',
+      className,
+    )}
+  >
+    <span aria-hidden className="text-text-quaternary">
+      ·
+    </span>
+    {children}
+  </span>
+);
+
+export const SquadHeader = ({
+  viewer,
+  standalone,
+  onOpenMembers,
+  extra,
+  onManage,
+  onSearch,
+}: {
+  viewer: Viewer;
+  standalone: boolean;
+  onOpenMembers?: () => void;
+  extra?: ReactNode;
+  /** Opens a Manage page from the options menu (moderators and admins). */
+  onManage?: (id: string) => void;
+  /** Opens Spotlight filtered to this Squad, the way X searches a profile. */
+  onSearch?: () => void;
+}): ReactElement => {
+  const { config } = useWorkspace();
+  // Native share sheet on phones, copy link elsewhere, as SquadOptionsButton.
+  const [, onShare] = useShareOrCopyLink({
+    link: squad.permalink,
+    text: `Check out ${squad.name} on daily.dev`,
+    logObject: () => ({ event_name: LogEvent.ShareSource }),
+  });
+  const joined = isJoined(viewer) && !isAdmin(viewer);
+  const canJoin = standalone && !isJoined(viewer);
+  // One text-only button at the end of the row, Join Squad until you do,
+  // Joined after. On phones it leaves the row for a full-width button
+  // under the stats.
+  // Boost is the admin's Join: last in the row on larger screens, and
+  // beside Share page under the stats on phones.
+  const boost =
+    isAdmin(viewer) && config.isPublic
+      ? (size = ButtonSize.Small, className?: string): ReactElement => (
+          <Button
+            variant={ButtonVariant.Primary}
+            size={size}
+            icon={<BoostIcon secondary size={IconSize.Small} />}
+            className={className}
+          >
+            {config.campaign ? 'View boost' : 'Boost'}
+          </Button>
+        )
+      : null;
+  const join =
+    joined || canJoin
+      ? (size: ButtonSize, className?: string): ReactElement =>
+          joined ? (
+            <Button
+              variant={ButtonVariant.Subtle}
+              size={size}
+              className={className}
+            >
+              Joined
+            </Button>
+          ) : (
+            <Button
+              variant={ButtonVariant.Primary}
+              size={size}
+              className={className}
+              disabled={isBlocked(viewer) || !config.isPublic}
+              title={
+                isBlocked(viewer)
+                  ? 'You are not allowed to join the Squad'
+                  : undefined
+              }
+            >
+              {config.isPublic ? 'Join Squad' : 'Invite only'}
+            </Button>
+          )
+      : null;
+
+  return (
+    <div className="relative w-full">
+      <div className="relative h-28 overflow-hidden tablet:h-36 laptop:rounded-t-[0.9375rem]">
+        <img
+          src={squad.headerImage}
+          alt="Cover"
+          className={classNames(
+            'h-full w-full object-cover',
+            squad.headerImagePosition === 'top' && 'object-top',
+            squad.headerImagePosition === 'bottom' && 'object-bottom',
+          )}
+        />
+      </div>
+      <div className="flex flex-col px-4 pb-5 tablet:px-6">
+        {/* Logo and actions share one baseline, so the identity column below
+          is text only and every row starts at the same x. */}
+        <div className="-mt-8 flex items-end justify-between gap-4 tablet:-mt-12">
+          <img
+            src={squad.image}
+            alt="Logo"
+            className="relative size-20 shrink-0 rounded-full bg-background-default object-cover ring-4 ring-background-default tablet:size-[6.5rem]"
+          />
+          <div className="flex items-center gap-2 pb-1">
+            {isAdmin(viewer) && (
+              <Button
+                variant={ButtonVariant.Subtle}
+                size={ButtonSize.Small}
+                icon={<EditIcon />}
+                aria-label="Edit page"
+                title="Edit page"
+                onClick={() => onManage?.('manage-details')}
+              />
+            )}
+            {extra}
+            {isJoined(viewer) && <NotificationsMenu viewer={viewer} />}
+            <span
+              className={classNames(
+                'flex',
+                isAdmin(viewer) && 'hidden tablet:flex',
+              )}
+            >
+              <Button
+                variant={ButtonVariant.Subtle}
+                size={ButtonSize.Small}
+                icon={<LinkIcon />}
+                aria-label="Share"
+                title="Share"
+                onClick={onShare}
+              />
+            </span>
+            {onSearch && (
+              <Button
+                variant={ButtonVariant.Subtle}
+                size={ButtonSize.Small}
+                icon={<SearchIcon />}
+                aria-label={`Search ${squad.name}`}
+                title={`Search ${squad.name} (⌘K)`}
+                onClick={onSearch}
+              />
+            )}
+            <MoreMenu viewer={viewer} onManage={onManage} />
+            {boost && <span className="hidden tablet:flex">{boost()}</span>}
+            {join && (
+              <span className="hidden tablet:flex">
+                {join(ButtonSize.Small)}
+              </span>
+            )}
+          </div>
+        </div>
+        {isBlocked(viewer) && (
+          <div className="mt-4 flex items-center gap-2 rounded-12 bg-surface-float px-3 py-2 text-text-tertiary typo-footnote">
+            <LockIcon size={IconSize.Small} />
+            You no longer have access to this Squad. Contact a moderator if you
+            think this is a mistake.
+          </div>
+        )}
+        <div className="mt-4 flex flex-col gap-1">
+          <h1 className="flex flex-wrap items-center gap-x-2 gap-y-1 font-bold text-text-primary typo-title2">
+            {squad.name}
+            <VerifiedMark label={false} sealClassName="size-5" />
+          </h1>
+          <p className="text-text-secondary typo-body">{squad.tagline}</p>
+        </div>
+        <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-text-tertiary typo-footnote">
+          <span className="flex items-center gap-1.5 text-text-secondary">
+            <img src={squad.image} alt="" className="size-4 rounded-full" />
+            {squad.company.website}
+          </span>
+          {(config.featured || !config.isPublic) && (
+            <MetaItem>
+              <PrivacyChip />
+            </MetaItem>
+          )}
+          {config.isPublic && config.category && (
+            <MetaItem>
+              <a
+                href="/squads/discover"
+                className="text-text-link hover:underline"
+                title={`View all Squads in ${config.category}`}
+              >
+                {config.category}
+              </a>
+            </MetaItem>
+          )}
+          <MetaItem className="hidden tablet:flex">
+            {squad.company.location}
+          </MetaItem>
+          <MetaItem className="hidden tablet:flex">
+            Since {formatSince(squad.createdAt)}
+          </MetaItem>
+        </div>
+        <SquadStats onOpenMembers={onOpenMembers} />
+        {join && (
+          <div className="mt-4 flex tablet:hidden">
+            {join(ButtonSize.Medium, 'w-full')}
+          </div>
+        )}
+        {isAdmin(viewer) && (
+          <div className="mt-4 flex gap-2 tablet:hidden">
+            {boost?.(ButtonSize.Medium, 'flex-1')}
+            <Button
+              variant={ButtonVariant.Subtle}
+              size={ButtonSize.Medium}
+              className="flex-1"
+              onClick={onShare}
+            >
+              Share page
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Production's SquadPrivacyState, as a word in the meta line instead of a
+ * button, and only when it says something: Featured or Private. A plain
+ * public page is the default and does not announce it.
+ */
+const PrivacyChip = (): ReactElement => {
+  const { config } = useWorkspace();
+  const [icon, label] = config.featured
+    ? [<SourceIcon key="f" size={IconSize.XSmall} secondary />, 'Featured']
+    : config.isPublic
+    ? [<EarthIcon key="p" size={IconSize.XSmall} />, 'Public']
+    : [<LockIcon key="l" size={IconSize.XSmall} />, 'Private'];
+
+  return (
+    <span
+      className={classNames(
+        'flex items-center gap-1',
+        config.featured && 'font-bold text-accent-cabbage-default',
+      )}
+    >
+      {icon}
+      {label} Squad
+    </span>
+  );
+};
+
+type MenuEntry =
+  | {
+      icon: ReactElement;
+      label: string;
+      danger?: boolean;
+      badge?: number;
+      onSelect?: () => void;
+    }
+  | { section: string }
+  | { divider: true };
+
+const MenuList = ({
+  items,
+  onClose,
+}: {
+  items: MenuEntry[];
+  onClose: () => void;
+}): ReactElement => (
+  <ul className="sq-elevated absolute right-0 top-full z-popup mt-1 flex w-64 flex-col rounded-12 bg-background-default p-1">
+    {items.map((item, index) => {
+      if ('divider' in item) {
+        return (
+          <li
+            // eslint-disable-next-line react/no-array-index-key
+            key={`divider-${index}`}
+            aria-hidden
+            className="my-1 h-px bg-border-subtlest-tertiary"
+          />
+        );
+      }
+      if ('section' in item) {
+        return (
+          <li
+            key={item.section}
+            className="px-2 pb-1 pt-2 font-bold uppercase tracking-[0.12em] text-text-quaternary typo-caption2"
+          >
+            {item.section}
+          </li>
+        );
+      }
+      return (
+        <li key={item.label}>
+          <button
+            type="button"
+            onClick={() => {
+              item.onSelect?.();
+              onClose();
+            }}
+            className={classNames(
+              'flex w-full items-center gap-2 rounded-8 px-2 py-1.5 text-left typo-callout hover:bg-surface-float',
+              item.danger
+                ? 'text-status-error'
+                : 'text-text-secondary hover:text-text-primary',
+            )}
+          >
+            {item.icon}
+            <span className="min-w-0 flex-1">{item.label}</span>
+            {!!item.badge && (
+              <span className="sq-nums rounded-8 bg-surface-float px-1.5 font-bold text-text-tertiary typo-caption2">
+                {item.badge}
+              </span>
+            )}
+          </button>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+/**
+ * Production's SquadHeaderMenu, item for item, gated the same way: Add to
+ * custom feed, Squad settings (Edit), Invitation link (public, logged in,
+ * not a member), Learn how Squads work, Feedback (members), Report Squad,
+ * Leave Squad (members who are not the admin). Award
+ * moved here from the bar.
+ */
+const MoreMenu = ({
+  viewer,
+  onManage,
+}: {
+  viewer: Viewer;
+  onManage?: (id: string) => void;
+}): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const { config, source } = useWorkspace();
+  const small = (icon: ReactElement) => icon;
+  // The team's pages and production's Squad settings in one place: the
+  // options menu opens with Manage for moderators and admins.
+  const manageItems: MenuEntry[] = isStaff(viewer)
+    ? [
+        { section: 'Manage' },
+        {
+          icon: <TimerIcon size={IconSize.Small} />,
+          label: 'Moderation',
+          badge: moderationQueueCount,
+          onSelect: () => onManage?.('moderation'),
+        },
+        ...(isAdmin(viewer) && source === ContentSource.Feed
+          ? [
+              {
+                icon: <MegaphoneIcon size={IconSize.Small} />,
+                label: 'Content feed',
+                onSelect: () => onManage?.('feed'),
+              },
+            ]
+          : []),
+        ...(isAdmin(viewer)
+          ? [
+              {
+                icon: <AnalyticsIcon size={IconSize.Small} />,
+                label: 'Analytics',
+                onSelect: () => onManage?.('analytics'),
+              },
+              {
+                icon: <SettingsIcon size={IconSize.Small} />,
+                label: 'Settings',
+                onSelect: () => onManage?.('settings'),
+              },
+            ]
+          : []),
+        { divider: true },
+      ]
+    : [];
+  const items: MenuEntry[] = [
+    ...manageItems,
+    {
+      icon: small(<HashtagIcon size={IconSize.Small} />),
+      label: 'Add to custom feed',
+    },
+    ...(!isJoined(viewer) &&
+    isLoggedIn(viewer) &&
+    !isBlocked(viewer) &&
+    config.isPublic
+      ? [
+          {
+            icon: small(<AddUserIcon size={IconSize.Small} />),
+            label: 'Invitation link',
+          },
+        ]
+      : []),
+    ...(isLoggedIn(viewer) && !isAdmin(viewer)
+      ? [
+          {
+            icon: small(<MedalBadgeIcon size={IconSize.Small} />),
+            label: 'Award the Squad',
+          },
+        ]
+      : []),
+    {
+      icon: small(<TourIcon size={IconSize.Small} />),
+      label: 'Learn how Squads work',
+    },
+    ...(isJoined(viewer)
+      ? [
+          {
+            icon: small(<FeedbackIcon size={IconSize.Small} />),
+            label: 'Feedback',
+          },
+        ]
+      : []),
+    { icon: small(<FlagIcon size={IconSize.Small} />), label: 'Report Squad' },
+    ...(isJoined(viewer) && !isAdmin(viewer)
+      ? [
+          {
+            icon: small(<ExitIcon size={IconSize.Small} />),
+            label: 'Leave Squad',
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div className="relative">
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        icon={<MenuIcon />}
+        aria-label="Squad options"
+        title={isStaff(viewer) ? 'Manage and options' : 'Squad options'}
+        onClick={() => setOpen((value) => !value)}
+      />
+      {open && <MenuList items={items} onClose={() => setOpen(false)} />}
+    </div>
+  );
+};
+
+/**
+ * Production's SquadNotificationsModal behind the bell: three switches,
+ * the third for the admin only.
+ */
+const NotificationsMenu = ({ viewer }: { viewer: Viewer }): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState({
+    feed: true,
+    posts: true,
+    members: false,
+  });
+  const rows: [keyof typeof state, string][] = [
+    ['feed', 'Show new posts on For You'],
+    ['posts', 'Notify me about new posts'],
+    ...(isAdmin(viewer)
+      ? ([['members', 'Notify me about new members']] as [
+          keyof typeof state,
+          string,
+        ][])
+      : []),
+  ];
+
+  return (
+    <div className="relative">
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        icon={<BellIcon secondary={open} />}
+        aria-label="Squad notifications settings"
+        onClick={() => setOpen((value) => !value)}
+      />
+      {open && (
+        <div className="sq-elevated absolute right-0 top-full z-popup mt-1 flex w-72 flex-col gap-1 rounded-12 bg-background-default p-2">
+          <span className="px-2 py-1 font-bold text-text-primary typo-callout">
+            Notifications
+          </span>
+          {rows.map(([key, label]) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() =>
+                setState((value) => ({ ...value, [key]: !value[key] }))
+              }
+              className="flex items-center justify-between gap-3 rounded-8 px-2 py-1.5 text-left text-text-secondary typo-callout hover:bg-surface-float"
+            >
+              {label}
+              <span
+                className={classNames(
+                  'relative h-4 w-7 shrink-0 rounded-[999px] transition-colors',
+                  state[key] ? 'bg-accent-cabbage-default' : 'bg-surface-hover',
+                )}
+              >
+                <span
+                  className={classNames(
+                    'absolute top-0.5 size-3 rounded-[999px] bg-text-primary transition-transform',
+                    state[key] ? 'translate-x-3.5' : 'translate-x-0.5',
+                  )}
+                />
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * UserStats, straightened: one strip under a hairline, tabular figures, and
+ * the member faces on the Members figure so the social proof does not need
+ * a row of its own.
+ */
+const SquadStats = ({
+  onOpenMembers,
+}: {
+  onOpenMembers?: () => void;
+}): ReactElement => {
+  const Item = ({ amount, title }: { amount: number; title: string }) => (
+    <span className="flex items-baseline gap-1">
+      <b className="sq-nums text-text-primary typo-callout">
+        {formatCount(amount)}
+      </b>
+      <span className="text-text-tertiary typo-footnote">{title}</span>
+    </span>
+  );
+
+  return (
+    <div className="mt-4 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-border-subtlest-tertiary pt-4">
+      <button
+        type="button"
+        onClick={onOpenMembers}
+        className="flex items-center gap-2 rounded-8 text-left transition-opacity hover:opacity-80"
+      >
+        <Facepile members={team.slice(3)} max={3} size={1.25} />
+        <Item amount={squad.membersCount} title="Members" />
+      </button>
+      <Item amount={squad.totalPosts} title="Posts" />
+      <Item amount={squad.totalViews} title="Views" />
+      <Item amount={squad.totalUpvotes} title="Upvotes" />
+      {squad.totalAwards > 0 && (
+        <button
+          type="button"
+          className="rounded-8 text-left transition-opacity hover:opacity-80"
+          title="See awards"
+        >
+          <Item amount={squad.totalAwards} title="Awards" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+/* ------------------------------------------------------------- sections */
+
+export const SectionTitle = ({
+  children,
+  action,
+}: {
+  children: ReactNode;
+  action?: ReactNode;
+}): ReactElement => (
+  <div className="flex items-center justify-between">
+    <span className="font-bold text-text-primary typo-body">{children}</span>
+    {action}
+  </div>
+);
+
+const social = [
+  {
+    id: 'website',
+    icon: <LinkIcon size={IconSize.XSmall} />,
+    label: squad.company.website,
+  },
+  {
+    id: 'github',
+    icon: <GitHubIcon size={IconSize.XSmall} />,
+    label: 'GitHub',
+  },
+  { id: 'x', icon: <TwitterIcon size={IconSize.XSmall} />, label: 'X' },
+  {
+    id: 'linkedin',
+    icon: <LinkedInIcon size={IconSize.XSmall} />,
+    label: 'LinkedIn',
+  },
+];
+
+/** AboutMe, for a squad: the links row, then the readme. */
+const AboutSection = (): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle>About</SectionTitle>
+    <div className="flex flex-wrap items-center gap-2">
+      {social.map((link) => (
+        <Button
+          key={link.id}
+          variant={ButtonVariant.Subtle}
+          size={ButtonSize.Small}
+          icon={link.icon}
+          aria-label={link.label}
+        />
+      ))}
+    </div>
+    <div className="flex flex-col gap-3 text-text-primary typo-body">
+      <p className="font-bold">
+        Every release, explained by the people who built it. 👋
+      </p>
+      <p>
+        This is where the {squad.name} team announces what shipped, what is in
+        beta, and why we changed something. Every post is written by the
+        engineer behind it, and the comments are where we take the bug reports.
+      </p>
+      <p>What you will find here</p>
+      <p>
+        <b>🚀 Releases:</b> a post for every feature, the week it ships.
+      </p>
+      <p>
+        <b>🧪 Betas:</b> early access, and how to turn it on.
+      </p>
+      <p>
+        <b>🛠️ Fixes:</b> the monthly release notes, pinned at the top.
+      </p>
+      <p>
+        Something broke? Post it here with the #bug tag and someone from the
+        team picks it up.
+      </p>
+    </div>
+  </div>
+);
+
+/** ProfileUserStack, for a squad. Same rows, same title row. */
+const StackSection = ({ viewer }: { viewer: Viewer }): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle
+      action={
+        isStaff(viewer) && (
+          <Button
+            variant={ButtonVariant.Float}
+            size={ButtonSize.XSmall}
+            icon={<EditIcon />}
+            aria-label="Edit stack"
+          />
+        )
+      }
+    >
+      Stack and tools
+    </SectionTitle>
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2 text-text-tertiary typo-footnote">
+        Built with
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {stack.map((item) => (
+          <div
+            key={item.name}
+            className="flex items-center justify-between gap-3 rounded-12 border border-border-subtlest-tertiary px-3 pb-2.5 pt-2 hover:border-border-subtlest-secondary"
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <img src={item.image} alt="" className="size-6 rounded-6" />
+              <span className="truncate font-bold text-text-primary typo-callout">
+                {item.name}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+/* ---------------------------------------------------------------- posts */
+
+/**
+ * Reddit's feed controls, in our clothes: one sort menu instead of a row of
+ * tabs, the grid / list toggle the product already has, and search. No tab
+ * bar anywhere on the page; the sidebar is the navigation.
+ */
+export const PostsToolbar = ({
+  sort,
+  view = 'grid',
+  children,
+}: {
+  sort: string;
+  view?: 'grid' | 'list';
+  children?: ReactNode;
+}): ReactElement => (
+  <div className="flex items-center gap-2">
+    <Button
+      variant={ButtonVariant.Subtle}
+      size={ButtonSize.Small}
+      icon={<ArrowIcon className="rotate-180" />}
+      iconPosition={ButtonIconPosition.Right}
+    >
+      {sort}
+    </Button>
+    {children}
+    <div className="ml-auto flex items-center gap-1">
+      <Button
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        icon={<SearchIcon />}
+        aria-label="Search"
+      />
+      <Button
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        icon={<CardLayout secondary={view === 'list'} />}
+        aria-label="Toggle layout"
+      />
+    </div>
+  </div>
+);
+
+/**
+ * Reddit's community highlight: the pinned post as one compact card above
+ * the feed, thumbnail and all, instead of a text row.
+ */
+export const Highlight = ({ entry }: { entry: Entry }): ReactElement => (
+  <div className="flex items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3">
+    {entry.image ? (
+      <img
+        src={entry.image}
+        alt=""
+        className="h-14 w-24 shrink-0 rounded-10 object-cover"
+      />
+    ) : (
+      <span className="flex h-14 w-24 shrink-0 items-center justify-center rounded-10 bg-background-default text-text-tertiary">
+        <PinIcon size={IconSize.Medium} />
+      </span>
+    )}
+    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+      <span className="flex items-center gap-1.5 text-text-tertiary typo-caption1">
+        <PinIcon size={IconSize.XSmall} />
+        Pinned by {entry.author.name}
+      </span>
+      <span className="line-clamp-1 font-bold text-text-primary typo-callout">
+        {entry.title}
+      </span>
+      <span className="line-clamp-1 text-text-tertiary typo-footnote">
+        {entry.summary}
+      </span>
+    </div>
+  </div>
+);
+
+/**
+ * Production's SharePostBar, both halves: the composer when the viewer may
+ * post, the lock card with its exact copy when not. A review note when the
+ * squad approves member posts first, and the member's own queue above it.
+ */
+export const SquadComposer = ({
+  viewer,
+  onOpenPending,
+}: {
+  viewer: Viewer;
+  onOpenPending?: () => void;
+}): ReactElement => {
+  const { config } = useWorkspace();
+  const state = postingState(viewer, config);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {isJoined(viewer) && config.ownPending > 0 && (
+        <button
+          type="button"
+          onClick={onOpenPending}
+          className="mx-4 flex items-center gap-2 rounded-12 bg-surface-float px-3 py-2 text-left text-text-secondary typo-footnote hover:text-text-primary tablet:mx-0"
+        >
+          <TimerIcon size={IconSize.Small} className="text-text-tertiary" />
+          <span className="min-w-0 flex-1">
+            <b className="sq-nums text-text-primary">{config.ownPending}</b> of
+            your posts {config.ownPending === 1 ? 'is' : 'are'} waiting for a
+            moderator
+          </span>
+          <ArrowIcon size={IconSize.XSmall} className="rotate-90" />
+        </button>
+      )}
+      {state.canPost ? (
+        <ComposerEntry canPoll={isStaff(viewer)} reviewed={state.reviewed} />
+      ) : (
+        <div className="mx-4 flex items-center gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float px-4 py-3 text-text-quaternary typo-callout tablet:mx-0">
+          <LockIcon size={IconSize.Small} />
+          {state.reason}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Production's SquadFeedHeading toggle, members only: pinned posts fold
+ * away per member and the button says how many are hidden.
+ */
+export const PinnedToggle = ({
+  viewer,
+}: {
+  viewer: Viewer;
+}): ReactElement | null => {
+  const { config } = useWorkspace();
+  const [collapsed, setCollapsed] = useState(config.pinnedCollapsed);
+
+  if (!isJoined(viewer)) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant={ButtonVariant.Subtle}
+      size={ButtonSize.Small}
+      icon={<PinIcon secondary={!collapsed} />}
+      onClick={() => setCollapsed((value) => !value)}
+    >
+      {collapsed ? 'Show pinned posts (1)' : 'Hide pinned posts'}
+    </Button>
+  );
+};
+
+/** The posts, as the page. */
+export const PostsArea = ({
+  sort,
+  entries: list,
+  pinned,
+  composer,
+  toolbarChildren,
+}: {
+  sort: string;
+  entries: Entry[];
+  pinned?: Entry;
+  composer?: ReactNode;
+  toolbarChildren?: ReactNode;
+}): ReactElement => (
+  <div className="flex flex-col gap-4 p-6">
+    {composer}
+    <PostsToolbar sort={sort}>{toolbarChildren}</PostsToolbar>
+    {pinned && <Highlight entry={pinned} />}
+    <CardList entries={list} />
+    <Button
+      variant={ButtonVariant.Subtle}
+      size={ButtonSize.Medium}
+      className="w-full"
+    >
+      Load more
+    </Button>
+  </div>
+);
+
+const facts = [
+  ['Website', squad.company.website],
+  ['Headquarters', squad.company.location],
+  ['Company size', squad.company.size],
+  ['Founded', '2020'],
+  ['Category', squad.category],
+  ['Verified since', formatSince(squad.createdAt)],
+];
+
+/** LinkedIn's overview block and GitHub's verified-domain claim, as one list. */
+const CompanySection = (): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle>Company</SectionTitle>
+    <dl className="grid grid-cols-2 gap-x-8 gap-y-3">
+      {facts.map(([label, value]) => (
+        <div key={label} className="flex flex-col gap-0.5">
+          <dt className="text-text-quaternary typo-caption1">{label}</dt>
+          <dd className="text-text-primary typo-callout">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  </div>
+);
+
+export const TeamSection = (): ReactElement => (
+  <div className="flex flex-col gap-4 py-4">
+    <SectionTitle>Team</SectionTitle>
+    <div className="grid grid-cols-2 gap-x-6 gap-y-3">
+      {team.map((member) => (
+        <div key={member.id} className="flex items-center gap-3">
+          <Avatar member={member} size={2.25} />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {member.name}
+            </span>
+            <span className="truncate text-text-tertiary typo-footnote">
+              {member.title}
+            </span>
+          </div>
+          <span className="shrink-0 rounded-6 bg-surface-float px-1.5 py-0.5 text-text-tertiary typo-caption2">
+            {member.role}
+          </span>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+/* -------------------------------------------------------------- widgets */
+
+export const Widget = ({
+  title,
+  children,
+  action,
+}: {
+  title: ReactNode;
+  children: ReactNode;
+  action?: ReactNode;
+}): ReactElement => (
+  <section className="flex w-full flex-col rounded-16 border border-border-subtlest-tertiary p-4">
+    <span className="flex items-center justify-between font-bold text-text-primary typo-callout">
+      {title}
+      {action}
+    </span>
+    {children}
+  </section>
+);
+
+export const Tile = ({
+  value,
+  label,
+}: {
+  value: string;
+  label: string;
+}): ReactElement => (
+  <div className="flex flex-col items-center rounded-12 border border-border-subtlest-tertiary px-2 py-2 text-center">
+    <span className="font-bold text-text-primary typo-callout">{value}</span>
+    <span className="text-text-tertiary typo-footnote">{label}</span>
+  </div>
+);
+
+const topTags = [
+  ['coderabbit', 62],
+  ['code-review', 38],
+  ['ai', 21],
+  ['cli', 17],
+  ['security', 14],
+  ['devtools', 9],
+] as const;
+
+/* Posts per week, 26 weeks. Real cadence: a handful a month. */
+const weeks = Array.from({ length: 26 }, (_, week) =>
+  Array.from({ length: 7 }, (_, day) => {
+    const seed = (week * 7 + day) % 11;
+    return seed === 3 || seed === 7 ? 1 : seed === 9 && week % 3 === 0 ? 2 : 0;
+  }),
+);
+
+/** ReadingOverview, for a squad: what it posts, how often, about what. */
+/**
+ * Production's squad analytics, in the column: the two discovery numbers,
+ * the impressions trend, the engagement that matters most, and the way to
+ * the full page. Only for whoever holds the view-analytics permission.
+ */
+export const AnalyticsWidget = ({
+  viewer,
+  onOpen,
+}: {
+  viewer: Viewer;
+  onOpen?: () => void;
+}): ReactElement | null => {
+  if (!isAdmin(viewer)) {
+    return null;
+  }
+
+  const max = Math.max(
+    ...analyticsDays.map((day) => day.organic + day.boosted),
+  );
+
+  return (
+    <Widget
+      title="Analytics"
+      action={
+        <span className="font-normal text-text-quaternary typo-caption1">
+          Last 45 days
+        </span>
+      }
+    >
+      <div className="mt-4 grid grid-cols-2 gap-2">
+        {analyticsDiscovery.map(([label, value]) => (
+          <Tile key={label} value={formatCount(value)} label={label} />
+        ))}
+      </div>
+      <div
+        aria-label="Impressions per day"
+        className="mt-4 flex h-12 items-end gap-px"
+      >
+        {analyticsDays.map((day, index) => (
+          <span
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            className={classNames(
+              'min-w-0 flex-1 rounded-t-[0.125rem]',
+              day.boosted ? 'bg-accent-cabbage-default' : 'bg-text-disabled',
+            )}
+            style={{
+              height: `${((day.organic + day.boosted) / max) * 100}%`,
+            }}
+          />
+        ))}
+      </div>
+      <dl className="mt-4 flex flex-col">
+        {analyticsEngagement.slice(0, 4).map(([label, value]) => (
+          <div
+            key={label}
+            className="flex items-center justify-between py-1.5 typo-footnote"
+          >
+            <dt className="text-text-tertiary">{label}</dt>
+            <dd className="sq-nums font-bold text-text-primary">{value}</dd>
+          </div>
+        ))}
+      </dl>
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        className="mt-3 w-full"
+        onClick={onOpen}
+      >
+        View analytics
+      </Button>
+    </Widget>
+  );
+};
+
+export const OverviewWidget = (): ReactElement => (
+  <Widget title="Activity">
+    <div className="mb-3 mt-4 grid grid-cols-2 gap-2">
+      <Tile value="12" label="Posts this month" />
+      <Tile value={formatCount(squad.totalViews)} label="Views, all time" />
+    </div>
+    <span className="text-text-tertiary typo-subhead">Top tags by posts</span>
+    <div className="my-3 grid grid-cols-2 gap-2">
+      {topTags.map(([tag, share]) => (
+        <div
+          key={tag}
+          className="relative flex justify-between overflow-hidden rounded-6 border border-border-subtlest-tertiary px-2 typo-caption1"
+        >
+          <span
+            className="absolute bottom-0 left-0 top-0 bg-action-share-default opacity-40"
+            style={{ width: `${share}%` }}
+          />
+          <span className="relative z-1 my-auto text-text-primary">{tag}</span>
+          <span className="relative z-1 my-auto text-text-secondary">
+            {share}%
+          </span>
+        </div>
+      ))}
+    </div>
+    <span className="mb-3 text-text-tertiary typo-subhead">
+      Posts in the last months ({squad.totalPosts})
+    </span>
+    <div className="flex gap-0.5">
+      {weeks.map((week, weekIndex) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={weekIndex} className="flex flex-col gap-0.5">
+          {week.map((count, dayIndex) => (
+            <span
+              // eslint-disable-next-line react/no-array-index-key
+              key={dayIndex}
+              className={classNames(
+                'size-2 rounded-6',
+                count === 0 && 'border border-border-subtlest-quaternary',
+                count === 1 && 'bg-text-disabled',
+                count === 2 && 'bg-text-primary',
+              )}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+    <div className="mt-4 flex items-center justify-end text-text-tertiary typo-footnote">
+      <span className="mr-2">Less</span>
+      <span className="mr-0.5 size-2 rounded-6 border border-border-subtlest-quaternary" />
+      <span className="mr-0.5 size-2 rounded-6 bg-text-disabled" />
+      <span className="mr-2 size-2 rounded-6 bg-text-primary" />
+      More
+    </div>
+  </Widget>
+);
+
+/**
+ * Reddit's rules widget, in the column: the titles only, numbered, each row
+ * a doorway to the Rules page. A visitor reads the contract before joining
+ * without leaving the feed.
+ */
+export const RulesWidget = ({
+  onOpenRules,
+  onOpenFaq,
+}: {
+  onOpenRules?: () => void;
+  onOpenFaq?: () => void;
+}): ReactElement => (
+  <Widget title="Rules">
+    <ol className="mt-3 flex flex-col divide-y divide-border-subtlest-tertiary">
+      {rules.map(([title], index) => (
+        <li key={title}>
+          <button
+            type="button"
+            onClick={onOpenRules}
+            className="flex w-full items-center gap-3 py-2 text-left"
+          >
+            <span className="sq-nums w-4 shrink-0 text-text-quaternary typo-caption1">
+              {index + 1}
+            </span>
+            <span className="min-w-0 flex-1 truncate text-text-primary typo-footnote">
+              {title}
+            </span>
+            <ArrowIcon
+              size={IconSize.XSmall}
+              className="shrink-0 rotate-90 text-text-quaternary"
+            />
+          </button>
+        </li>
+      ))}
+    </ol>
+    {/* The profile's "Show all Squads" seat, twice: the full rules and the
+        FAQ are the two documents a newcomer reads before posting. */}
+    <div className="mt-3 grid grid-cols-2 gap-2">
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        onClick={onOpenRules}
+      >
+        All rules
+      </Button>
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        onClick={onOpenFaq}
+      >
+        FAQ
+      </Button>
+    </div>
+  </Widget>
+);
+
+/** ActiveOrRecommendedSquads, for a squad: the people behind it. */
+export const TeamWidget = (): ReactElement => (
+  <Widget title="Team">
+    <ul className="mt-4 flex flex-col gap-2.5">
+      {team.slice(0, 5).map((member) => (
+        <li key={member.id} className="flex items-center gap-2.5">
+          <Avatar member={member} size={2} />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {member.name}
+            </span>
+            <span className="truncate text-text-tertiary typo-footnote">
+              {member.title}
+            </span>
+          </div>
+          <span className="shrink-0 text-text-quaternary typo-caption1">
+            {member.role}
+          </span>
+        </li>
+      ))}
+    </ul>
+    <div className="mt-auto pt-3">
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        className="w-full"
+      >
+        See all {team.length}
+      </Button>
+    </div>
+  </Widget>
+);
+
+/**
+ * Production's SquadStack: the tools the squad builds with. Hidden when
+ * empty unless the admin can fill it, then a dashed invitation to.
+ */
+export const StackWidget = ({
+  viewer,
+}: {
+  viewer: Viewer;
+}): ReactElement | null => {
+  const { empty } = useWorkspace();
+  const canEdit = isAdmin(viewer);
+  const items = empty ? [] : stack;
+
+  if (items.length === 0 && !canEdit) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title="Stack & Tools"
+      action={
+        canEdit &&
+        items.length > 0 && (
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.XSmall}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        )
+      }
+    >
+      {items.length > 0 ? (
+        <ul className="mt-3 flex flex-wrap gap-2">
+          {items.slice(0, 4).map((item) => (
+            <li
+              key={item.name}
+              className="flex items-center gap-1.5 rounded-10 border border-border-subtlest-tertiary py-1 pl-1 pr-2.5 text-text-secondary typo-footnote hover:border-border-subtlest-secondary hover:text-text-primary"
+            >
+              <img src={item.image} alt="" className="size-5 rounded-6" />
+              {item.name}
+            </li>
+          ))}
+          {items.length > 4 && (
+            <li className="flex items-center rounded-10 border border-border-subtlest-tertiary px-2.5 py-1 text-text-tertiary typo-footnote">
+              +{items.length - 4}
+            </li>
+          )}
+        </ul>
+      ) : (
+        <div className="mt-3 flex flex-col items-center gap-2 rounded-12 border border-dashed border-border-subtlest-tertiary p-4 text-center">
+          <span className="text-text-tertiary typo-footnote">
+            Share your Squad&apos;s stack &amp; tools
+          </span>
+          <Button
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.XSmall}
+            icon={<PlusIcon />}
+          >
+            Add your first item
+          </Button>
+        </div>
+      )}
+    </Widget>
+  );
+};
+
+const LinkRow = ({
+  href,
+  icon,
+  text,
+}: {
+  href: string;
+  icon: ReactNode;
+  text: string;
+}): ReactElement => (
+  <li>
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center gap-2 py-1 text-text-secondary typo-callout transition-colors hover:text-text-primary"
+    >
+      <span className="flex size-4 items-center justify-center text-text-tertiary transition-colors group-hover:text-text-primary">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{text}</span>
+    </a>
+  </li>
+);
+
+/**
+ * GitHub's profile links: the website first as a bare domain, then each
+ * place as its handle beside a small brand mark.
+ */
+export const LinksWidget = (): ReactElement => (
+  <Widget title="Links">
+    <ul className="mt-2 flex flex-col gap-1">
+      <LinkRow
+        href={`https://${squad.company.website}`}
+        icon={<LinkIcon size={IconSize.Size16} />}
+        text={squad.company.website}
+      />
+      {companyLinks.map((item) => (
+        <LinkRow
+          key={item.id}
+          href={item.href}
+          icon={
+            <span
+              className={classNames(
+                'flex',
+                item.id === 'discord' && '[&_path]:[fill:currentColor]',
+              )}
+            >
+              {linkIcon(item.id, IconSize.Size16)}
+            </span>
+          }
+          text={item.handle}
+        />
+      ))}
+    </ul>
+  </Widget>
+);
+
+/* ------------------------------------------------------------------ page */
+
+/** One frame for a squad and a person: card + widget column. */
+export const HomeFrame = ({
+  header,
+  children,
+  widgets,
+}: {
+  header: ReactNode;
+  children: ReactNode;
+  widgets?: ReactNode;
+}): ReactElement => (
+  <div className="m-auto flex w-full max-w-[72rem] gap-4 p-4 pb-6">
+    <main className="flex min-w-0 flex-1 flex-col">
+      <div className="rounded-16 border border-border-subtlest-tertiary">
+        {header}
+        {children}
+      </div>
+    </main>
+    {widgets && (
+      <aside className="flex w-80 shrink-0 flex-col gap-4">{widgets}</aside>
+    )}
+  </div>
+);
+
+/** The About page in the sidebar: what used to stack under the header. */
+export const SquadAbout = ({
+  viewer = Viewer.Visitor,
+}: {
+  viewer?: Viewer;
+}): ReactElement => (
+  <div className="flex flex-col divide-y divide-border-subtlest-tertiary">
+    <AboutSection />
+    <CompanySection />
+    <TeamSection />
+    <StackSection viewer={viewer} />
+  </div>
+);
+
+/**
+ * The badge: Aurora. Two orbs of brand light, cabbage and onion, blurred
+ * under frosted glass, one cabbage hairline, the seal in the brightest
+ * spot. The landing page's light, in one row.
+ */
+export const VerifiedWidget = (): ReactElement => (
+  <div
+    className="relative flex items-center gap-3 overflow-hidden rounded-16 px-4 py-3"
+    style={{
+      background:
+        'color-mix(in srgb, var(--theme-background-default) 58%, transparent)',
+      boxShadow:
+        'inset 0 0 0 1px color-mix(in srgb, var(--theme-accent-cabbage-default) 55%, transparent)',
+    }}
+  >
+    <div
+      aria-hidden
+      className="absolute inset-0"
+      style={{
+        background:
+          'radial-gradient(70% 120% at 12% 20%, color-mix(in srgb, var(--theme-accent-cabbage-default) 70%, transparent), transparent 60%), radial-gradient(70% 120% at 95% 110%, color-mix(in srgb, var(--theme-accent-onion-default) 55%, transparent), transparent 60%)',
+        filter: 'blur(16px)',
+      }}
+    />
+    <VerifiedSeal className="relative size-6 text-accent-cabbage-default" />
+    <span className="relative font-bold text-text-primary typo-callout">
+      Verified Squad page
+    </span>
+  </div>
+);
+
+export const SquadWidgets = ({
+  viewer = Viewer.Visitor,
+  onOpenRules,
+  onOpenFaq,
+  onOpenAnalytics,
+  afterVerified,
+}: {
+  viewer?: Viewer;
+  onOpenRules?: () => void;
+  onOpenFaq?: () => void;
+  onOpenAnalytics?: () => void;
+  /** Sits right under the Verified squad page card. */
+  afterVerified?: ReactNode;
+}): ReactElement => (
+  <>
+    <VerifiedWidget />
+    {afterVerified}
+    <RulesWidget onOpenRules={onOpenRules} onOpenFaq={onOpenFaq} />
+    <TeamWidget />
+    <StackWidget viewer={viewer} />
+    <AnalyticsWidget viewer={viewer} onOpen={onOpenAnalytics} />
+    <LinksWidget />
+  </>
+);
+
+export const SquadHome = ({
+  viewer = Viewer.Visitor,
+  standalone = false,
+  onOpenMembers,
+  onOpenRules,
+  onOpenFaq,
+  onOpenPending,
+  empty = false,
+}: {
+  viewer?: Viewer;
+  /** Outside the workspace there is no sidebar to carry Join, so the header does. */
+  standalone?: boolean;
+  onOpenMembers?: () => void;
+  onOpenRules?: () => void;
+  onOpenFaq?: () => void;
+  onOpenPending?: () => void;
+  /** A squad that has not posted yet. */
+  empty?: boolean;
+}): ReactElement => (
+  <HomeFrame
+    header={
+      <SquadHeader
+        viewer={viewer}
+        standalone={standalone}
+        onOpenMembers={onOpenMembers}
+      />
+    }
+    widgets={
+      <SquadWidgets
+        viewer={viewer}
+        onOpenRules={onOpenRules}
+        onOpenFaq={onOpenFaq}
+      />
+    }
+  >
+    <div className="border-t border-border-subtlest-tertiary">
+      {empty ? (
+        <div className="flex flex-col gap-4 p-6">
+          <SquadComposer viewer={viewer} onOpenPending={onOpenPending} />
+          <div className="flex flex-col items-center gap-2 rounded-16 border border-dashed border-border-subtlest-secondary px-6 py-12 text-center">
+            <span className="font-bold text-text-primary typo-callout">
+              Nothing posted yet
+            </span>
+            <span className="max-w-[40ch] text-text-tertiary typo-footnote">
+              {isStaff(viewer)
+                ? 'Connect the content feed or write the first post. Members see the rules, the team and the links until then.'
+                : 'The team has not posted yet. Join to hear when they do.'}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <PostsArea
+          sort="Latest"
+          entries={feedEntries.slice(0, 6)}
+          pinned={pinnedEntry}
+          composer={
+            <SquadComposer viewer={viewer} onOpenPending={onOpenPending} />
+          }
+          toolbarChildren={<PinnedToggle viewer={viewer} />}
+        />
+      )}
+    </div>
+  </HomeFrame>
+);
diff --git a/packages/storybook/stories/squad-page/kit.tsx b/packages/storybook/stories/squad-page/kit.tsx
new file mode 100644
index 00000000000..723766e150b
--- /dev/null
+++ b/packages/storybook/stories/squad-page/kit.tsx
@@ -0,0 +1,954 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AddUserIcon,
+  DiscordIcon,
+  DocsIcon,
+  GitHubIcon,
+  LinkedInIcon,
+  TwitterIcon,
+  YoutubeIcon,
+  AnalyticsIcon,
+  BellIcon,
+  DiscussIcon,
+  LinkIcon,
+  MenuIcon,
+  OpenLinkIcon,
+  PinIcon,
+  PlusIcon,
+  SearchIcon,
+  SettingsIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { FreeformGrid } from '@dailydotdev/shared/src/components/cards/Freeform/FreeformGrid';
+import { FreeformList } from '@dailydotdev/shared/src/components/cards/Freeform/FreeformList';
+import type { Entry, TeamMember } from './data';
+import {
+  formatCount,
+  formatDay,
+  formatSince,
+  squad,
+  team,
+  toPost,
+} from './data';
+
+// Shared vocabulary for the squad page directions. Every layout is composed
+// from these so the comparison is about structure, not about which one got
+// the nicer button. Provider-light where possible; the production feed cards
+// are the exception and need the story-level boot providers.
+
+const kitCss = `
+.sq-nums { font-variant-numeric: tabular-nums; }
+.sq-ring { box-shadow: 0 0 0 4px var(--theme-background-default); }
+.sq-elevated {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%),
+    0 2px 6px -2px rgb(0 0 0 / 0.35),
+    0 16px 40px -12px rgb(0 0 0 / 0.45);
+}
+/* The cover never ends in a hard line: it dissolves into the page. */
+.sq-cover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    var(--theme-background-default) 0%,
+    color-mix(in srgb, var(--theme-background-default), transparent 55%) 38%,
+    transparent 100%
+  );
+}
+/* The publication direction uses the cover as light, not as a banner. */
+.sq-backdrop {
+  position: absolute;
+  inset: -20% -10% auto -10%;
+  height: 34rem;
+  background-size: cover;
+  background-position: center;
+  filter: blur(70px) saturate(1.3);
+  opacity: 0.35;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
+}
+.sq-sticky { position: sticky; top: 1rem; }
+.sq-tab-active::after {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; bottom: -1px;
+  height: 2px;
+  background: var(--theme-text-primary);
+  border-radius: 2px;
+}
+.sq-timeline-rail::before {
+  content: '';
+  position: absolute;
+  left: 8.125rem;
+  top: 0; bottom: 0;
+  width: 1px;
+  background: var(--theme-border-subtlest-tertiary);
+}
+.sq-press { transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
+.sq-press:active { transform: scale(0.97); }
+`;
+
+export const KitStyles = (): ReactElement => (
+  // eslint-disable-next-line react/no-danger
+  <style dangerouslySetInnerHTML={{ __html: kitCss }} />
+);
+
+/* ------------------------------------------------------------- app frame */
+
+/** A 1280px desktop, with just enough app chrome to read the page in context. */
+export const Frame = ({
+  children,
+  width = 1280,
+  chrome = true,
+  className,
+}: {
+  children: ReactNode;
+  width?: number;
+  chrome?: boolean;
+  className?: string;
+}): ReactElement => (
+  <div
+    style={{ width, maxWidth: '100%' }}
+    className={classNames(
+      'sq-elevated relative overflow-hidden rounded-16 bg-background-default text-text-primary',
+      className,
+    )}
+  >
+    <KitStyles />
+    {chrome && (
+      <div className="flex h-14 items-center gap-4 border-b border-border-subtlest-tertiary px-6">
+        <span className="font-bold typo-callout">daily.dev</span>
+        <div className="mx-auto flex h-9 w-[28rem] items-center gap-2 rounded-12 bg-surface-float px-3 text-text-quaternary typo-footnote">
+          <SearchIcon size={IconSize.Small} />
+          Search
+        </div>
+        <span className="h-8 w-8 rounded-full bg-surface-hover" />
+      </div>
+    )}
+    {children}
+  </div>
+);
+
+/* --------------------------------------------------------------- identity */
+
+export const Cover = ({
+  height = 14,
+  className,
+}: {
+  /** rem */
+  height?: number;
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'sq-cover relative w-full overflow-hidden',
+      className,
+    )}
+    style={{ height: `${height}rem` }}
+  >
+    <img
+      src={squad.headerImage}
+      alt=""
+      className="h-full w-full object-cover"
+    />
+  </div>
+);
+
+export const Logo = ({
+  size = 6,
+  ring = true,
+  className,
+}: {
+  /** rem */
+  size?: number;
+  ring?: boolean;
+  className?: string;
+}): ReactElement => (
+  <img
+    src={squad.image}
+    alt={`${squad.handle}'s logo`}
+    style={{ width: `${size}rem`, height: `${size}rem` }}
+    className={classNames(
+      'shrink-0 rounded-full bg-background-default object-cover',
+      ring && 'sq-ring',
+      className,
+    )}
+  />
+);
+
+/**
+ * The verified seal: a scalloped badge with a check, the shape X, Instagram
+ * and LinkedIn all use for verified. daily.dev has no glyph for it yet (the
+ * profile's company badge is a text pill, the shields mean clickbait
+ * shield, the medals mean awards), so it is drawn here on the 24 grid.
+ */
+export const linkIcon = (
+  id: string,
+  size: IconSize = IconSize.Small,
+): ReactElement =>
+  ({
+    docs: <DocsIcon size={size} />,
+    github: <GitHubIcon size={size} />,
+    x: <TwitterIcon size={size} />,
+    youtube: <YoutubeIcon size={size} />,
+    linkedin: <LinkedInIcon size={size} />,
+    discord: <DiscordIcon size={size} />,
+  }[id] ?? <LinkIcon size={size} />);
+
+export const VerifiedSeal = ({
+  className,
+}: {
+  className?: string;
+}): ReactElement => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden
+    className={classNames('size-4 shrink-0', className)}
+  >
+    <path
+      fill="currentColor"
+      d="M21.60 12.00 Q22.82 14.90 20.31 16.80 Q19.92 19.92 16.80 20.31 Q14.90 22.82 12.00 21.60 Q9.10 22.82 7.20 20.31 Q4.08 19.92 3.69 16.80 Q1.18 14.90 2.40 12.00 Q1.18 9.10 3.69 7.20 Q4.08 4.08 7.20 3.69 Q9.10 1.18 12.00 2.40 Q14.90 1.18 16.80 3.69 Q19.92 4.08 20.31 7.20 Q22.82 9.10 21.60 12.00Z"
+    />
+    <path
+      d="M7.6 12.3l3 3 5.8-6"
+      fill="none"
+      stroke="var(--theme-background-default)"
+      strokeWidth="2.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const VerifiedMark = ({
+  label = true,
+  className,
+  sealClassName,
+}: {
+  label?: boolean;
+  className?: string;
+  /** The seal's size, when it sits beside a larger name. */
+  sealClassName?: string;
+}): ReactElement => (
+  <span
+    title="Verified Squad"
+    className={classNames(
+      'inline-flex shrink-0 items-center gap-1 text-accent-cabbage-default',
+      label &&
+        'rounded-8 bg-accent-cabbage-flat px-2 py-0.5 font-bold typo-caption1',
+      className,
+    )}
+  >
+    <VerifiedSeal className={sealClassName} />
+    {label && 'Verified'}
+  </span>
+);
+
+export const Name = ({
+  size = 'title1',
+  className,
+}: {
+  size?: 'title1' | 'title2' | 'mega3' | 'large';
+  className?: string;
+}): ReactElement => {
+  const typo = {
+    title1: 'typo-title1',
+    title2: 'typo-title2',
+    mega3: 'typo-mega3',
+    large: 'typo-large-title',
+  }[size];
+
+  return (
+    <h1
+      className={classNames(
+        'flex items-center gap-2 font-bold text-text-primary',
+        typo,
+        className,
+      )}
+    >
+      {squad.name}
+      {squad.verified && <VerifiedMark label={size === 'mega3'} />}
+    </h1>
+  );
+};
+
+export const MetaLine = ({
+  items,
+  className,
+}: {
+  items: ReactNode[];
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex flex-wrap items-center gap-x-2 text-text-tertiary typo-footnote',
+      className,
+    )}
+  >
+    {items.map((item, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <React.Fragment key={index}>
+        {index > 0 && <span className="text-text-quaternary">·</span>}
+        <span>{item}</span>
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+export const defaultMeta = [
+  `@${squad.handle}`,
+  <span key="cat" className="text-text-link">
+    {squad.category}
+  </span>,
+  `Since ${formatSince(squad.createdAt)}`,
+];
+
+/* ------------------------------------------------------------------ stats */
+
+export const Stat = ({
+  value,
+  label,
+  size = 'md',
+  align = 'start',
+}: {
+  value: number;
+  label: string;
+  size?: 'sm' | 'md' | 'lg';
+  align?: 'start' | 'center';
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex',
+      size === 'sm' ? 'flex-row items-baseline gap-1' : 'flex-col',
+      align === 'center' && 'items-center',
+    )}
+  >
+    <span
+      className={classNames(
+        'sq-nums font-bold text-text-primary',
+        size === 'sm' && 'typo-callout',
+        size === 'md' && 'typo-title3',
+        size === 'lg' && 'typo-title1',
+      )}
+    >
+      {formatCount(value)}
+    </span>
+    <span
+      className={classNames(
+        'text-text-tertiary',
+        size === 'sm' ? 'typo-footnote' : 'typo-caption1',
+      )}
+    >
+      {label}
+    </span>
+  </div>
+);
+
+export const stats = [
+  { value: squad.membersCount, label: 'Members' },
+  { value: squad.totalPosts, label: 'Posts' },
+  { value: squad.totalViews, label: 'Views' },
+  { value: squad.totalUpvotes, label: 'Upvotes' },
+];
+
+/* ----------------------------------------------------------------- people */
+
+/** People are rounded squares, the way ProfilePicture rounds each size. */
+const avatarRadius = (size: number): string => {
+  if (size <= 1) {
+    return 'rounded-4';
+  }
+  if (size <= 1.25) {
+    return 'rounded-6';
+  }
+  if (size <= 1.5) {
+    return 'rounded-8';
+  }
+  if (size <= 2) {
+    return 'rounded-10';
+  }
+  if (size <= 2.5) {
+    return 'rounded-12';
+  }
+  if (size <= 3) {
+    return 'rounded-14';
+  }
+  return 'rounded-16';
+};
+
+export const Avatar = ({
+  member,
+  size = 2.5,
+  className,
+}: {
+  member: TeamMember;
+  /** rem */
+  size?: number;
+  className?: string;
+}): ReactElement => (
+  <img
+    src={member.image}
+    alt={member.name}
+    title={member.name}
+    style={{ width: `${size}rem`, height: `${size}rem` }}
+    className={classNames(
+      'shrink-0 bg-surface-hover object-cover',
+      avatarRadius(size),
+      className,
+    )}
+  />
+);
+
+export const Facepile = ({
+  members = team,
+  max = 5,
+  size = 1.75,
+  count,
+  label = 'members',
+  className,
+}: {
+  members?: TeamMember[];
+  max?: number;
+  size?: number;
+  count?: number;
+  label?: string;
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex items-center', className)}>
+    <div className="flex">
+      {members.slice(0, max).map((member, index) => (
+        <Avatar
+          key={member.id}
+          member={member}
+          size={size}
+          className={classNames('sq-ring', index > 0 && '-ml-2')}
+        />
+      ))}
+    </div>
+    {typeof count === 'number' && (
+      <span className="ml-2 text-text-tertiary typo-footnote">
+        <span className="sq-nums font-bold text-text-primary">
+          {formatCount(count)}
+        </span>{' '}
+        {label}
+      </span>
+    )}
+  </div>
+);
+
+export const TeamRow = ({
+  member,
+  compact = false,
+}: {
+  member: TeamMember;
+  compact?: boolean;
+}): ReactElement => (
+  <div className="flex items-center gap-3">
+    <Avatar member={member} size={compact ? 2 : 2.5} />
+    <div className="flex min-w-0 flex-1 flex-col">
+      <span className="truncate font-bold text-text-primary typo-callout">
+        {member.name}
+      </span>
+      <span className="truncate text-text-tertiary typo-footnote">
+        {compact ? member.role : `${member.title} · ${member.role}`}
+      </span>
+    </div>
+  </div>
+);
+
+/* ---------------------------------------------------------------- actions */
+
+export enum Viewer {
+  /** Logged out. Can read a public squad, cannot do anything else. */
+  Anonymous = 'anonymous',
+  /** Logged in, not a member. */
+  Visitor = 'visitor',
+  Member = 'member',
+  /** A member who moderates: approves, removes, pins. */
+  Moderator = 'moderator',
+  Admin = 'admin',
+  /** Removed by a moderator. Logged in, can read a public squad, cannot rejoin. */
+  Blocked = 'blocked',
+}
+
+export const isLoggedIn = (viewer: Viewer): boolean =>
+  viewer !== Viewer.Anonymous;
+export const isJoined = (viewer: Viewer): boolean =>
+  viewer === Viewer.Member ||
+  viewer === Viewer.Moderator ||
+  viewer === Viewer.Admin;
+export const isStaff = (viewer: Viewer): boolean =>
+  viewer === Viewer.Moderator || viewer === Viewer.Admin;
+export const isAdmin = (viewer: Viewer): boolean => viewer === Viewer.Admin;
+export const isBlocked = (viewer: Viewer): boolean => viewer === Viewer.Blocked;
+
+/**
+ * One primary action per viewer. Everything else is an icon, and the admin
+ * tools never outrank Join for a visitor because a visitor never sees them.
+ */
+export const Actions = ({
+  viewer = Viewer.Visitor,
+  size = ButtonSize.Medium,
+  className,
+}: {
+  viewer?: Viewer;
+  size?: ButtonSize;
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex items-center gap-2', className)}>
+    {viewer === Viewer.Visitor && (
+      <Button
+        variant={ButtonVariant.Primary}
+        color={ButtonColor.Cabbage}
+        size={size}
+        className="sq-press"
+      >
+        Join Squad
+      </Button>
+    )}
+    {viewer !== Viewer.Visitor && (
+      <Button
+        variant={ButtonVariant.Primary}
+        size={size}
+        icon={<PlusIcon />}
+        className="sq-press"
+      >
+        New post
+      </Button>
+    )}
+    {viewer === Viewer.Admin && (
+      <>
+        <Button
+          variant={ButtonVariant.Subtle}
+          size={size}
+          icon={<AddUserIcon />}
+        >
+          Invite
+        </Button>
+        <Button
+          variant={ButtonVariant.Float}
+          size={size}
+          icon={<AnalyticsIcon />}
+          aria-label="Analytics"
+        />
+        <Button
+          variant={ButtonVariant.Float}
+          size={size}
+          icon={<SettingsIcon />}
+          aria-label="Settings"
+        />
+      </>
+    )}
+    {viewer !== Viewer.Visitor && (
+      <Button
+        variant={ButtonVariant.Float}
+        size={size}
+        icon={<BellIcon />}
+        aria-label="Notifications"
+      />
+    )}
+    <Button
+      variant={ButtonVariant.Float}
+      size={size}
+      icon={<LinkIcon />}
+      aria-label="Copy link"
+    />
+    <Button
+      variant={ButtonVariant.Float}
+      size={size}
+      icon={<MenuIcon />}
+      aria-label="More"
+    />
+  </div>
+);
+
+/* --------------------------------------------------------------- sections */
+
+export const Panel = ({
+  title,
+  action,
+  children,
+  className,
+  flush = false,
+}: {
+  title?: string;
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  flush?: boolean;
+}): ReactElement => (
+  <section
+    className={classNames(
+      'flex flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float',
+      flush ? 'p-0' : 'gap-3 p-4',
+      className,
+    )}
+  >
+    {title && (
+      <header
+        className={classNames(
+          'flex items-center justify-between',
+          flush && 'px-4 pt-4',
+        )}
+      >
+        <h3 className="font-bold text-text-primary typo-callout">{title}</h3>
+        {action}
+      </header>
+    )}
+    {children}
+  </section>
+);
+
+export const SectionTitle = ({
+  title,
+  count,
+  action,
+  className,
+}: {
+  title: string;
+  count?: number;
+  action?: ReactNode;
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex items-center justify-between', className)}>
+    <h2 className="flex items-baseline gap-2 font-bold text-text-primary typo-title3">
+      {title}
+      {typeof count === 'number' && (
+        <span className="sq-nums font-normal text-text-quaternary typo-callout">
+          {formatCount(count)}
+        </span>
+      )}
+    </h2>
+    {action}
+  </div>
+);
+
+export const TabBar = ({
+  tabs,
+  active,
+  className,
+}: {
+  tabs: { label: string; count?: number }[];
+  active: string;
+  className?: string;
+}): ReactElement => (
+  <nav
+    className={classNames(
+      'flex items-center gap-6 border-b border-border-subtlest-tertiary',
+      className,
+    )}
+  >
+    {tabs.map((tab) => (
+      <button
+        type="button"
+        key={tab.label}
+        className={classNames(
+          'relative flex items-center gap-1.5 py-3 typo-callout',
+          tab.label === active
+            ? 'sq-tab-active font-bold text-text-primary'
+            : 'text-text-tertiary hover:text-text-primary',
+        )}
+      >
+        {tab.label}
+        {typeof tab.count === 'number' && (
+          <span className="sq-nums rounded-6 bg-surface-float px-1.5 text-text-quaternary typo-caption1">
+            {formatCount(tab.count)}
+          </span>
+        )}
+      </button>
+    ))}
+  </nav>
+);
+
+export const StackRow = ({
+  items,
+  className,
+}: {
+  items: { name: string; image: string }[];
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex flex-wrap gap-2', className)}>
+    {items.map((item) => (
+      <span
+        key={item.name}
+        className="flex items-center gap-2 rounded-10 border border-border-subtlest-tertiary bg-background-default py-1 pl-1.5 pr-2.5 text-text-secondary typo-footnote"
+      >
+        <img src={item.image} alt="" className="h-4 w-4 rounded-4" />
+        {item.name}
+      </span>
+    ))}
+  </div>
+);
+
+export const LinksList = ({
+  items,
+  className,
+}: {
+  items: { label: string; href: string }[];
+  className?: string;
+}): ReactElement => (
+  <ul className={classNames('flex flex-col gap-2', className)}>
+    {items.map((item) => (
+      <li key={item.href}>
+        <a
+          href={item.href}
+          className="flex items-center gap-2 text-text-secondary typo-footnote hover:text-text-primary"
+        >
+          <OpenLinkIcon
+            size={IconSize.XSmall}
+            className="text-text-quaternary"
+          />
+          {item.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+);
+
+/* ------------------------------------------------------------------- feed */
+
+export const FeedToolbar = ({
+  search = true,
+  sort = ['Latest', 'Top', 'Discussed'],
+  active = 'Latest',
+  className,
+  children,
+}: {
+  search?: boolean;
+  sort?: string[];
+  active?: string;
+  className?: string;
+  children?: ReactNode;
+}): ReactElement => (
+  <div className={classNames('flex items-center gap-3', className)}>
+    {search && (
+      <div className="flex h-10 flex-1 items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 text-text-quaternary typo-callout">
+        <SearchIcon size={IconSize.Small} />
+        Search this Squad
+      </div>
+    )}
+    <div className="flex h-10 items-center rounded-12 bg-surface-float p-1">
+      {sort.map((option) => (
+        <button
+          type="button"
+          key={option}
+          className={classNames(
+            'rounded-10 px-3 py-1.5 typo-callout',
+            option === active
+              ? 'bg-background-default font-bold text-text-primary shadow-2'
+              : 'text-text-tertiary',
+          )}
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+    {children}
+  </div>
+);
+
+const noop = () => undefined;
+const cardHandlers = {
+  onPostClick: noop,
+  onPostAuxClick: noop,
+  onUpvoteClick: noop,
+  onDownvoteClick: noop,
+  onCommentClick: noop,
+  onBookmarkClick: noop,
+  onCopyLinkClick: noop,
+  onShare: noop,
+  onReadArticleClick: noop,
+};
+
+/** Production grid cards, on the production grid math (20rem tracks, 2rem gap). */
+export const CardGrid = ({
+  entries,
+  columns = 3,
+  className,
+}: {
+  entries: Entry[];
+  columns?: number;
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames('grid gap-8', className)}
+    style={{
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 20rem))`,
+    }}
+  >
+    {entries.map((entry) => (
+      <FreeformGrid key={entry.id} post={toPost(entry)} {...cardHandlers} />
+    ))}
+  </div>
+);
+
+/**
+ * X's pinned post: the same card as every other post, with a quiet
+ * "Pinned" line above the author, the pin under the avatar column.
+ */
+export const PinnedCard = ({ entry }: { entry: Entry }): ReactElement => (
+  <div className="relative">
+    <span className="pointer-events-none absolute left-4 top-4 z-1 flex items-center text-text-tertiary typo-footnote">
+      <span className="flex w-[3.75rem] justify-end pr-4">
+        <PinIcon size={IconSize.Size16} secondary />
+      </span>
+      <span className="font-bold">Pinned</span>
+    </span>
+    <FreeformList
+      post={{ ...toPost(entry), pinnedAt: undefined }}
+      domProps={{ className: '!pt-11' }}
+      {...cardHandlers}
+    />
+  </div>
+);
+
+export const CardList = ({
+  entries,
+  pinned,
+  className,
+}: {
+  entries: Entry[];
+  pinned?: Entry;
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex flex-col gap-3', className)}>
+    {pinned && <PinnedCard entry={pinned} />}
+    {entries.map((entry) => (
+      <FreeformList key={entry.id} post={toPost(entry)} {...cardHandlers} />
+    ))}
+  </div>
+);
+
+/** A slim pinned row: the announcement is always one glance away, never a whole card. */
+export const PinnedRow = ({
+  entry,
+  className,
+}: {
+  entry: Entry;
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex items-center gap-3 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-4 py-2.5',
+      className,
+    )}
+  >
+    <PinIcon size={IconSize.Small} className="text-text-tertiary" />
+    <span className="font-bold text-text-tertiary typo-caption1">Pinned</span>
+    <span className="truncate text-text-primary typo-callout">
+      {entry.title}
+    </span>
+    <span className="ml-auto whitespace-nowrap text-text-quaternary typo-footnote">
+      by {entry.author.name}
+    </span>
+  </div>
+);
+
+export const EngagementMeta = ({
+  entry,
+  className,
+}: {
+  entry: Entry;
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'sq-nums flex items-center gap-3 text-text-tertiary typo-footnote',
+      className,
+    )}
+  >
+    <span className="flex items-center gap-1">
+      <UpvoteIcon size={IconSize.XSmall} />
+      {entry.upvotes}
+    </span>
+    <span className="flex items-center gap-1">
+      <DiscussIcon size={IconSize.XSmall} />
+      {entry.comments}
+    </span>
+  </div>
+);
+
+/**
+ * The owner-curated slot. On a changelog it is the latest release; on a
+ * company page it is whatever the company wants seen first. Wide reads as a
+ * magazine lead, horizontal reads as a section header.
+ */
+export const FeaturedHero = ({
+  entry,
+  orientation = 'wide',
+  eyebrow = 'Latest',
+  className,
+}: {
+  entry: Entry;
+  orientation?: 'wide' | 'horizontal';
+  eyebrow?: string;
+  className?: string;
+}): ReactElement => (
+  <article
+    className={classNames(
+      'sq-press group flex cursor-pointer overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-surface-float',
+      orientation === 'wide' ? 'flex-col' : 'flex-row',
+      className,
+    )}
+  >
+    {entry.image && (
+      <div
+        className={classNames(
+          'shrink-0 overflow-hidden bg-surface-hover',
+          orientation === 'wide' ? 'aspect-[1.91/1] w-full' : 'w-[19rem]',
+        )}
+      >
+        <img
+          src={entry.image}
+          alt=""
+          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
+        />
+      </div>
+    )}
+    <div className="flex min-w-0 flex-1 flex-col gap-3 p-5">
+      <div className="flex items-center gap-2">
+        <span className="rounded-6 bg-accent-cabbage-flat px-1.5 py-0.5 font-bold uppercase tracking-wide text-accent-cabbage-default typo-caption2">
+          {eyebrow}
+        </span>
+        <span className="text-text-quaternary typo-footnote">
+          {formatDay(entry.createdAt)}
+        </span>
+      </div>
+      <h3
+        className={classNames(
+          'font-bold text-text-primary',
+          orientation === 'wide' ? 'typo-title2' : 'typo-title3',
+        )}
+      >
+        {entry.title}
+      </h3>
+      <p
+        className={classNames(
+          'text-text-secondary typo-callout',
+          orientation === 'wide' ? 'line-clamp-3' : 'line-clamp-2',
+        )}
+      >
+        {entry.summary}
+      </p>
+      <div className="mt-auto flex items-center gap-3 pt-1">
+        <Avatar member={entry.author} size={1.5} />
+        <span className="text-text-tertiary typo-footnote">
+          {entry.author.name}
+        </span>
+        <EngagementMeta entry={entry} className="ml-auto" />
+      </div>
+    </div>
+  </article>
+);
diff --git a/packages/storybook/stories/squad-page/kit2.tsx b/packages/storybook/stories/squad-page/kit2.tsx
new file mode 100644
index 00000000000..8acc89dedba
--- /dev/null
+++ b/packages/storybook/stories/squad-page/kit2.tsx
@@ -0,0 +1,643 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AddUserIcon,
+  ArrowIcon,
+  BellIcon,
+  JobIcon,
+  CalendarIcon,
+  DiscussIcon,
+  HashtagIcon,
+  LinkIcon,
+  MenuIcon,
+  OpenLinkIcon,
+  PinIcon,
+  PlusIcon,
+  SettingsIcon,
+  SlackIcon,
+  TerminalIcon,
+  TrendingIcon,
+  UpvoteIcon,
+  UserIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import type { Entry, TeamMember } from './data';
+import {
+  formatCount,
+  formatSince,
+  jobs,
+  pinnedEntry,
+  squad,
+  stack,
+  team,
+} from './data';
+import { Avatar, Facepile, Logo, VerifiedMark, Viewer } from './kit';
+
+// Round two vocabulary. The WHOOP rule this round is built on: a page is a
+// set of tiles the owner orders by priority, and each tile is a doorway, not
+// a destination. No banner and no overlapping avatar (that is the Facebook
+// silhouette); brand comes from an ambient glow pulled off the cover, and the
+// identity is one row.
+
+const kit2Css = `
+/* Cover as light. Blurred far enough that it reads as colour, not as image. */
+.sq2-ambient {
+  position: absolute;
+  left: -10%;
+  right: -10%;
+  top: -14rem;
+  height: 28rem;
+  background-size: cover;
+  background-position: center;
+  filter: blur(90px) saturate(1.4);
+  opacity: var(--sq2-ambient, 0.28);
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
+}
+.sq2-tile {
+  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.sq2-tile:hover { border-color: var(--theme-border-subtlest-secondary); }
+.sq2-handle { opacity: 0; transition: opacity 120ms; }
+.sq2-tile:hover .sq2-handle { opacity: 1; }
+.sq2-shelf { scrollbar-width: none; }
+.sq2-shelf::-webkit-scrollbar { display: none; }
+.sq2-shelf-fade {
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 4rem), transparent);
+  mask-image: linear-gradient(to right, black calc(100% - 4rem), transparent);
+}
+.sq2-sticky-bar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--theme-background-default) 82%, transparent);
+}
+.sq2-rank { font-variant-numeric: tabular-nums; }
+`;
+
+export const Kit2Styles = (): ReactElement => (
+  // eslint-disable-next-line react/no-danger
+  <style dangerouslySetInnerHTML={{ __html: kit2Css }} />
+);
+
+export const Ambient = ({
+  intensity = 0.28,
+}: {
+  intensity?: number;
+}): ReactElement => (
+  <div
+    aria-hidden
+    className="sq2-ambient"
+    style={
+      {
+        backgroundImage: `url(${squad.headerImage})`,
+        '--sq2-ambient': intensity,
+      } as React.CSSProperties
+    }
+  />
+);
+
+/* --------------------------------------------------------------- identity */
+
+/**
+ * One row. Logo, name, meta, the primary action. The facepile is the proof;
+ * the numbers live in a tile, not in the header.
+ */
+export const IdentityRow = ({
+  viewer = Viewer.Visitor,
+  size = 'md',
+  className,
+}: {
+  viewer?: Viewer;
+  size?: 'sm' | 'md';
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('relative flex items-center gap-4', className)}>
+    <Logo size={size === 'sm' ? 2.75 : 4} ring={false} />
+    <div className="flex min-w-0 flex-1 flex-col">
+      <h1
+        className={classNames(
+          'flex items-center gap-2 font-bold text-text-primary',
+          size === 'sm' ? 'typo-title3' : 'typo-title2',
+        )}
+      >
+        {squad.name}
+        <VerifiedMark label={false} />
+      </h1>
+      <div className="flex items-center gap-2 text-text-tertiary typo-footnote">
+        <span>@{squad.handle}</span>
+        <span className="text-text-quaternary">·</span>
+        <span className="text-text-link">{squad.category}</span>
+        <span className="text-text-quaternary">·</span>
+        <Facepile size={1.125} max={4} count={squad.membersCount} />
+      </div>
+    </div>
+    <PrimaryActions viewer={viewer} size={size} />
+  </div>
+);
+
+export const PrimaryActions = ({
+  viewer = Viewer.Visitor,
+  size = 'md',
+}: {
+  viewer?: Viewer;
+  size?: 'sm' | 'md';
+}): ReactElement => {
+  const buttonSize = size === 'sm' ? ButtonSize.Small : ButtonSize.Medium;
+
+  return (
+    <div className="flex items-center gap-2">
+      {viewer === Viewer.Visitor ? (
+        <Button
+          variant={ButtonVariant.Primary}
+          color={ButtonColor.Cabbage}
+          size={buttonSize}
+        >
+          Join
+        </Button>
+      ) : (
+        <Button
+          variant={ButtonVariant.Primary}
+          size={buttonSize}
+          icon={<PlusIcon />}
+        >
+          Post
+        </Button>
+      )}
+      {viewer === Viewer.Admin && (
+        <Button
+          variant={ButtonVariant.Subtle}
+          size={buttonSize}
+          icon={<AddUserIcon />}
+        >
+          Invite
+        </Button>
+      )}
+      {viewer !== Viewer.Visitor && (
+        <Button
+          variant={ButtonVariant.Float}
+          size={buttonSize}
+          icon={<BellIcon />}
+          aria-label="Notifications"
+        />
+      )}
+      <Button
+        variant={ButtonVariant.Float}
+        size={buttonSize}
+        icon={<MenuIcon />}
+        aria-label="More"
+      />
+    </div>
+  );
+};
+
+/* ------------------------------------------------------------------ tiles */
+
+/**
+ * The module. Header is an icon and a title; the body is at most three rows;
+ * the whole tile opens the full view. Admins see the drag handle on hover.
+ */
+export const Tile = ({
+  icon,
+  title,
+  meta,
+  children,
+  admin = false,
+  flat = false,
+  className,
+  bodyClassName,
+  style,
+}: {
+  icon?: ReactNode;
+  title?: string;
+  meta?: ReactNode;
+  children: ReactNode;
+  admin?: boolean;
+  /** Hairline section rather than a card. */
+  flat?: boolean;
+  className?: string;
+  bodyClassName?: string;
+  style?: CSSProperties;
+}): ReactElement => (
+  <section
+    style={style}
+    className={classNames(
+      'sq2-tile relative flex flex-col gap-3 overflow-hidden',
+      flat
+        ? 'border-t border-border-subtlest-tertiary py-4 first:border-t-0 first:pt-0'
+        : 'rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4',
+      className,
+    )}
+  >
+    {title && (
+      <header className="flex items-center gap-2">
+        {icon && <span className="flex text-text-tertiary">{icon}</span>}
+        <h3 className="font-bold text-text-primary typo-footnote">{title}</h3>
+        <span className="ml-auto flex items-center gap-1 text-text-quaternary typo-caption1">
+          {meta}
+          {admin ? (
+            <span
+              className="sq2-handle cursor-grab select-none px-1 text-text-quaternary"
+              title="Drag to reorder"
+            >
+              ⋮⋮
+            </span>
+          ) : (
+            <ArrowIcon
+              size={IconSize.XSmall}
+              className="rotate-90 text-text-quaternary"
+            />
+          )}
+        </span>
+      </header>
+    )}
+    <div className={classNames('flex flex-col gap-2', bodyClassName)}>
+      {children}
+    </div>
+  </section>
+);
+
+export const AddTile = ({
+  className,
+}: {
+  className?: string;
+}): ReactElement => (
+  <button
+    type="button"
+    className={classNames(
+      'flex flex-col items-start gap-2 rounded-16 border border-dashed border-border-subtlest-secondary p-4 text-left text-text-tertiary transition-colors hover:border-border-subtlest-primary hover:text-text-primary',
+      className,
+    )}
+  >
+    <span className="flex items-center gap-2 font-bold typo-footnote">
+      <PlusIcon size={IconSize.XSmall} />
+      Add a module
+    </span>
+    <span className="text-text-quaternary typo-caption1">
+      Leaderboard · Events · Poll · Newsletter · Slack · Roles · Custom link
+    </span>
+  </button>
+);
+
+/* ---------------------------------------------------------- tile contents */
+
+export const PinnedBody = ({
+  entry = pinnedEntry,
+}: {
+  entry?: Entry;
+}): ReactElement => (
+  <div className="flex flex-col gap-1">
+    <span className="line-clamp-2 font-bold text-text-primary typo-callout">
+      {entry.title}
+    </span>
+    <span className="text-text-tertiary typo-footnote">
+      {entry.author.name} · {formatSince(entry.createdAt)}
+    </span>
+  </div>
+);
+
+export const AboutBody = (): ReactElement => (
+  <div className="flex flex-col gap-2">
+    <p className="text-text-secondary typo-footnote">{squad.tagline}</p>
+    <span className="text-text-quaternary typo-caption1">
+      {squad.company.location} · {squad.company.size} · Since{' '}
+      {formatSince(squad.createdAt)}
+    </span>
+  </div>
+);
+
+export const TeamBody = ({
+  rows = 3,
+  more = true,
+}: {
+  rows?: number;
+  more?: boolean;
+}): ReactElement => (
+  <div className="flex flex-col gap-2.5">
+    {team.slice(0, rows).map((member) => (
+      <div key={member.id} className="flex items-center gap-2.5">
+        <Avatar member={member} size={1.75} />
+        <span className="truncate text-text-primary typo-footnote">
+          {member.name}
+        </span>
+        <span className="ml-auto text-text-quaternary typo-caption1">
+          {member.role}
+        </span>
+      </div>
+    ))}
+    {more && team.length > rows && (
+      <span className="text-text-quaternary typo-caption1">
+        and {team.length - rows} more
+      </span>
+    )}
+  </div>
+);
+
+export const TeamFaces = (): ReactElement => (
+  <div className="flex flex-col gap-2">
+    <Facepile members={team} max={6} size={1.75} />
+    <span className="text-text-tertiary typo-footnote">
+      {team.length} admins and moderators
+    </span>
+  </div>
+);
+
+export const StackBody = ({ max = 6 }: { max?: number }): ReactElement => (
+  <div className="flex flex-wrap gap-1.5">
+    {stack.slice(0, max).map((item) => (
+      <span
+        key={item.name}
+        className="flex items-center gap-1.5 rounded-8 bg-background-default py-1 pl-1.5 pr-2 text-text-secondary typo-caption1"
+      >
+        <img src={item.image} alt="" className="h-3.5 w-3.5 rounded-4" />
+        {item.name}
+      </span>
+    ))}
+  </div>
+);
+
+export const RolesBody = (): ReactElement => (
+  <div className="flex flex-col gap-2">
+    {jobs.map((job) => (
+      <div key={job.title} className="flex flex-col">
+        <span className="font-bold text-text-primary typo-footnote">
+          {job.title}
+        </span>
+        <span className="text-text-quaternary typo-caption1">
+          {job.location} · {job.type}
+        </span>
+      </div>
+    ))}
+  </div>
+);
+
+export const LinksBody = (): ReactElement => (
+  <div className="flex flex-col gap-1.5">
+    {squad.links.map((link) => (
+      <a
+        key={link.href}
+        href={link.href}
+        className="flex items-center gap-2 text-text-secondary typo-footnote hover:text-text-primary"
+      >
+        <OpenLinkIcon size={IconSize.XSmall} className="text-text-quaternary" />
+        {link.label}
+      </a>
+    ))}
+  </div>
+);
+
+/* Real-ish weekly post counts for the last twelve weeks. */
+const pulse = [2, 3, 1, 4, 2, 5, 3, 6, 4, 3, 5, 4];
+
+export const Sparkline = ({
+  values = pulse,
+  height = 36,
+  className,
+}: {
+  values?: number[];
+  height?: number;
+  className?: string;
+}): ReactElement => {
+  const width = 160;
+  const max = Math.max(...values);
+  const step = width / (values.length - 1);
+  const points = values.map(
+    (value, index) =>
+      `${index * step},${height - (value / max) * (height - 4) - 2}`,
+  );
+  const line = points.join(' ');
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className={classNames('h-9 w-full', className)}
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient id="sq2-pulse" x1="0" x2="0" y1="0" y2="1">
+          <stop
+            offset="0"
+            stopColor="var(--theme-accent-cabbage-default)"
+            stopOpacity="0.35"
+          />
+          <stop
+            offset="1"
+            stopColor="var(--theme-accent-cabbage-default)"
+            stopOpacity="0"
+          />
+        </linearGradient>
+      </defs>
+      <polygon
+        points={`0,${height} ${line} ${width},${height}`}
+        fill="url(#sq2-pulse)"
+      />
+      <polyline
+        points={line}
+        fill="none"
+        stroke="var(--theme-accent-cabbage-default)"
+        strokeWidth="2"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+};
+
+export const PulseBody = ({
+  big = false,
+  trend = true,
+}: {
+  big?: boolean;
+  trend?: boolean;
+}): ReactElement => (
+  <div className="flex flex-col gap-1">
+    <div className="flex items-baseline gap-2">
+      <span
+        className={classNames(
+          'sq-nums font-bold text-text-primary',
+          big ? 'typo-mega3' : 'typo-title2',
+        )}
+      >
+        12
+      </span>
+      <span className="text-text-tertiary typo-footnote">posts this month</span>
+      {trend && (
+        <span className="ml-auto flex items-center gap-0.5 text-status-success typo-caption1">
+          <TrendingIcon size={IconSize.XSmall} />
+          +33%
+        </span>
+      )}
+    </div>
+    <Sparkline />
+  </div>
+);
+
+/* Top contributors this week. Reputation gained inside the squad. */
+const leaderboard: { member: TeamMember; points: number }[] = [
+  { member: team[3], points: 412 },
+  { member: team[1], points: 338 },
+  { member: team[4], points: 290 },
+  { member: team[6], points: 154 },
+  { member: team[2], points: 96 },
+];
+
+export const LeaderboardBody = ({
+  rows = 3,
+  highlight = false,
+}: {
+  rows?: number;
+  highlight?: boolean;
+}): ReactElement => (
+  <ol className="flex flex-col gap-2">
+    {leaderboard.slice(0, rows).map((row, index) => (
+      <li key={row.member.id} className="flex items-center gap-2.5">
+        <span
+          className={classNames(
+            'sq2-rank w-4 text-right font-bold typo-caption1',
+            index === 0 && highlight
+              ? 'text-accent-cabbage-default'
+              : 'text-text-quaternary',
+          )}
+        >
+          {index + 1}
+        </span>
+        <Avatar member={row.member} size={1.5} />
+        <span className="truncate text-text-primary typo-footnote">
+          {row.member.name}
+        </span>
+        <span className="sq-nums ml-auto flex items-center gap-1 text-text-tertiary typo-caption1">
+          <UpvoteIcon size={IconSize.XSmall} />
+          {row.points}
+        </span>
+      </li>
+    ))}
+  </ol>
+);
+
+export const StatBig = ({
+  value,
+  label,
+  extra,
+  size = 'md',
+}: {
+  value: number;
+  label: string;
+  extra?: ReactNode;
+  size?: 'md' | 'lg';
+}): ReactElement => (
+  <div className="flex flex-col gap-1">
+    <span
+      className={classNames(
+        'sq-nums font-bold leading-none text-text-primary',
+        size === 'lg' ? 'typo-mega2' : 'typo-mega3',
+      )}
+    >
+      {formatCount(value)}
+    </span>
+    <span className="text-text-tertiary typo-footnote">{label}</span>
+    {extra}
+  </div>
+);
+
+/* ---------------------------------------------------------------- feed bits */
+
+/** The share bar the squad page already has, in the X "what's happening" seat. */
+export const Composer = ({
+  member = team[2],
+  className,
+}: {
+  member?: TeamMember;
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float px-4 py-3',
+      className,
+    )}
+  >
+    <Avatar member={member} size={2} />
+    <span className="flex-1 text-text-quaternary typo-callout">
+      Share a link or write something for the squad
+    </span>
+    <Button
+      variant={ButtonVariant.Subtle}
+      size={ButtonSize.Small}
+      icon={<LinkIcon />}
+    >
+      Link
+    </Button>
+    <Button
+      variant={ButtonVariant.Primary}
+      size={ButtonSize.Small}
+      icon={<PlusIcon />}
+    >
+      Post
+    </Button>
+  </div>
+);
+
+export const SortChips = ({
+  options = ['Latest', 'Top', 'Discussed'],
+  active = 'Latest',
+  className,
+}: {
+  options?: string[];
+  active?: string;
+  className?: string;
+}): ReactElement => (
+  <div className={classNames('flex items-center gap-1', className)}>
+    {options.map((option) => (
+      <button
+        type="button"
+        key={option}
+        className={classNames(
+          'rounded-10 px-3 py-1.5 typo-callout',
+          option === active
+            ? 'bg-surface-float font-bold text-text-primary'
+            : 'text-text-tertiary hover:text-text-primary',
+        )}
+      >
+        {option}
+      </button>
+    ))}
+  </div>
+);
+
+/** For the customize state: what a tile is, in the admin's words. */
+export const CustomizeBar = ({
+  className,
+}: {
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex items-center gap-2 text-text-quaternary typo-caption1',
+      className,
+    )}
+  >
+    <SettingsIcon size={IconSize.XSmall} />
+    Drag tiles to reorder. Hidden tiles stay in the menu.
+  </div>
+);
+
+export const tileIcons = {
+  pinned: <PinIcon size={IconSize.XSmall} />,
+  about: <HashtagIcon size={IconSize.XSmall} />,
+  team: <UserIcon size={IconSize.XSmall} />,
+  leaderboard: <TrendingIcon size={IconSize.XSmall} />,
+  stack: <TerminalIcon size={IconSize.XSmall} />,
+  roles: <JobIcon size={IconSize.XSmall} />,
+  links: <LinkIcon size={IconSize.XSmall} />,
+  events: <CalendarIcon size={IconSize.XSmall} />,
+  discuss: <DiscussIcon size={IconSize.XSmall} />,
+};
diff --git a/packages/storybook/stories/squad-page/manage.tsx b/packages/storybook/stories/squad-page/manage.tsx
new file mode 100644
index 00000000000..17be05d759f
--- /dev/null
+++ b/packages/storybook/stories/squad-page/manage.tsx
@@ -0,0 +1,579 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AnalyticsIcon,
+  AppIcon,
+  ArrowIcon,
+  DocsIcon,
+  EditIcon,
+  EmbedIcon,
+  HelpIcon,
+  LinkIcon,
+  LockIcon,
+  MegaphoneIcon,
+  MiniCloseIcon,
+  MoveToIcon,
+  OpenLinkIcon,
+  PlusIcon,
+  TimerIcon,
+  TrashIcon,
+  UserIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { TextField } from '@dailydotdev/shared/src/components/fields/TextField';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { HorizontalSeparator } from '@dailydotdev/shared/src/components/utilities/common';
+import {
+  companyLinks,
+  moderationQueueCount,
+  products,
+  rules,
+  squad,
+} from './data';
+import { isAdmin, linkIcon, VerifiedMark, Viewer } from './kit';
+import { ContentSource, useWorkspace } from './state';
+import {
+  AnalyticsPage,
+  ColumnFitContext,
+  DocPage,
+  docs,
+  FeedSourcePage,
+  MembersPage,
+  ModerationPage,
+  SettingsPage,
+} from './workspace';
+import { AddProductPage, SaveProductButton } from './productForm';
+
+// Managing the squad the way a profile is edited: its own settings area,
+// a grouped menu beside the page on laptop, the menu as a list and then
+// one page at a time below it. Edit page opens Details; every Manage
+// entry opens its section. Moderators see only what they may touch.
+
+export type ManageSection =
+  | 'details'
+  | 'rules'
+  | 'faq'
+  | 'products'
+  | 'add-product'
+  | 'links'
+  | 'followers'
+  | 'moderation'
+  | 'posting'
+  | 'feed'
+  | 'analytics'
+  | 'integrations'
+  | 'danger';
+
+interface ManageItem {
+  id: ManageSection;
+  label: string;
+  icon: ReactElement;
+  team?: boolean;
+  feedOnly?: boolean;
+  badge?: number;
+}
+
+const groups: { title: string; items: ManageItem[] }[] = [
+  {
+    title: 'Page',
+    items: [
+      { id: 'details', label: 'Details', icon: <EditIcon /> },
+      { id: 'rules', label: 'Rules', icon: <DocsIcon />, team: true },
+      { id: 'faq', label: 'FAQ', icon: <HelpIcon />, team: true },
+      { id: 'products', label: 'Products', icon: <AppIcon /> },
+      { id: 'links', label: 'Links', icon: <LinkIcon /> },
+    ],
+  },
+  {
+    title: 'Community',
+    items: [
+      { id: 'followers', label: 'Members', icon: <UserIcon />, team: true },
+      {
+        id: 'moderation',
+        label: 'Moderation',
+        icon: <TimerIcon />,
+        team: true,
+        badge: moderationQueueCount,
+      },
+      { id: 'posting', label: 'Posting and invitations', icon: <LockIcon /> },
+    ],
+  },
+  {
+    title: 'Tools',
+    items: [
+      {
+        id: 'feed',
+        label: 'Content feed',
+        icon: <MegaphoneIcon />,
+        feedOnly: true,
+      },
+      { id: 'analytics', label: 'Analytics', icon: <AnalyticsIcon /> },
+      { id: 'integrations', label: 'Integrations', icon: <EmbedIcon /> },
+      { id: 'danger', label: 'Danger zone', icon: <TrashIcon /> },
+    ],
+  },
+];
+
+export const manageTitles: Record<ManageSection, string> = {
+  details: 'Details',
+  rules: 'Rules',
+  faq: 'FAQ',
+  products: 'Products',
+  'add-product': 'Add product',
+  links: 'Links',
+  followers: 'Members',
+  moderation: 'Moderation',
+  posting: 'Posting and invitations',
+  feed: 'Content feed',
+  analytics: 'Analytics',
+  integrations: 'Integrations',
+  danger: 'Danger zone',
+};
+
+export const manageSectionIds = Object.keys(manageTitles) as ManageSection[];
+
+const useGroups = (viewer: Viewer) => {
+  const { source } = useWorkspace();
+
+  return groups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (item) =>
+          (isAdmin(viewer) || item.team) &&
+          (!item.feedOnly || source === ContentSource.Feed),
+      ),
+    }))
+    .filter((group) => group.items.length);
+};
+
+const MenuHeader = ({ onOpen }: { onOpen: () => void }): ReactElement => (
+  <button
+    type="button"
+    onClick={onOpen}
+    className="relative flex items-center gap-2 rounded-10 px-1 text-left hover:bg-theme-active"
+  >
+    <img src={squad.image} alt="" className="size-8 rounded-full" />
+    <div className="flex min-w-0 flex-1 flex-col gap-1">
+      <div className="flex items-center gap-1">
+        <Typography
+          type={TypographyType.Subhead}
+          color={TypographyColor.Primary}
+          bold
+          truncate
+          className="min-w-0"
+        >
+          {squad.name}
+        </Typography>
+        <VerifiedMark label={false} />
+      </div>
+      <Typography
+        type={TypographyType.Footnote}
+        color={TypographyColor.Tertiary}
+        truncate
+      >
+        @{squad.handle}
+      </Typography>
+    </div>
+    <OpenLinkIcon className="text-text-quaternary" size={IconSize.Size16} />
+  </button>
+);
+
+const ManageMenu = ({
+  viewer,
+  active,
+  onSection,
+  large,
+}: {
+  viewer: Viewer;
+  active?: ManageSection;
+  onSection: (id: ManageSection) => void;
+  /** The phone list: body type, a chevron on each row. */
+  large?: boolean;
+}): ReactElement => {
+  const shownGroups = useGroups(viewer);
+
+  return (
+    <nav className="flex flex-col gap-2">
+      {shownGroups.map((group, index) => (
+        <React.Fragment key={group.title}>
+          <section className="flex flex-col">
+            <Typography
+              bold
+              color={TypographyColor.Quaternary}
+              type={TypographyType.Footnote}
+              className="p-1"
+            >
+              {group.title}
+            </Typography>
+            {group.items.map((item) => {
+              const isActive = active === item.id;
+
+              return (
+                <Typography
+                  key={item.id}
+                  tag={TypographyTag.Button}
+                  type={large ? TypographyType.Body : TypographyType.Subhead}
+                  color={
+                    large ? TypographyColor.Secondary : TypographyColor.Tertiary
+                  }
+                  onClick={() => onSection(item.id)}
+                  aria-current={isActive ? 'page' : undefined}
+                  className={classNames(
+                    'group flex h-10 cursor-pointer items-center gap-2 rounded-10 px-1 hover:bg-surface-float',
+                    !large && 'tablet:h-8',
+                    isActive && 'bg-surface-active',
+                  )}
+                >
+                  {React.cloneElement(item.icon, {
+                    secondary: isActive,
+                    size: large ? IconSize.Small : IconSize.XSmall,
+                  })}
+                  <span>{item.label}</span>
+                  {!!item.badge && (
+                    <span className="sq-nums ml-auto text-text-quaternary typo-footnote">
+                      {item.badge}
+                    </span>
+                  )}
+                  {large && (
+                    <ArrowIcon
+                      className={classNames(
+                        'rotate-90 text-text-quaternary',
+                        !item.badge && 'ml-auto',
+                      )}
+                      size={IconSize.Size16}
+                    />
+                  )}
+                </Typography>
+              );
+            })}
+          </section>
+          {index < shownGroups.length - 1 && <HorizontalSeparator />}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};
+
+const EditRowButton = ({ label }: { label: string }): ReactElement => (
+  <Button
+    variant={ButtonVariant.Tertiary}
+    size={ButtonSize.XSmall}
+    icon={<EditIcon />}
+    aria-label={`Edit ${label}`}
+    title={`Edit ${label}`}
+    className="absolute right-0 top-0"
+  />
+);
+
+const RulesManage = (): ReactElement => (
+  <div className="flex flex-col gap-4 px-4 py-6 tablet:px-6">
+    <Typography type={TypographyType.Callout} color={TypographyColor.Tertiary}>
+      Shown once before a member&apos;s first post. Moderators remove what
+      breaks them.
+    </Typography>
+    <ol className="flex flex-col gap-4">
+      {rules.map(([title, body], index) => (
+        <li key={title} className="relative flex gap-3">
+          <Typography
+            type={TypographyType.Subhead}
+            color={TypographyColor.Quaternary}
+            bold
+            className="sq-nums w-4 shrink-0"
+          >
+            {index + 1}
+          </Typography>
+          <div className="flex min-w-0 max-w-[calc(100%-3.5rem)] flex-1 flex-col gap-0.5">
+            <Typography type={TypographyType.Subhead} bold>
+              {title}
+            </Typography>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+            >
+              {body}
+            </Typography>
+          </div>
+          <EditRowButton label={title} />
+        </li>
+      ))}
+    </ol>
+  </div>
+);
+
+const ProductsManage = (): ReactElement => (
+  <div className="flex flex-col gap-4 px-4 py-6 tablet:px-6">
+    <ul className="flex flex-col gap-4">
+      {products.map((product) => (
+        <li key={product.id} className="relative flex gap-3">
+          <img
+            src={product.image}
+            alt=""
+            className="size-10 shrink-0 rounded-12 object-cover"
+          />
+          <div className="flex min-w-0 max-w-[calc(100%-5rem)] flex-1 flex-col gap-0.5">
+            <Typography type={TypographyType.Subhead} bold>
+              {product.name}
+            </Typography>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+            >
+              {product.tagline}
+            </Typography>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+            >
+              {product.category} · {product.pricing}
+            </Typography>
+          </div>
+          <EditRowButton label={product.name} />
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+const LinksManage = (): ReactElement => (
+  <div className="flex flex-col gap-4 px-4 py-6 tablet:px-6">
+    <Typography type={TypographyType.Callout} color={TypographyColor.Tertiary}>
+      Shown in the Links widget on the page, in this order.
+    </Typography>
+    <TextField
+      type="url"
+      inputId="squad-link-url"
+      label="Add link"
+      placeholder="Paste a URL (e.g., github.com/coderabbitai)"
+      fieldType="secondary"
+      actionButton={
+        <Button
+          type="button"
+          variant={ButtonVariant.Secondary}
+          size={ButtonSize.XSmall}
+          icon={<PlusIcon />}
+        >
+          Add
+        </Button>
+      }
+    />
+    <ul className="flex flex-col gap-4">
+      {companyLinks.map((item) => (
+        <li key={item.id} className="flex items-center gap-3">
+          <span className="flex size-10 shrink-0 items-center justify-center rounded-12 bg-surface-float text-text-secondary">
+            {linkIcon(item.id, IconSize.Small)}
+          </span>
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <Typography type={TypographyType.Subhead} bold>
+              {item.label}
+            </Typography>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+              truncate
+            >
+              {item.href.replace(/^https?:\/\//, '')}
+            </Typography>
+          </div>
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.XSmall}
+            icon={<MiniCloseIcon />}
+            aria-label={`Remove ${item.label}`}
+            title="Remove link"
+          />
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+const Section = ({
+  id,
+  viewer,
+}: {
+  id: ManageSection;
+  viewer: Viewer;
+}): ReactElement => {
+  switch (id) {
+    case 'rules':
+      return <RulesManage />;
+    case 'faq':
+      return <DocPage page={docs.faq} />;
+    case 'products':
+      return <ProductsManage />;
+    case 'add-product':
+      return <AddProductPage />;
+    case 'links':
+      return <LinksManage />;
+    case 'followers':
+      return <MembersPage viewer={viewer} />;
+    case 'moderation':
+      return <ModerationPage />;
+    case 'posting':
+      return <SettingsPage only="posting" />;
+    case 'feed':
+      return <FeedSourcePage />;
+    case 'analytics':
+      return <AnalyticsPage />;
+    case 'integrations':
+      return <SettingsPage only="integrations" />;
+    case 'danger':
+      return <SettingsPage only="danger" />;
+    default:
+      return <SettingsPage only="details" />;
+  }
+};
+
+const addButton = (label: string, onClick?: () => void): ReactNode => (
+  <Button
+    variant={ButtonVariant.Subtle}
+    size={ButtonSize.Small}
+    icon={<PlusIcon />}
+    onClick={onClick}
+  >
+    {label}
+  </Button>
+);
+
+const PageHeader = ({
+  title,
+  onBack,
+  backLabel,
+  action,
+  backOnLaptop = false,
+}: {
+  title: string;
+  onBack: () => void;
+  backLabel: string;
+  action?: ReactNode;
+  backOnLaptop?: boolean;
+}): ReactElement => (
+  <div className="flex h-14 shrink-0 items-center gap-2 border-b border-border-subtlest-tertiary px-4 tablet:px-6">
+    <span className={classNames('flex', !backOnLaptop && 'laptop:hidden')}>
+      <Button
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.Small}
+        icon={<MoveToIcon className="rotate-180" />}
+        aria-label={backLabel}
+        title={backLabel}
+        onClick={onBack}
+      />
+    </span>
+    <h1 className="min-w-0 flex-1 truncate font-bold text-text-primary typo-body tablet:typo-title3">
+      {title}
+    </h1>
+    {action && <div className="shrink-0">{action}</div>}
+  </div>
+);
+
+/**
+ * The Manage area. `section` is where it opens; without one, a laptop
+ * opens the first page it may show and a phone opens the menu.
+ */
+export const ManageView = ({
+  viewer,
+  initialSection,
+  onExit,
+}: {
+  viewer: Viewer;
+  initialSection?: ManageSection;
+  onExit: () => void;
+}): ReactElement => {
+  const visible = useGroups(viewer).flatMap((group) => group.items);
+  const fallback = visible[0]?.id ?? 'details';
+  const [section, setSection] = useState<ManageSection | undefined>(
+    initialSection,
+  );
+  const shown = section ?? fallback;
+  const onBack = () =>
+    section === 'add-product' ? setSection('products') : setSection(undefined);
+
+  let action: ReactNode;
+  if (shown === 'details' || shown === 'posting') {
+    action = (
+      <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+        Save
+      </Button>
+    );
+  } else if (shown === 'rules') {
+    action = addButton('Add');
+  } else if (shown === 'faq') {
+    action = (
+      <Button
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        icon={<EditIcon />}
+      >
+        Edit
+      </Button>
+    );
+  } else if (shown === 'products') {
+    action = addButton('Add', () => setSection('add-product'));
+  } else if (shown === 'add-product') {
+    action = <SaveProductButton onSave={() => setSection('products')} />;
+  } else if (shown === 'links') {
+    action = (
+      <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+        Save
+      </Button>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex w-full gap-4 laptop:max-w-5xl laptop:p-4 laptop:pb-6 laptopL:max-w-6xl">
+      <aside className="hidden w-64 shrink-0 flex-col gap-2 self-start rounded-16 border border-border-subtlest-tertiary p-2 laptop:flex">
+        <MenuHeader onOpen={onExit} />
+        <HorizontalSeparator />
+        <ManageMenu viewer={viewer} active={shown} onSection={setSection} />
+      </aside>
+
+      <main
+        className={classNames(
+          'min-w-0 flex-1 flex-col border-border-subtlest-tertiary laptop:flex laptop:rounded-16 laptop:border',
+          section ? 'flex' : 'hidden',
+        )}
+      >
+        <PageHeader
+          title={manageTitles[shown]}
+          onBack={onBack}
+          backLabel={
+            section === 'add-product' ? 'Back to Products' : 'Back to Manage'
+          }
+          backOnLaptop={section === 'add-product'}
+          action={action}
+        />
+        <ColumnFitContext.Provider value>
+          <Section id={shown} viewer={viewer} />
+        </ColumnFitContext.Provider>
+      </main>
+
+      {!section && (
+        <div className="flex min-w-0 flex-1 flex-col laptop:hidden">
+          <PageHeader
+            title={`Manage ${squad.name}`}
+            onBack={onExit}
+            backLabel={`Back to ${squad.name}`}
+            backOnLaptop
+          />
+          <div className="flex flex-col gap-2 p-4">
+            <MenuHeader onOpen={onExit} />
+            <HorizontalSeparator />
+            <ManageMenu viewer={viewer} onSection={setSection} large />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/owner.tsx b/packages/storybook/stories/squad-page/owner.tsx
new file mode 100644
index 00000000000..e299f16274d
--- /dev/null
+++ b/packages/storybook/stories/squad-page/owner.tsx
@@ -0,0 +1,159 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  CopyIcon,
+  EyeIcon,
+  FacebookIcon,
+  LinkedInIcon,
+  RedditIcon,
+  TelegramIcon,
+  TwitterIcon,
+  WhatsappIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { Switch } from '@dailydotdev/shared/src/components/fields/Switch';
+import {
+  getFacebookShareLink,
+  getLinkedInShareLink,
+  getRedditShareLink,
+  getTelegramShareLink,
+  getTwitterShareLink,
+  getWhatsappShareLink,
+} from '@dailydotdev/shared/src/lib/share';
+import { squad } from './data';
+
+// The profile page's two owner tools, for the people who run the squad:
+// ProfilePreviewToggle and the Share card, with the squad's copy.
+
+export const squadPermalink = `https://app.daily.dev/squads/${squad.handle}`;
+const shareText = `Check out ${squad.name} on daily.dev!`;
+
+/**
+ * ProfilePreviewToggle for the team, worded like LinkedIn's "View as
+ * member": it names who you will see the page as, and says it in one line.
+ */
+export const PreviewModeToggle = ({
+  checked,
+  onToggle,
+}: {
+  checked: boolean;
+  onToggle: () => void;
+}): ReactElement => (
+  <div className="flex items-center gap-3 rounded-16 border border-border-subtlest-tertiary px-4 py-3">
+    <EyeIcon
+      size={IconSize.Small}
+      secondary={checked}
+      className={classNames(
+        'shrink-0',
+        checked ? 'text-text-primary' : 'text-text-tertiary',
+      )}
+    />
+    <span className="min-w-0 flex-1 font-bold text-text-primary typo-callout">
+      View as a visitor
+    </span>
+    <Switch
+      inputId="squad-preview-toggle"
+      name="squadPreview"
+      checked={checked}
+      onToggle={onToggle}
+      compact
+      className="shrink-0"
+      aria-label="View as a visitor"
+    />
+  </div>
+);
+
+const networks = [
+  {
+    label: 'Share on X',
+    icon: <TwitterIcon />,
+    href: getTwitterShareLink(squadPermalink, shareText),
+  },
+  {
+    label: 'Share on WhatsApp',
+    icon: <WhatsappIcon />,
+    href: getWhatsappShareLink(squadPermalink),
+  },
+  {
+    label: 'Share on Facebook',
+    icon: <FacebookIcon />,
+    href: getFacebookShareLink(squadPermalink),
+  },
+  {
+    label: 'Share on Reddit',
+    icon: <RedditIcon />,
+    href: getRedditShareLink(squadPermalink, shareText),
+  },
+  {
+    label: 'Share on LinkedIn',
+    icon: <LinkedInIcon />,
+    href: getLinkedInShareLink(squadPermalink),
+  },
+  {
+    label: 'Share on Telegram',
+    icon: <TelegramIcon />,
+    href: getTelegramShareLink(squadPermalink, shareText),
+  },
+];
+
+/** The profile's Share card: the public address, copy, and one tap out. */
+export const SharePageWidget = (): ReactElement => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(squadPermalink);
+    } catch {
+      // The preview may deny clipboard access; the state still confirms.
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  };
+
+  return (
+    <section className="flex flex-col rounded-16 border border-border-subtlest-tertiary p-4">
+      <div className="flex w-full items-center gap-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="font-bold text-text-primary typo-callout">
+            Public page & URL
+          </span>
+          <span className="truncate text-text-secondary typo-subhead">
+            {squadPermalink}
+          </span>
+        </div>
+        <Button
+          variant={ButtonVariant.Tertiary}
+          size={ButtonSize.XSmall}
+          icon={<CopyIcon secondary={copied} />}
+          onClick={copy}
+          aria-label={copied ? 'Copied!' : 'Copy link'}
+          title={copied ? 'Copied!' : 'Copy link'}
+        />
+      </div>
+      <div className="my-2 h-px w-full bg-border-subtlest-tertiary" />
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-text-tertiary typo-subhead">Share</span>
+        {networks.map(({ label, icon, href }) => (
+          <Button
+            key={label}
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.XSmall}
+            icon={icon}
+            tag="a"
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={label}
+            title={label}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/pins.tsx b/packages/storybook/stories/squad-page/pins.tsx
new file mode 100644
index 00000000000..6a818412373
--- /dev/null
+++ b/packages/storybook/stories/squad-page/pins.tsx
@@ -0,0 +1,112 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  ArrowIcon,
+  DiscussIcon,
+  PinIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import type { Entry } from './data';
+import { feedEntries, formatCount, pinnedEntry } from './data';
+import { PinnedCard } from './kit';
+
+// How the team's pins sit above the feed. Reddit's highlights row is the
+// default; X's single pinned post stays switchable for testing.
+
+export enum PinStyle {
+  /** Reddit's Community highlights, as Pinned posts: a row of cards above the feed. */
+  Reddit = 'reddit',
+  /** X profile: the first post, full size, a quiet Pinned line. One pin. */
+  X = 'x',
+}
+
+export const pinStyles = Object.values(PinStyle);
+
+export const pins: Entry[] = [
+  pinnedEntry,
+  ...feedEntries.filter((entry) => entry.image).slice(2, 4),
+].map((entry) => ({ ...entry, pinned: false }));
+
+/** The feed under the pins, without the posts the pins already show. */
+export const feedUnder = (style: PinStyle): Entry[] => {
+  const shown = new Set(
+    (style === PinStyle.X ? pins.slice(0, 1) : pins).map((entry) => entry.id),
+  );
+
+  return feedEntries.filter((entry) => !shown.has(entry.id));
+};
+
+const Stat = ({
+  icon,
+  value,
+}: {
+  icon: ReactElement;
+  value: number;
+}): ReactElement => (
+  <span className="sq-nums flex items-center gap-1">
+    {icon}
+    {formatCount(value)}
+  </span>
+);
+
+const RedditHighlights = (): ReactElement => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <section className="flex flex-col gap-2">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex items-center gap-1.5 self-start text-text-secondary typo-footnote hover:text-text-primary"
+      >
+        <PinIcon size={IconSize.Size16} secondary />
+        <span className="font-bold">Pinned posts</span>
+        <ArrowIcon
+          size={IconSize.Size16}
+          className={classNames('transition-transform', !open && 'rotate-180')}
+        />
+      </button>
+      {open && (
+        <div className="-mx-4 flex gap-3 overflow-x-auto px-4 pb-1 [scrollbar-width:none] tablet:-mx-6 tablet:px-6">
+          {pins.map((entry) => (
+            <a
+              key={entry.id}
+              href="#"
+              className="group relative flex h-40 w-52 shrink-0 flex-col justify-end overflow-hidden rounded-16 border border-border-subtlest-tertiary"
+            >
+              {entry.image && (
+                <img
+                  src={entry.image}
+                  alt=""
+                  className="absolute inset-0 size-full object-cover transition-transform group-hover:scale-105"
+                />
+              )}
+              <span className="absolute inset-0 bg-gradient-to-t from-background-default via-background-default to-transparent opacity-[0.9]" />
+              <span className="relative flex flex-col gap-1.5 p-3">
+                <span className="line-clamp-2 font-bold text-text-primary typo-footnote">
+                  {entry.title}
+                </span>
+                <span className="flex items-center gap-3 text-text-tertiary typo-caption1">
+                  <Stat
+                    icon={<UpvoteIcon size={IconSize.Size16} />}
+                    value={entry.upvotes}
+                  />
+                  <Stat
+                    icon={<DiscussIcon size={IconSize.Size16} />}
+                    value={entry.comments}
+                  />
+                </span>
+              </span>
+            </a>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+};
+
+/** What sits between the toolbar and the feed, per style. */
+export const PinnedArea = ({ style }: { style: PinStyle }): ReactElement =>
+  style === PinStyle.X ? <PinnedCard entry={pins[0]} /> : <RedditHighlights />;
diff --git a/packages/storybook/stories/squad-page/productForm.tsx b/packages/storybook/stories/squad-page/productForm.tsx
new file mode 100644
index 00000000000..2200b6f96a4
--- /dev/null
+++ b/packages/storybook/stories/squad-page/productForm.tsx
@@ -0,0 +1,149 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { TextField } from '@dailydotdev/shared/src/components/fields/TextField';
+import Textarea from '@dailydotdev/shared/src/components/fields/Textarea';
+import { Dropdown } from '@dailydotdev/shared/src/components/fields/Dropdown';
+import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { HorizontalSeparator } from '@dailydotdev/shared/src/components/utilities/common';
+import { profileSecondaryFieldStyles } from '@dailydotdev/shared/src/features/profile/common';
+import { ImageActions } from './workspace';
+
+// Add a product the way a profile adds a work experience: its own page,
+// the title and Save in the header, one plain form in groups. The link
+// comes first because it can fill in everything under it.
+
+const pricing = ['Free', 'Freemium', 'Paid'];
+const categories = [
+  'Code review',
+  'Developer productivity',
+  'CLI',
+  'IDE extension',
+  'Integrations',
+];
+
+const Label = ({ children }: { children: string }): ReactElement => (
+  <Typography type={TypographyType.Callout} bold>
+    {children}
+  </Typography>
+);
+
+export const AddProductPage = (): ReactElement => {
+  const [price, setPrice] = useState('Freemium');
+  const [category, setCategory] = useState(-1);
+
+  return (
+    <div className="flex flex-col gap-6 px-4 py-6 tablet:px-6">
+      <div className="flex flex-col gap-2">
+        <TextField
+          inputId="product-link"
+          name="link"
+          label="Product link"
+          type="url"
+          placeholder="Paste a URL (e.g., producthunt.com/products/coderabbit)"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+        >
+          Paste a Product Hunt, G2, Trustpilot, GitHub or website link and we
+          fill in the rest. You can edit anything after.
+        </Typography>
+      </div>
+      <HorizontalSeparator />
+      <div className="flex items-center gap-4">
+        <div className="relative size-24 shrink-0 overflow-hidden rounded-16 bg-surface-float">
+          <ImageActions
+            label="logo"
+            removable={false}
+            className="absolute inset-0 items-center justify-center"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Label>Logo</Label>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Square PNG or SVG, at least 256px.
+          </Typography>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <TextField
+          inputId="product-name"
+          name="name"
+          label="Product name*"
+          placeholder="Ex: CodeRabbit CLI"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <TextField
+          inputId="product-tagline"
+          name="tagline"
+          label="Tagline*"
+          placeholder="Ex: Review your changes before you push"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+      </div>
+      <HorizontalSeparator />
+      <div className="flex flex-col gap-2">
+        <Label>Category</Label>
+        <Dropdown
+          placeholder="Select category"
+          buttonSize={ButtonSize.Large}
+          options={categories}
+          selectedIndex={category}
+          onChange={(_, index) => setCategory(index)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label>Pricing</Label>
+        <Radio
+          name="product-pricing"
+          value={price}
+          onChange={setPrice}
+          className={{ container: '!flex-row !gap-4' }}
+          options={pricing.map((option) => ({ value: option, label: option }))}
+        />
+      </div>
+      <HorizontalSeparator />
+      <div className="flex flex-col gap-2">
+        <Label>Description</Label>
+        <Textarea
+          inputId="product-description"
+          name="description"
+          label="What it does, who it is for"
+          rows={6}
+          maxLength={500}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const SaveProductButton = ({
+  onSave,
+}: {
+  onSave: () => void;
+}): ReactElement => (
+  <Button
+    variant={ButtonVariant.Primary}
+    size={ButtonSize.Small}
+    onClick={onSave}
+  >
+    Save
+  </Button>
+);
diff --git a/packages/storybook/stories/squad-page/rail.tsx b/packages/storybook/stories/squad-page/rail.tsx
new file mode 100644
index 00000000000..e06867dfa04
--- /dev/null
+++ b/packages/storybook/stories/squad-page/rail.tsx
@@ -0,0 +1,508 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AiIcon,
+  JobIcon,
+  UserIcon,
+  BellIcon,
+  BookmarkIcon,
+  DevPlusIcon,
+  DiscussIcon,
+  EarthIcon,
+  EyeIcon,
+  HashtagIcon,
+  JoystickIcon,
+  MegaphoneIcon,
+  PlusIcon,
+  SourceIcon,
+  CompassIcon,
+  GiftIcon,
+  HelpIcon,
+  HomeIcon,
+  MenuIcon,
+  NewPostIcon,
+  SearchIcon,
+  SettingsIcon,
+  SquadIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import {
+  RAIL_ICON_SIZE,
+  railColumnGapClass,
+  railCountBubbleClass,
+  railDividerBgClass,
+  railGlyphBoxClass,
+  railTabClass,
+  railTabLabelClass,
+} from '@dailydotdev/shared/src/components/sidebar/common';
+import { StreakBadge } from '@dailydotdev/shared/src/components/sidebar/StreakBadge';
+import { Bubble } from '@dailydotdev/shared/src/components/tooltips/utils';
+import LogoIcon from '@dailydotdev/shared/src/svg/LogoIcon';
+import { MedalIcon } from '@dailydotdev/shared/src/components/icons/Medal';
+import { BookmarkReminderIcon } from '@dailydotdev/shared/src/components/icons/Bookmark/Reminder';
+import { SidebarArrowRight } from '@dailydotdev/shared/src/components/icons/Sidebar/SidebarArrowRight';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { cloudinarySquadsImageFallback } from '@dailydotdev/shared/src/lib/image';
+import { squad, team } from './data';
+
+// The v2 rail as production renders it on a squad page, collapsed: logo,
+// Home and Search, the tabs with Squads selected, the shortcuts dock with
+// this squad pinned, and Invite / Support / Settings at the bottom. Built
+// from the rail's own class constants in shared so it cannot drift.
+
+export const railBackgroundClass =
+  'bg-[color-mix(in_srgb,var(--theme-surface-secondary)_3%,var(--theme-background-default))]';
+
+const railButtonClass =
+  'focus-outline flex size-10 items-center justify-center rounded-12 text-text-tertiary transition-[background-color,color,transform] duration-150 ease-out hover:bg-surface-hover hover:text-text-primary active:scale-90 motion-reduce:transition-none';
+
+const Divider = ({ className }: { className?: string }): ReactElement => (
+  <div
+    aria-hidden
+    className={classNames('h-px w-6', railDividerBgClass, className)}
+  />
+);
+
+const Tab = ({
+  label,
+  icon,
+  selected = false,
+  className,
+}: {
+  label: string;
+  icon: ReactNode;
+  selected?: boolean;
+  className?: string;
+}): ReactElement => (
+  <button
+    type="button"
+    role="tab"
+    aria-selected={selected}
+    title={label}
+    className={classNames(
+      railTabClass,
+      selected && 'bg-background-default !text-text-primary',
+      className,
+    )}
+  >
+    <span className="relative flex items-center justify-center">{icon}</span>
+    <span className={railTabLabelClass}>{label}</span>
+  </button>
+);
+
+export const ProductionRail = ({
+  loggedIn = true,
+}: {
+  loggedIn?: boolean;
+}): ReactElement => (
+  <nav
+    aria-label="Primary navigation"
+    className={classNames(
+      'group/rail flex w-20 shrink-0 flex-col items-center px-1.5 pb-3 pt-[0.8125rem]',
+      railColumnGapClass,
+      railBackgroundClass,
+    )}
+  >
+    <div className="mt-2.5">
+      <a
+        href="/"
+        aria-label="daily.dev"
+        title="daily.dev"
+        className="focus-outline flex size-10 items-center justify-center rounded-12 text-text-primary transition-[background-color,transform] duration-150 ease-out hover:bg-surface-hover active:scale-90"
+      >
+        <span className={railGlyphBoxClass}>
+          <LogoIcon className={{ container: 'h-[1.125rem] w-auto' }} />
+        </span>
+      </a>
+    </div>
+    <a href="/" aria-label="Home" title="Home" className={railButtonClass}>
+      <span className={railGlyphBoxClass}>
+        <HomeIcon size={RAIL_ICON_SIZE} aria-hidden />
+      </span>
+    </a>
+    <button
+      type="button"
+      aria-label="Search"
+      title="Search ⌘K"
+      className={railButtonClass}
+    >
+      <SearchIcon size={RAIL_ICON_SIZE} aria-hidden />
+    </button>
+
+    <Divider className="my-1" />
+
+    <div
+      className={classNames(
+        'flex min-h-0 w-full flex-1 flex-col items-center',
+        railColumnGapClass,
+      )}
+    >
+      <div
+        role="tablist"
+        aria-label="Sidebar categories"
+        className={classNames(
+          'flex w-full flex-col items-center',
+          railColumnGapClass,
+        )}
+      >
+        <Tab
+          label="Explore"
+          icon={
+            <CompassIcon
+              size={RAIL_ICON_SIZE}
+              aria-hidden
+              className="scale-105"
+            />
+          }
+        />
+        <Tab
+          label="Squads"
+          selected
+          icon={<SquadIcon secondary size={RAIL_ICON_SIZE} aria-hidden />}
+        />
+        {loggedIn && (
+          <>
+            <Tab
+              label="Activity"
+              icon={
+                <>
+                  <BellIcon size={RAIL_ICON_SIZE} aria-hidden />
+                  <Bubble className={railCountBubbleClass}>3</Bubble>
+                </>
+              }
+            />
+            <Tab
+              label="12"
+              className="group/streaktab"
+              icon={<StreakBadge state="safe" hasReadToday />}
+            />
+            <Tab
+              label="You"
+              icon={
+                <span className={railGlyphBoxClass}>
+                  <img
+                    src={team[2].image}
+                    alt=""
+                    className="size-5 !rounded-8 object-cover"
+                  />
+                </span>
+              }
+            />
+            <div className="flex justify-center">
+              <Button
+                type="button"
+                variant={ButtonVariant.Primary}
+                size={ButtonSize.Small}
+                icon={<NewPostIcon />}
+                aria-label="New post"
+                title="New post"
+                className="my-2 !size-9 !rounded-12 [&_svg]:!size-6"
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      {loggedIn && (
+        <>
+          <Divider className="mb-2" />
+          <div className="flex w-full flex-col items-center gap-1 p-0.5">
+            <button
+              type="button"
+              aria-label="Customize shortcuts"
+              title="Customize shortcuts"
+              className={railButtonClass}
+            >
+              <MenuIcon
+                size={RAIL_ICON_SIZE}
+                aria-hidden
+                className="rotate-90"
+              />
+            </button>
+            <a
+              href="#"
+              aria-label={squad.name}
+              title={squad.name}
+              className={classNames(railButtonClass, '!text-text-primary')}
+            >
+              <img
+                src={squad.image}
+                alt=""
+                className="size-6 rounded-full object-cover"
+              />
+            </a>
+            <a
+              href="#"
+              aria-label="Bookmarks"
+              title="Bookmarks"
+              className={railButtonClass}
+            >
+              <BookmarkIcon size={RAIL_ICON_SIZE} aria-hidden />
+            </a>
+          </div>
+        </>
+      )}
+    </div>
+
+    <div
+      aria-label="Sidebar utilities"
+      className={classNames(
+        'flex w-full flex-col items-center',
+        railColumnGapClass,
+      )}
+    >
+      {loggedIn && <Divider className="my-1" />}
+      <a
+        href="#"
+        aria-label="Invite friends"
+        title="Invite friends"
+        className={railButtonClass}
+      >
+        <GiftIcon size={RAIL_ICON_SIZE} aria-hidden />
+      </a>
+      <button
+        type="button"
+        aria-label="Support"
+        title="Support"
+        className={railButtonClass}
+      >
+        <HelpIcon size={RAIL_ICON_SIZE} aria-hidden />
+      </button>
+      {loggedIn && (
+        <button
+          type="button"
+          aria-label="Settings"
+          title="Settings"
+          className={railButtonClass}
+        >
+          <SettingsIcon size={RAIL_ICON_SIZE} aria-hidden />
+        </button>
+      )}
+    </div>
+  </nav>
+);
+
+/* ------------------------------------------------------------ classic */
+
+// The production sidebar outside layout v2 (SidebarDesktop), collapsed to
+// its icon column: the expand toggle, New post, then each section's items
+// with a hairline where a titled section starts. Same classes as the
+// shared NavItem / ItemInner, so hover and active read as they do live.
+
+interface ClassicItem {
+  label: string;
+  icon: ReactNode;
+  active?: boolean;
+  plus?: boolean;
+}
+
+const listIcon = (Icon: typeof HomeIcon, active = false): ReactNode => (
+  <Icon secondary={active} className="pointer-events-none h-5 w-5" />
+);
+
+const squadIcon = (src: string): ReactNode => (
+  <img src={src} alt="" className="size-5 rounded-full object-cover" />
+);
+
+const ClassicRow = ({ item }: { item: ClassicItem }): ReactElement => (
+  <li
+    className={classNames(
+      'relative mx-1 flex items-center justify-center rounded-10 transition-colors duration-150 typo-callout',
+      item.plus &&
+        'bg-action-plus-float/50 text-action-plus-default hover:bg-action-plus-float',
+      !item.plus && item.active && 'bg-surface-hover text-text-primary',
+      !item.plus &&
+        !item.active &&
+        'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
+    )}
+  >
+    <a
+      href="#"
+      aria-label={item.label}
+      title={item.label}
+      className="flex h-9 flex-1 items-center justify-center overflow-hidden"
+    >
+      <span className="relative flex h-9 w-9 items-center justify-center">
+        {item.icon}
+      </span>
+    </a>
+  </li>
+);
+
+const ClassicSection = ({
+  items,
+  titled = true,
+}: {
+  items: ClassicItem[];
+  titled?: boolean;
+}): ReactElement => (
+  <ul className="mt-1 flex flex-col">
+    {titled && (
+      <li aria-hidden className="flex h-9 items-center px-2">
+        <hr className="w-full border-t border-border-subtlest-tertiary" />
+      </li>
+    )}
+    {items.map((item) => (
+      <ClassicRow key={item.label} item={item} />
+    ))}
+  </ul>
+);
+
+export const ClassicSidebar = ({
+  loggedIn = true,
+}: {
+  loggedIn?: boolean;
+}): ReactElement => (
+  <aside className="no-scrollbar flex w-11 shrink-0 flex-col overflow-y-auto border-r border-border-subtlest-tertiary bg-background-default pb-3 pt-1">
+    <div className="flex h-9 items-center justify-center px-1">
+      <Button
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.XSmall}
+        className="text-text-tertiary hover:text-text-primary"
+        icon={<SidebarArrowRight size={IconSize.Size16} />}
+        aria-label="Open sidebar"
+        title="Expand sidebar"
+      />
+    </div>
+    <div className="mb-2 flex items-center justify-center px-1">
+      <Button
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Small}
+        icon={<PlusIcon />}
+        aria-label="New post"
+        title="New Post"
+      />
+    </div>
+    <ClassicSection
+      titled={false}
+      items={[
+        loggedIn
+          ? {
+              label: 'For You',
+              icon: (
+                <img
+                  src={team[2].image}
+                  alt=""
+                  className="size-5 rounded-6 object-cover"
+                />
+              ),
+            }
+          : { label: 'Home', icon: listIcon(HomeIcon) },
+        { label: 'Following', icon: listIcon(SquadIcon) },
+        { label: 'History', icon: listIcon(EyeIcon) },
+        { label: 'Happening Now', icon: listIcon(MegaphoneIcon) },
+        ...(loggedIn
+          ? [{ label: 'Game Center', icon: listIcon(JoystickIcon) }]
+          : []),
+        { label: 'Get Plus', icon: listIcon(DevPlusIcon), plus: true },
+      ]}
+    />
+    {loggedIn && (
+      <ClassicSection
+        items={[{ label: 'Frontend', icon: listIcon(HashtagIcon) }]}
+      />
+    )}
+    <ClassicSection
+      items={[
+        ...(loggedIn
+          ? [
+              {
+                label: squad.name,
+                icon: squadIcon(squad.image),
+                active: true,
+              },
+              {
+                label: 'Rustaceans',
+                icon: squadIcon(cloudinarySquadsImageFallback),
+              },
+            ]
+          : []),
+        { label: 'Find Squads', icon: listIcon(SourceIcon) },
+      ]}
+    />
+    <ClassicSection
+      items={[
+        { label: 'Quick saves', icon: listIcon(BookmarkIcon) },
+        { label: 'Read it later', icon: listIcon(BookmarkReminderIcon) },
+      ]}
+    />
+    <ClassicSection
+      items={[
+        { label: 'Explore', icon: listIcon(CompassIcon) },
+        { label: 'Tags', icon: listIcon(HashtagIcon) },
+        { label: 'Sources', icon: listIcon(EarthIcon) },
+        { label: 'Leaderboard', icon: listIcon(MedalIcon) },
+        { label: 'Discussions', icon: listIcon(DiscussIcon) },
+      ]}
+    />
+  </aside>
+);
+
+/* ------------------------------------------------------ tablet, phone */
+
+// Production's chrome below laptop: SidebarTablet (a 64px column of
+// labelled icons) from 656px, MobileFooterNavbar (a floating tab bar)
+// under it. Squads is the active destination on a squad page.
+
+const smallNav = [
+  { label: 'Home', icon: HomeIcon },
+  { label: 'Explore', icon: AiIcon },
+  { label: 'Headlines', icon: MegaphoneIcon },
+  { label: 'Activity', icon: BellIcon },
+  { label: 'Squads', icon: SourceIcon, active: true },
+];
+
+export const TabletSidebar = (): ReactElement => (
+  <aside className="flex w-16 shrink-0 flex-col items-center gap-4 border-r border-border-subtlest-tertiary bg-background-default">
+    <a href="/" aria-label="daily.dev" className="flex h-10 items-end pt-4">
+      <LogoIcon className={{ container: 'h-5 w-auto' }} />
+    </a>
+    {[
+      ...smallNav,
+      { label: 'Jobs', icon: JobIcon },
+      { label: 'Profile', icon: UserIcon },
+    ].map(({ label, icon: Icon, active }) => (
+      <a
+        key={label}
+        href="#"
+        className={classNames(
+          'flex w-full flex-col items-center gap-1 typo-caption1',
+          active
+            ? 'text-text-primary'
+            : 'text-text-tertiary hover:text-text-primary',
+        )}
+      >
+        <Icon secondary={active} size={IconSize.Medium} />
+        {label}
+      </a>
+    ))}
+  </aside>
+);
+
+export const MobileFooterNav = (): ReactElement => (
+  <div className="w-full shrink-0 px-2 pb-2">
+    <nav className="grid auto-cols-fr grid-flow-col items-center rounded-16 border-t border-border-subtlest-tertiary bg-background-subtle shadow-2">
+      {smallNav.map(({ label, icon: Icon, active }) => (
+        <a
+          key={label}
+          href="#"
+          className={classNames(
+            'relative flex flex-col items-center justify-center py-2',
+            active ? 'text-text-primary' : 'text-text-tertiary',
+          )}
+        >
+          {active && (
+            <span className="absolute -top-0.5 h-0.5 w-6 rounded-[999px] bg-text-primary" />
+          )}
+          <Icon secondary={active} size={IconSize.Medium} />
+          <span className="typo-caption2">{label}</span>
+        </a>
+      ))}
+    </nav>
+  </div>
+);
diff --git a/packages/storybook/stories/squad-page/squadSpotlight.tsx b/packages/storybook/stories/squad-page/squadSpotlight.tsx
new file mode 100644
index 00000000000..20ff27a2588
--- /dev/null
+++ b/packages/storybook/stories/squad-page/squadSpotlight.tsx
@@ -0,0 +1,351 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  ClearIcon,
+  SearchIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+  scopeMeta,
+  scopeOrder,
+} from '@dailydotdev/shared/src/components/spotlight/types';
+import { scopeIcons } from '@dailydotdev/shared/src/components/spotlight/ScopeBreadcrumbs';
+import type { Entry } from './data';
+import { feedEntries, formatDay, pinnedEntry, squad } from './data';
+
+// Production's Spotlight, opened from a Squad page with the Squad already
+// in the field as a filter pill, the way the palette narrows to Posts or
+// Tags. Results are the Squad's posts (SEARCH_SOURCE_POSTS_QUERY, the query
+// the Squad page's own search uses). Backspace on an empty field, or a
+// click on the pill, widens it back to all of daily.dev.
+
+const searchable = [pinnedEntry, ...feedEntries];
+
+export const matchSquadPosts = (query: string): Entry[] => {
+  const needle = query.trim().toLowerCase();
+  return searchable.filter((entry) =>
+    [entry.title, entry.summary, ...entry.tags]
+      .join(' ')
+      .toLowerCase()
+      .includes(needle),
+  );
+};
+
+const rowClass =
+  'mx-2 flex h-12 min-w-0 cursor-pointer items-center gap-3 overflow-hidden rounded-10 px-3 text-left hover:bg-surface-hover tablet:h-10';
+
+const Group = ({
+  heading,
+  children,
+}: {
+  heading: string;
+  children: ReactNode;
+}): ReactElement => (
+  <div role="group" aria-label={heading} className="flex flex-col">
+    <span className="pb-1.5 pl-4 pr-3 pt-3 text-[0.6875rem] font-medium text-text-quaternary">
+      {heading}
+    </span>
+    {children}
+  </div>
+);
+
+const SquadAvatar = ({ size = 'size-6' }: { size?: string }): ReactElement => (
+  <img
+    src={squad.image}
+    alt=""
+    className={classNames('shrink-0 rounded-full object-cover', size)}
+  />
+);
+
+const PostRow = ({
+  entry,
+  active,
+  showSquad,
+}: {
+  entry: Entry;
+  active?: boolean;
+  showSquad?: boolean;
+}): ReactElement => (
+  <button
+    type="button"
+    className={classNames(rowClass, active && 'bg-surface-hover')}
+  >
+    {showSquad ? (
+      <SquadAvatar />
+    ) : (
+      <img
+        src={entry.image ?? squad.image}
+        alt=""
+        className="size-6 shrink-0 rounded-6 object-cover"
+      />
+    )}
+    <span className="flex min-w-0 flex-1 items-center gap-2">
+      <span className="min-w-0 truncate text-text-primary typo-callout">
+        {entry.title}
+      </span>
+      <span className="hidden min-w-0 shrink truncate text-text-tertiary typo-footnote tablet:inline">
+        {showSquad ? squad.name : entry.author.name} ·{' '}
+        {formatDay(entry.createdAt)}
+      </span>
+    </span>
+  </button>
+);
+
+const SeeAllRow = ({
+  label,
+  onSelect,
+  leading,
+}: {
+  label: string;
+  onSelect: () => void;
+  leading?: ReactNode;
+}): ReactElement => (
+  <button type="button" onClick={onSelect} className={rowClass}>
+    {leading ?? (
+      <span className="flex size-6 shrink-0 items-center justify-center rounded-6 text-text-tertiary">
+        <SearchIcon size={IconSize.XSmall} />
+      </span>
+    )}
+    <span className="min-w-0 flex-1 truncate text-text-tertiary typo-callout">
+      {label}
+    </span>
+    <kbd className="hidden text-text-quaternary typo-caption1 tablet:inline">
+      ↵
+    </kbd>
+  </button>
+);
+
+const Hint = ({ label, combo }: { label: string; combo: string }) => (
+  <span className="flex items-center gap-1.5">
+    <kbd aria-hidden className="font-mono text-text-quaternary typo-caption1">
+      {combo}
+    </kbd>
+    <span>{label}</span>
+  </span>
+);
+
+export const SquadSpotlight = ({
+  initialQuery = '',
+  onClose,
+  onSeeAll,
+}: {
+  initialQuery?: string;
+  onClose: () => void;
+  /** Enter, or See all: the Squad page shows every match in its feed. */
+  onSeeAll: (query: string) => void;
+}): ReactElement => {
+  const [query, setQuery] = useState(initialQuery);
+  const [scoped, setScoped] = useState(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const trimmed = query.trim();
+  const matches = trimmed ? matchSquadPosts(trimmed) : [];
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [scoped]);
+
+  const seeAll = () => {
+    if (trimmed) {
+      onSeeAll(trimmed);
+    }
+  };
+
+  let list: ReactNode;
+  if (scoped && !trimmed) {
+    list = (
+      <>
+        <Group heading={`Pinned in ${squad.name}`}>
+          <PostRow entry={pinnedEntry} active />
+        </Group>
+        <Group heading={`Latest in ${squad.name}`}>
+          {feedEntries.slice(0, 4).map((entry) => (
+            <PostRow key={entry.id} entry={entry} />
+          ))}
+        </Group>
+      </>
+    );
+  } else if (scoped && !matches.length) {
+    list = (
+      <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
+        <SearchIcon size={IconSize.Large} className="text-text-tertiary" />
+        <p className="text-text-primary typo-callout">
+          No posts in {squad.name} match “{trimmed}”
+        </p>
+        <Button
+          variant={ButtonVariant.Subtle}
+          size={ButtonSize.Small}
+          onClick={() => setScoped(false)}
+        >
+          Search all of daily.dev
+        </Button>
+      </div>
+    );
+  } else if (scoped) {
+    list = (
+      <Group heading={`Posts in ${squad.name}`}>
+        {matches.slice(0, 6).map((entry, index) => (
+          <PostRow key={entry.id} entry={entry} active={index === 0} />
+        ))}
+        <SeeAllRow
+          label={`See all ${matches.length} results in ${squad.name}`}
+          onSelect={seeAll}
+        />
+      </Group>
+    );
+  } else {
+    list = (
+      <>
+        <Group heading="This Squad">
+          <SeeAllRow
+            label={
+              trimmed
+                ? `Search “${trimmed}” in ${squad.name}`
+                : `Search in ${squad.name}`
+            }
+            leading={<SquadAvatar />}
+            onSelect={() => setScoped(true)}
+          />
+        </Group>
+        {trimmed && (
+          <Group heading="Posts">
+            {matches.slice(0, 4).map((entry) => (
+              <PostRow key={entry.id} entry={entry} showSquad />
+            ))}
+            <SeeAllRow
+              label={`Search posts for “${trimmed}”`}
+              onSelect={() => undefined}
+            />
+          </Group>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <div
+      role="presentation"
+      onClick={onClose}
+      className="fixed inset-0 z-modal flex items-end justify-center bg-overlay-quaternary-onion tablet:items-start tablet:pt-[15vh]"
+    >
+      <div
+        role="dialog"
+        aria-label={`Search ${squad.name}`}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            onClose();
+          }
+        }}
+        className="flex h-[90vh] w-full flex-col overflow-hidden rounded-t-16 border border-border-subtlest-tertiary bg-background-default shadow-3 tablet:h-auto tablet:w-[40rem] tablet:max-w-[calc(100vw-2rem)] tablet:rounded-16"
+      >
+        <div className="flex h-14 shrink-0 items-center gap-3 border-b border-border-subtlest-tertiary px-4">
+          <SearchIcon
+            size={IconSize.Small}
+            className="shrink-0 text-text-tertiary"
+            aria-hidden
+          />
+          {scoped && (
+            <button
+              type="button"
+              onClick={() => setScoped(false)}
+              aria-label={`Searching in ${squad.name}. Click or press Backspace to search all of daily.dev.`}
+              title="Press Backspace to remove filter"
+              className="flex h-7 shrink-0 items-center gap-1.5 rounded-8 bg-background-subtle px-2 text-text-primary typo-callout transition-colors hover:bg-surface-hover"
+            >
+              <SquadAvatar size="size-4" />
+              <span className="font-medium">{squad.name}</span>
+            </button>
+          )}
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Backspace' && !query && scoped) {
+                event.preventDefault();
+                setScoped(false);
+              }
+              if (event.key === 'Enter' && scoped) {
+                seeAll();
+              }
+            }}
+            placeholder={
+              scoped
+                ? `Search ${squad.name} posts…`
+                : 'Search posts, squads, people, tags, or actions…'
+            }
+            aria-label={scoped ? `Search ${squad.name} posts` : 'Search'}
+            className="h-full min-w-0 flex-1 bg-transparent text-text-primary outline-none typo-body placeholder:text-text-tertiary"
+          />
+          {query && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={() => {
+                setQuery('');
+                inputRef.current?.focus();
+              }}
+              className="text-text-tertiary transition-colors hover:text-text-primary"
+            >
+              <ClearIcon size={IconSize.XSmall} />
+            </button>
+          )}
+          <span className="flex tablet:hidden">
+            <Button
+              variant={ButtonVariant.Subtle}
+              size={ButtonSize.Small}
+              onClick={onClose}
+            >
+              Close
+            </Button>
+          </span>
+        </div>
+        {!scoped && (
+          <div
+            role="navigation"
+            aria-label="Filter results by type"
+            className="flex shrink-0 items-center gap-2 overflow-x-auto px-4 pb-2 pt-3"
+          >
+            <button
+              type="button"
+              onClick={() => setScoped(true)}
+              className="flex h-8 shrink-0 items-center gap-1.5 rounded-10 border border-border-subtlest-tertiary bg-surface-float px-3 text-text-tertiary typo-callout transition-colors hover:bg-surface-hover hover:text-text-primary"
+            >
+              <SquadAvatar size="size-4" />
+              <span>{squad.name}</span>
+            </button>
+            {scopeOrder.map((scope) => {
+              const Icon = scopeIcons[scope];
+              return (
+                <span
+                  key={scope}
+                  className="flex h-8 shrink-0 items-center gap-1.5 rounded-10 border border-border-subtlest-tertiary bg-surface-float px-3 text-text-tertiary typo-callout"
+                >
+                  <Icon size={IconSize.XSmall} aria-hidden />
+                  {scopeMeta[scope].label}
+                </span>
+              );
+            })}
+          </div>
+        )}
+        <div className="min-h-0 flex-1 overflow-y-auto pb-1 tablet:max-h-[min(40rem,60vh)]">
+          {list}
+        </div>
+        <div className="hidden h-8 shrink-0 items-center justify-between border-t border-border-subtlest-tertiary bg-background-subtle px-4 text-text-quaternary typo-caption2 tablet:flex">
+          <span className="flex items-center gap-4">
+            <Hint label="Open" combo="↵" />
+            <Hint label="Close" combo="esc" />
+            {scoped && <Hint label="All of daily.dev" combo="⌫" />}
+          </span>
+          <Hint label="Search" combo="⌘K" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/storybook/stories/squad-page/state.ts b/packages/storybook/stories/squad-page/state.ts
new file mode 100644
index 00000000000..c7c8096cd3e
--- /dev/null
+++ b/packages/storybook/stories/squad-page/state.ts
@@ -0,0 +1,135 @@
+import { createContext, useContext } from 'react';
+import { isJoined, isStaff, Viewer } from './kit';
+
+// The squad's state, shared by the workspace shell and the Home page so
+// neither has to import the other.
+
+/**
+ * How posts get in. A regular squad is written by hand. A verified company
+ * page is fed: the company's RSS (releases, blog, changelog) lands in
+ * Releases as posts, daily.dev runs the feed for them, and members still
+ * write in Discussions and vote in Polls. Same squad underneath.
+ */
+export enum ContentSource {
+  Manual = 'manual',
+  Feed = 'feed',
+}
+
+/**
+ * Production's posting gate, one radio in Squad settings: anyone can post,
+ * every member post is reviewed, or only members above a reputation
+ * threshold may post (no review). Moderators and admins bypass all three.
+ */
+export enum PostingGate {
+  None = 'none',
+  Moderation = 'moderation',
+  Reputation = 'reputation',
+}
+
+/** Who may do a thing: every member, or only moderators and admins. */
+export enum MemberRole {
+  Member = 'member',
+  Moderator = 'moderator',
+}
+
+/**
+ * The squad's own settings as production stores them, plus the bits of
+ * per-member state the page reads. Every case in the use-case stories is a
+ * combination of these and the viewer.
+ */
+export interface SquadConfig {
+  /** Public squads are joinable and listed; private ones are invite-only. */
+  isPublic: boolean;
+  /** Set by daily.dev, shown as a badge, listed under Featured. */
+  featured: boolean;
+  /** Public squads only. Links to the directory. */
+  category?: string;
+  memberPostingRole: MemberRole;
+  postingGate: PostingGate;
+  postingMinReputation: number;
+  memberInviteRole: MemberRole;
+  /** A boost campaign is running. */
+  campaign: boolean;
+  /** Slack integration connected. */
+  slack: boolean;
+  /** The viewer's reputation, for the reputation gate. */
+  viewerReputation: number;
+  /** The member chose to collapse pinned posts. */
+  pinnedCollapsed: boolean;
+  /** Posts by the viewer waiting in the queue, or rejected. */
+  ownPending: number;
+}
+
+export const defaultConfig: SquadConfig = {
+  isPublic: true,
+  featured: false,
+  category: 'Developer tools',
+  memberPostingRole: MemberRole.Member,
+  postingGate: PostingGate.Moderation,
+  postingMinReputation: 250,
+  memberInviteRole: MemberRole.Member,
+  campaign: false,
+  slack: false,
+  viewerReputation: 1200,
+  pinnedCollapsed: false,
+  ownPending: 0,
+};
+
+export interface WorkspaceState {
+  viewer: Viewer;
+  source: ContentSource;
+  /** No posts yet. */
+  empty: boolean;
+  /** Members only; everyone else sees the wall. */
+  isPrivate: boolean;
+  config: SquadConfig;
+}
+
+export const WorkspaceContext = createContext<WorkspaceState>({
+  viewer: Viewer.Member,
+  source: ContentSource.Feed,
+  empty: false,
+  isPrivate: false,
+  config: defaultConfig,
+});
+
+/**
+ * Production's getPostingDisabledText and the Blocked role, as one answer:
+ * may this viewer post here, and if not, what does the lock card say.
+ * Moderators and admins always may.
+ */
+export const postingState = (
+  viewer: Viewer,
+  config: SquadConfig,
+): { canPost: boolean; reason?: string; reviewed?: boolean } => {
+  if (isStaff(viewer)) {
+    return { canPost: true };
+  }
+  if (viewer === Viewer.Blocked) {
+    return {
+      canPost: false,
+      reason: 'You no longer have access to this Squad.',
+    };
+  }
+  if (!isJoined(viewer)) {
+    return { canPost: false, reason: 'Join the Squad to create new posts' };
+  }
+  if (config.memberPostingRole === MemberRole.Moderator) {
+    return { canPost: false, reason: 'Only admins and moderators can post' };
+  }
+  if (
+    config.postingGate === PostingGate.Reputation &&
+    config.viewerReputation < config.postingMinReputation
+  ) {
+    return {
+      canPost: false,
+      reason: `You need ${config.postingMinReputation} reputation points to post`,
+    };
+  }
+  return {
+    canPost: true,
+    reviewed: config.postingGate === PostingGate.Moderation,
+  };
+};
+
+export const useWorkspace = (): WorkspaceState => useContext(WorkspaceContext);
diff --git a/packages/storybook/stories/squad-page/use-cases/Breakpoints.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Breakpoints.stories.tsx
new file mode 100644
index 00000000000..6b26680466a
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Breakpoints.stories.tsx
@@ -0,0 +1,65 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Viewer } from '../kit';
+import { DirectionShell } from '../direction';
+import { Page, ViewportFrame } from './shared';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Breakpoints',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// The direction at the app's breakpoints (tablet 656px, laptop 1020px,
+// laptopL 1360px). Each device is a frame of its real width, so
+// Tailwind's breakpoints apply as they would live.
+
+const devices = [
+  { label: 'Phone, 375px', width: 375, height: 812, scale: 1 },
+  { label: 'Tablet, 768px', width: 768, height: 1024, scale: 0.7 },
+  { label: 'Laptop, 1280px', width: 1280, height: 800, scale: 0.55 },
+  { label: 'Desktop, 1600px', width: 1600, height: 1000, scale: 0.44 },
+];
+
+const Row = ({
+  title,
+  viewer,
+}: {
+  title: string;
+  viewer: Viewer;
+}): ReactElement => (
+  <section className="flex flex-col gap-4">
+    <h2 className="font-bold typo-title3">{title}</h2>
+    <div className="flex flex-wrap items-start gap-6">
+      {devices.map((device) => (
+        <ViewportFrame key={device.label} {...device}>
+          <DirectionShell viewer={viewer} fluid />
+        </ViewportFrame>
+      ))}
+    </div>
+  </section>
+);
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Breakpoints"
+      title="One page, four widths"
+      intro={
+        <p>
+          The frame follows the profile page. From laptop the page card sits
+          beside the 320px right column under the classic sidebar; below it, one
+          full-bleed column with Posts and About tabs above the feed (About
+          holds the right column), the tablet sidebar from 656px and the
+          floating tab bar on phones. Every frame is live: scroll it, open
+          About, open a page.
+        </p>
+      }
+    >
+      <Row title="Home, as a member" viewer={Viewer.Member} />
+      <Row title="Home, as an admin" viewer={Viewer.Admin} />
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Content.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Content.stories.tsx
new file mode 100644
index 00000000000..43c6dacafbc
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Content.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Case, Page } from './shared';
+import { contentCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Content source',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// The package. A verified squad page is technically a squad; what the
+// customer buys is the feed that fills it, the badge that marks it, and
+// the daily.dev manager who runs it for them.
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Content source"
+      title="A Squad, fed"
+      intro={
+        <>
+          <p>
+            Every verified Squad page is a Squad underneath: the same members,
+            roles, channels, moderation, rules and pages. The difference is how
+            the team&apos;s posts arrive. On a plain Squad someone writes them.
+            On a verified page the company&apos;s RSS (changelog, blog,
+            releases) is imported into the feed as posts, on a schedule, by
+            daily.dev, and the company keeps the keys to edit, pause or add.
+          </p>
+          <p>
+            The Content feed page is the admin&apos;s window into that
+            arrangement. It exists only when a feed is connected; a plain Squad
+            never sees it.
+          </p>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        {contentCases.map((useCase) => (
+          <Case key={useCase.id} useCase={useCase} />
+        ))}
+      </div>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Manage.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Manage.stories.tsx
new file mode 100644
index 00000000000..ca1c89041dc
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Manage.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Case, Page } from './shared';
+import { manageCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Manage',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Manage"
+      title="Editing the page, like editing a profile"
+      intro={
+        <p>
+          Edit profile opens a settings area with its own menu; Edit page does
+          the same for the Squad. Everything the team runs lives there, grouped
+          the way profile settings groups its pages, and each page carries one
+          action in its header. The options menu&apos;s Manage items open the
+          same area on their section.
+        </p>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        {manageCases.map((useCase) => (
+          <Case key={useCase.id} useCase={useCase} />
+        ))}
+      </div>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Overview.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Overview.stories.tsx
new file mode 100644
index 00000000000..8d3f9973537
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Overview.stories.tsx
@@ -0,0 +1,418 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import classNames from 'classnames';
+import { Viewer } from '../kit';
+import { ContentSource } from '../workspace';
+import { Page, viewerLabel } from './shared';
+import {
+  contentCases,
+  manageCases,
+  postingCases,
+  productionCases,
+  stateCases,
+  viewerCases,
+} from './cases';
+import { coverage } from './Production.stories';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Overview',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+const Table = ({
+  head,
+  rows,
+}: {
+  head: string[];
+  rows: ReactNode[][];
+}): ReactElement => (
+  <div className="overflow-x-auto rounded-16 border border-border-subtlest-tertiary">
+    <table className="w-full min-w-[60rem] border-collapse text-left">
+      <thead>
+        <tr className="bg-surface-float">
+          {head.map((cell) => (
+            <th
+              key={cell}
+              className="px-4 py-3 font-bold text-text-secondary typo-caption1"
+            >
+              {cell}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr
+            // eslint-disable-next-line react/no-array-index-key
+            key={rowIndex}
+            className="border-t border-border-subtlest-tertiary align-top"
+          >
+            {row.map((cell, cellIndex) => (
+              <td
+                // eslint-disable-next-line react/no-array-index-key
+                key={cellIndex}
+                className={classNames(
+                  'px-4 py-3 typo-footnote',
+                  cellIndex === 0
+                    ? 'whitespace-nowrap font-bold text-text-primary'
+                    : 'text-text-tertiary',
+                )}
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+const yes = <span className="text-status-success">Yes</span>;
+const no = <span className="text-text-quaternary">No</span>;
+const viewers = [
+  Viewer.Anonymous,
+  Viewer.Visitor,
+  Viewer.Member,
+  Viewer.Moderator,
+  Viewer.Admin,
+  Viewer.Blocked,
+];
+
+const can = (predicate: (viewer: Viewer) => boolean): ReactNode[] =>
+  viewers.map((viewer) => (predicate(viewer) ? yes : no));
+
+const joined = (viewer: Viewer): boolean =>
+  viewer === Viewer.Member ||
+  viewer === Viewer.Moderator ||
+  viewer === Viewer.Admin;
+const staff = (viewer: Viewer): boolean =>
+  viewer === Viewer.Moderator || viewer === Viewer.Admin;
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-4">
+    <h2 className="font-bold typo-title2">{title}</h2>
+    {children}
+  </section>
+);
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Overview"
+      title="Every way the page is used"
+      intro={
+        <>
+          <p>
+            The verified Squad page is a Squad. Same roles, same channels, same
+            moderation, same rules and pages. The package a customer buys is
+            three things on top: the badge that marks the page as verified, the
+            feed that posts their RSS into the Squad without anyone posting by
+            hand, and the daily.dev manager who runs it for them. Everything
+            below is the Squad&apos;s existing model, with those three added.
+          </p>
+          <p>
+            Every case is drawn on the chosen direction (Squad Page, 1.
+            Direction), at desktop width and on a 375px phone. Seven story files
+            cover it: Viewers (who opens the page), Posting (who publishes
+            where), Content source (fed or hand-written), States (empty,
+            private), Manage (the settings area), Breakpoints (every device
+            width), and Production parity (every state the production page has
+            today, audited, with a coverage matrix). The matrices here are the
+            index.
+          </p>
+        </>
+      }
+    >
+      <Section title="Summary: today versus the new design">
+        <p className="max-w-[76ch] text-text-tertiary typo-footnote">
+          Every surface of the production Squad page, audited in Production
+          parity, and what the direction adds. ✓ exists or is supported, ✕ does
+          not, – stays outside the page and is unchanged.
+        </p>
+        <Table
+          head={[
+            'Area',
+            'Surface',
+            'In Squads today',
+            'In the new design',
+            'How',
+          ]}
+          rows={coverage.flatMap((group) =>
+            group.rows.map((row) => [
+              group.group,
+              row.surface,
+              row.production === 'None' ||
+              row.production.startsWith('None ') ? (
+                <span className="text-text-quaternary">✕</span>
+              ) : (
+                <span className="text-status-success">✓</span>
+              ),
+              {
+                Covered: <span className="text-status-success">✓</span>,
+                Added: <span className="text-status-success">✓ New</span>,
+                Changed: <span className="text-status-success">✓ Changed</span>,
+                Elsewhere: <span className="text-text-quaternary">–</span>,
+                Dropped: <span className="text-status-error">✕ Dropped</span>,
+                Neither: (
+                  <span className="text-text-quaternary">
+                    – Not in production, not in the design
+                  </span>
+                ),
+              }[row.status],
+              row.design,
+            ]),
+          )}
+        />
+      </Section>
+
+      <Section title="Permissions">
+        <Table
+          head={['Can they…', ...viewers.map((viewer) => viewerLabel[viewer])]}
+          rows={[
+            ['Read a public Squad', ...can(() => true)],
+            [
+              'See Join Squad',
+              ...can((viewer) => viewer === Viewer.Visitor).map((cell, index) =>
+                index === 5 ? (
+                  <span className="text-text-tertiary">Disabled</span>
+                ) : (
+                  cell
+                ),
+              ),
+            ],
+            ['Read a private Squad', ...can(joined)],
+            ['Post in the Squad', ...can(joined)],
+            ['Vote on polls', ...can(joined)],
+            ['Ask a poll', ...can(staff)],
+            ['Post a release (plain Squad)', ...can(staff)],
+            ['Post (moderators only setting)', ...can(staff)],
+            ['Post (below the reputation gate)', ...can(staff)],
+            [
+              'Post a release (fed page)',
+              ...can(() => false).map((cell, index) =>
+                index === 4 ? (
+                  <span className="text-text-tertiary">
+                    Feed does; admin can edit
+                  </span>
+                ) : (
+                  cell
+                ),
+              ),
+            ],
+            ['Approve or reject posts', ...can(staff)],
+            ['Edit documents', ...can(staff)],
+            [
+              'Edit the page and products',
+              ...can((viewer) => viewer === Viewer.Admin),
+            ],
+            ['View as a visitor, share card', ...can(staff)],
+            [
+              'See the content feed',
+              ...can((viewer) => viewer === Viewer.Admin),
+            ],
+            [
+              'See analytics and settings',
+              ...can((viewer) => viewer === Viewer.Admin),
+            ],
+            ['Invite (members may invite setting)', ...can(joined)],
+            ['Invite (moderators only setting)', ...can(staff)],
+            ['See the notifications bell', ...can(joined)],
+            [
+              'Leave',
+              ...can((viewer) => joined(viewer) && viewer !== Viewer.Admin),
+            ],
+            [
+              'Award the Squad',
+              ...can(
+                (viewer) =>
+                  viewer !== Viewer.Anonymous && viewer !== Viewer.Admin,
+              ),
+            ],
+            ['Boost', ...can((viewer) => viewer === Viewer.Admin)],
+          ]}
+        />
+      </Section>
+
+      <Section title="What changes per viewer">
+        <Table
+          head={['Viewer', 'Header', 'Right column', 'Manage']}
+          rows={viewerCases.map((useCase) => [
+            useCase.title,
+            useCase.viewer === Viewer.Anonymous
+              ? 'Share, search, more, Join Squad (opens sign up)'
+              : useCase.viewer === Viewer.Visitor
+              ? 'Share, search, more, Join Squad'
+              : useCase.viewer === Viewer.Blocked
+              ? 'Share, search, more, Join Squad disabled'
+              : useCase.viewer === Viewer.Admin
+              ? 'Edit page as a pen icon, bell, Share, search, more (with Manage), Boost last as the Primary button; on phones Boost sits beside Share page under the stats'
+              : useCase.viewer === Viewer.Moderator
+              ? 'Bell, Share, search, more (with Manage), Joined'
+              : 'Bell, Share, search, more, Joined',
+            useCase.viewer === Viewer.Admin
+              ? 'View as a visitor, Verified, share card, Rules, Team, Stack & Tools, Analytics, Links'
+              : useCase.viewer === Viewer.Moderator
+              ? 'View as a visitor, Verified, share card, Rules, Team, Stack & Tools, Links'
+              : 'Verified, Rules, Team, Stack & Tools, Links',
+            useCase.viewer === Viewer.Admin
+              ? 'The Manage area, every section (Edit page opens Details)'
+              : useCase.viewer === Viewer.Moderator
+              ? 'The Manage area: Rules, FAQ, Members, Moderation'
+              : 'None',
+          ])}
+        />
+      </Section>
+
+      <Section title="Breakpoints">
+        <Table
+          head={[
+            '',
+            'Phone, under 656px',
+            'Tablet, 656 to 1019px',
+            'Laptop, 1020px and up',
+          ]}
+          rows={[
+            [
+              'App chrome',
+              'Floating tab bar at the bottom',
+              'The 64px labelled sidebar',
+              'The classic sidebar, collapsed to icons',
+            ],
+            [
+              'Layout',
+              'One full-bleed column, 16px gutters',
+              'One column',
+              'The page card beside the 320px right column',
+            ],
+            [
+              'Header',
+              '80px logo; Join Squad full width under the stats, or Boost and Share page for admins',
+              'Full header, Join Squad (or Boost for admins) last in the row',
+              'Full header, Join Squad (or Boost for admins) last in the row',
+            ],
+            [
+              'Right column',
+              'The About tab',
+              'The About tab',
+              'Beside the page',
+            ],
+            [
+              'Tabs above the feed',
+              'Posts and About tabs',
+              'Posts and About tabs',
+              'None; the right column is beside the page',
+            ],
+            [
+              'Team tools',
+              'View as a visitor and the share card live in the right column, so not on phones; Share in the header',
+              'As on phones',
+              'Top of the right column',
+            ],
+          ]}
+        />
+      </Section>
+
+      <Section title="Fed page vs plain Squad">
+        <Table
+          head={['', 'Verified Squad page (fed)', 'Plain Squad (hand-written)']}
+          rows={[
+            [
+              'Releases',
+              'Imported from the company’s RSS, hourly, by daily.dev',
+              'Written by the team',
+            ],
+            [
+              'Where it is explained',
+              'The Content feed page in Manage',
+              'Nothing to explain',
+            ],
+            [
+              'Manage',
+              'Content feed, Moderation, Analytics, Settings',
+              'Moderation, Analytics, Settings',
+            ],
+            ['Badge', 'Verified Squad page', 'None'],
+            [
+              'Who runs it',
+              'daily.dev, with the company keeping the keys',
+              'The company',
+            ],
+            ['Everything else', 'Identical', 'Identical'],
+          ]}
+        />
+      </Section>
+
+      <Section title="Index of cases">
+        <Table
+          head={['File', 'Case', 'Viewer', 'Page', 'Source', 'State']}
+          rows={[
+            ...viewerCases.map((useCase) => [
+              'Viewers',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              'Home',
+              'Fed',
+              '',
+            ]),
+            ...postingCases.map((useCase) => [
+              'Posting',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              useCase.page ?? 'home',
+              useCase.source === ContentSource.Manual ? 'Hand-written' : 'Fed',
+              '',
+            ]),
+            ...contentCases.map((useCase) => [
+              'Content source',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              useCase.page ?? 'home',
+              useCase.source === ContentSource.Manual ? 'Hand-written' : 'Fed',
+              '',
+            ]),
+            ...stateCases.map((useCase) => [
+              'States',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              useCase.page ?? 'home',
+              useCase.source === ContentSource.Manual ? 'Hand-written' : 'Fed',
+              useCase.isPrivate ? 'Private' : useCase.empty ? 'Empty' : '',
+            ]),
+            ...manageCases.map((useCase) => [
+              'Manage',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              useCase.page ?? 'manage',
+              'Fed',
+              '',
+            ]),
+            ...productionCases.map((useCase) => [
+              'Production parity',
+              useCase.title,
+              viewerLabel[useCase.viewer],
+              useCase.page ?? 'home',
+              'Fed',
+              useCase.isPrivate
+                ? 'Private'
+                : useCase.empty
+                ? 'Empty'
+                : useCase.config
+                ? Object.keys(useCase.config).join(', ')
+                : '',
+            ]),
+          ]}
+        />
+      </Section>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Posting.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Posting.stories.tsx
new file mode 100644
index 00000000000..9f65e8917a3
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Posting.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Case, Page } from './shared';
+import { postingCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Posting',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// Who can publish what, in the one feed. Members post; releases come from
+// the company's RSS on a verified page and from the team on a plain squad;
+// polls are asked by the team and answered by members; what members post
+// can wait for a moderator.
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Posting"
+      title="Who publishes where"
+      intro={
+        <>
+          <p>
+            A verified Squad page is a Squad whose releases are posted from the
+            company&apos;s RSS. Members still post, vote on polls, and wait for
+            a moderator when the Squad asks for review, all in the one feed. The
+            rules are the Squad&apos;s existing rules; only the source of the
+            team&apos;s posts changes.
+          </p>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        {postingCases.map((useCase) => (
+          <Case key={useCase.id} useCase={useCase} />
+        ))}
+      </div>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Production.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Production.stories.tsx
new file mode 100644
index 00000000000..1c91d723b15
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Production.stories.tsx
@@ -0,0 +1,653 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import classNames from 'classnames';
+import { ContentSource } from '../workspace';
+import { Case, Page } from './shared';
+import { productionCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Production parity',
+  parameters: { layout: 'fullscreen' },
+  excludeStories: ['coverage'],
+};
+
+export default meta;
+
+// Every state the production squad page has today, and where it lives in
+// the new design. Audited from packages/webapp/pages/squads/** and
+// packages/shared/src/components/squads/** on 23 Sep 2026. Copy in the
+// cases is production's, word for word, unless a row says it changed.
+
+type Status =
+  | 'Covered'
+  | 'Added'
+  | 'Changed'
+  | 'Elsewhere'
+  | 'Dropped'
+  | 'Neither';
+
+interface Row {
+  surface: string;
+  production: string;
+  design: string;
+  status: Status;
+}
+
+export const coverage: { group: string; rows: Row[] }[] = [
+  {
+    group: 'Landing and access',
+    rows: [
+      {
+        surface: 'Public Squad, anonymous',
+        production:
+          'Full page, no Join (a quirk: the join button waits for a query that never runs logged out)',
+        design:
+          'Full page, Join Squad (opens sign up) last in the header; full width under the stats on a phone',
+        status: 'Changed',
+      },
+      {
+        surface: 'Public Squad, logged in non-member',
+        production: 'Join Squad in the bar, Invitation link in the menu',
+        design:
+          'Join Squad, text only, last in the header row; Invitation link in the menu',
+        status: 'Covered',
+      },
+      {
+        surface: 'Private Squad, non-member',
+        production:
+          'Unauthorized: “Oops! This link leads to a private discussion”',
+        design:
+          'The header, rules and team read; the feed and every page are the same Unauthorized copy',
+        status: 'Changed',
+      },
+      {
+        surface: 'Private Squad, logged out',
+        production: 'ProtectedPage redirect to onboarding',
+        design: 'Same wall with Log in',
+        status: 'Covered',
+      },
+      {
+        surface: 'Blocked member',
+        production:
+          'Join disabled, tooltip “You are not allowed to join the Squad”; still gets the bell and Leave',
+        design:
+          'Join Squad disabled with the copy under it, lock card, no bell, no Leave Squad',
+        status: 'Changed',
+      },
+      {
+        surface: 'Invitation link /[handle]/[token]',
+        production:
+          'Landing with inviter, card, Join Squad, who is waiting; member redirected; blocked toast; invalid toast',
+        design: 'Invite page with the same copy and the three outcomes',
+        status: 'Covered',
+      },
+      {
+        surface: 'Not found or deleted',
+        production: 'Custom404 “Why are you here?”',
+        design: 'Not found page, same copy, plus Find Squads',
+        status: 'Covered',
+      },
+      {
+        surface: 'Loading skeleton',
+        production: 'SquadLoading',
+        design:
+          'Not drawn; the frame keeps its shape so the skeleton is the frame',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Notification toast on landing',
+        production: '“Get notified about new Squad activity.” once a day',
+        design: 'Kept as is, a toast, not part of the page',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Machine source (RSS) page /sources/[handle]',
+        production:
+          'Follow, bell, block, related tags, similar sources, rails, archive',
+        design:
+          'Becomes the Squad: Follow becomes Join Squad, the bell keeps its switches, the archive is the one feed, newest first',
+        status: 'Changed',
+      },
+    ],
+  },
+  {
+    group: 'Header',
+    rows: [
+      {
+        surface: 'Name, handle, Created, category link',
+        production: 'SquadPageHeader meta line',
+        design: 'Name, tagline, then one meta line with the category link',
+        status: 'Covered',
+      },
+      {
+        surface: 'Privacy state',
+        production: 'Featured / Public / Private Squad button',
+        design: 'Same three words in the meta line, Featured in cabbage',
+        status: 'Covered',
+      },
+      {
+        surface: 'Stats',
+        production:
+          'Posts, Views, Upvotes, Awards when > 0 (opens the awards list)',
+        design: 'Members with faces, Posts, Views, Upvotes, Awards when > 0',
+        status: 'Covered',
+      },
+      {
+        surface: 'Cover image',
+        production: 'Uploaded in settings, never shown on the page',
+        design: 'Shown, with the fade',
+        status: 'Added',
+      },
+      {
+        surface: 'Description',
+        production: 'One paragraph',
+        design: 'The tagline under the name; the long paragraph is not shown',
+        status: 'Changed',
+      },
+      {
+        surface: 'Member short list',
+        production: 'Avatars and count, opens the members modal',
+        design: 'Faces on the Members stat, opens the Members page',
+        status: 'Covered',
+      },
+      {
+        surface: 'Moderated by, Top members',
+        production: 'Two avatar rows with +N modals',
+        design:
+          'Team widget with the admins and moderators, See all opens Members. No top members row',
+        status: 'Covered',
+      },
+      {
+        surface: 'Stack & Tools',
+        production: 'Chips, +N, Add for editors, dashed empty state',
+        design:
+          'Right column under Team, the same chips, +N, Add and empty state',
+        status: 'Covered',
+      },
+      {
+        surface: 'Invitation link button',
+        production: 'Invite permission (memberInviteRole)',
+        design:
+          'Copy invitation link on Members and in the options menu, hidden when members may not invite',
+        status: 'Covered',
+      },
+      {
+        surface: 'Share Squad',
+        production: 'Copy link when the user cannot invite',
+        design:
+          'Share icon in the header for everyone, Share page beside Boost for admins on phones. Both use useShareOrCopyLink: the native share sheet on phones, copy link elsewhere. The Public page & URL card for the team',
+        status: 'Covered',
+      },
+      {
+        surface: 'Notifications bell',
+        production:
+          'Modal: Show new posts on For You, Notify me about new posts, Notify me about new members (admin)',
+        design: 'The same three switches behind the bell',
+        status: 'Covered',
+      },
+      {
+        surface: 'Pending posts count',
+        production: '“N Pending posts” button when moderation is on',
+        design:
+          'Badge on the Moderation row and the Manage menu; members get their own queue strip on Home',
+        status: 'Covered',
+      },
+      {
+        surface: 'Boost',
+        production:
+          'Public Squads, BoostSquad permission; readiness check; Boosting while active',
+        design:
+          'Boost / View boost for the admin on public Squads; readiness and the modal unchanged',
+        status: 'Covered',
+      },
+      {
+        surface: 'Slack',
+        production: 'Connect to Slack / Manage in the bar',
+        design: 'Integrations in Settings',
+        status: 'Changed',
+      },
+      {
+        surface: 'Award the Squad',
+        production: 'Award button for eligible non-admins',
+        design: 'Award the Squad in the options menu',
+        status: 'Changed',
+      },
+      {
+        surface: 'Analytics button',
+        production: 'ViewAnalytics',
+        design:
+          'Analytics widget in the right column for admins, and Analytics under Manage in the options menu',
+        status: 'Covered',
+      },
+      {
+        surface: 'Options menu',
+        production:
+          'Add to custom feed, Squad settings, Invitation link, Learn how Squads work, Feedback, Report Squad, Delete Squad, Leave Squad',
+        design:
+          'Same items and gates, opened by Manage for the team (Moderation, Content feed, Analytics, Settings); Squad settings is Settings there, the separate gear is gone, and Delete Squad lives only in Manage, Danger zone',
+        status: 'Changed',
+      },
+    ],
+  },
+  {
+    group: 'Posting',
+    rows: [
+      {
+        surface: 'Share post bar and New post',
+        production: 'URL input, reading history, or New post',
+        design: 'The composer',
+        status: 'Covered',
+      },
+      {
+        surface: 'Cannot post: not a member',
+        production: '“Join the Squad to create new posts”',
+        design: 'Lock card, same copy',
+        status: 'Covered',
+      },
+      {
+        surface: 'Cannot post: moderators only',
+        production: '“Only admins and moderators can post”',
+        design: 'Lock card, same copy',
+        status: 'Covered',
+      },
+      {
+        surface: 'Cannot post: reputation',
+        production: '“You need N reputation points to post”',
+        design: 'Lock card, same copy',
+        status: 'Covered',
+      },
+      {
+        surface: 'Post approval',
+        production:
+          'Prompt after submit; no feed state; the author finds it on /squads/moderate',
+        design:
+          'A note under the composer, the member’s queue strip on Home, the Pending posts page',
+        status: 'Added',
+      },
+      {
+        surface: 'Rejected post',
+        production: 'Status pill and the reason alert',
+        design: 'Same, on Pending posts',
+        status: 'Covered',
+      },
+      {
+        surface: 'Edit and resubmit, delete pending',
+        production: 'Item menu',
+        design: 'Edit and Delete on each pending item, Resubmitted Post marker',
+        status: 'Covered',
+      },
+      {
+        surface: 'Pinned posts',
+        production:
+          'Pin to top, Bring forward, Send backward; members collapse them',
+        design:
+          'Pinned posts row above the feed (Reddit’s highlights); X’s single pinned post kept as a test variant',
+        status: 'Covered',
+      },
+      {
+        surface: 'Welcome post',
+        production: 'PostType.Welcome, editable by WelcomePostEdit',
+        design:
+          'The first pinned post; on a fed page the Content feed page explains the source',
+        status: 'Covered',
+      },
+      {
+        surface: 'Search this Squad',
+        production: 'PostsSearch in the feed heading',
+        design:
+          'A search icon in the header beside the options menu (and ⌘K), the way X searches a profile, opens Spotlight with the Squad as a filter pill. Results come from SEARCH_SOURCE_POSTS_QUERY; Backspace widens to all of daily.dev; Enter opens a results page with a back button and the query as a chip',
+        status: 'Covered',
+      },
+      {
+        surface: 'Empty feed',
+        production: '“Get started by sharing your first post…” to everyone',
+        design:
+          'Copy per role: connect the feed or write for staff, join to hear for the rest',
+        status: 'Changed',
+      },
+      {
+        surface: 'Fed by RSS',
+        production: 'Does not exist for Squads (machine sources only)',
+        design: 'Content feed page in Manage; the items land in the one feed',
+        status: 'Added',
+      },
+    ],
+  },
+  {
+    group: 'Manage',
+    rows: [
+      {
+        surface: 'Moderation queue',
+        production:
+          'Approve all, spam warnings, poll item, Decline with ten reasons, all-done state',
+        design:
+          'Moderation in the Manage area, all of it, with the queue count in the menu',
+        status: 'Covered',
+      },
+      {
+        surface: 'Members modal',
+        production:
+          'Squad members / Moderators / Blocked members, search, Copy invitation link, role menu, Unblock',
+        design: 'Members page from the count, and in the Manage area',
+        status: 'Covered',
+      },
+      {
+        surface: 'Squad settings',
+        production:
+          'Details, Squad type, Moderation settings, Integrations, Danger zone',
+        design:
+          'The Manage area: Details, Posting and invitations, Integrations, Danger zone, under a grouped menu like profile settings',
+        status: 'Covered',
+      },
+      {
+        surface: 'Analytics',
+        production: 'Impressions, Unique reach, 45-day chart, numbers list',
+        design:
+          'Analytics in the Manage area, same sections; a summary widget in the right column for admins',
+        status: 'Covered',
+      },
+      {
+        surface: 'Delete Squad',
+        production: 'Danger zone and the menu, with the prompt',
+        design:
+          'Danger zone in Manage only, out of the options menu; the prompt stays',
+        status: 'Changed',
+      },
+      {
+        surface: 'Leave Squad',
+        production: 'Menu, prompt “Leave {name}”, toast',
+        design: 'Leave Squad in the menu; prompt and toast unchanged',
+        status: 'Covered',
+      },
+      {
+        surface: 'Promotion tour, Squad tour',
+        production: 'Carousels in modals',
+        design: 'Unchanged, opened from the menu and notifications',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Preview as',
+        production: 'None',
+        design:
+          'View as a visitor, a switch at the top of the right column; the page renders as a non-member sees it',
+        status: 'Added',
+      },
+    ],
+  },
+  {
+    group: 'Around the page',
+    rows: [
+      {
+        surface: 'Directory, category pages, My Squads',
+        production: '/squads/discover/**',
+        design: 'Unchanged',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Squads rail tab, sidebar rows, pin to sidebar',
+        production: 'NetworkSection',
+        design: 'Unchanged; the rail stays',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Feed cards, Squad ads, entity card, comment join banner',
+        production: 'Cards and post page',
+        design: 'Unchanged',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Share to Squad from a post',
+        production: 'SquadsToShare',
+        design: 'Unchanged',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Create Squad',
+        production: '/squads/new, NewSquadModal',
+        design: 'Unchanged; a verified Squad page is created by daily.dev',
+        status: 'Elsewhere',
+      },
+      {
+        surface: 'Bounties, leaderboard',
+        production: 'None',
+        design: 'None',
+        status: 'Neither',
+      },
+    ],
+  },
+  {
+    group: 'New in the direction',
+    rows: [
+      {
+        surface: 'About below laptop width',
+        production: 'None (no right column on phones)',
+        design:
+          'Posts and About tabs above the composer in the tags-directory style; About holds every right-column widget, share card included for the team. None from laptop up. The kind chips are in the Archive',
+        status: 'Added',
+      },
+      {
+        surface: 'Products',
+        production: 'None',
+        design:
+          'A shelf above the feed, a Products page, Add product for admins',
+        status: 'Added',
+      },
+      {
+        surface: 'Verified Squad page badge',
+        production: 'None (VerifiedCompanyUserBadge is user-only)',
+        design: 'Aurora card at the top of the right column',
+        status: 'Added',
+      },
+      {
+        surface: 'Composer',
+        production: 'Share post bar: URL field and reading history',
+        design:
+          'The box opens the new composer in free form; Share a link and Poll as shortcuts',
+        status: 'Changed',
+      },
+      {
+        surface: 'Manage area',
+        production:
+          'None (settings, moderation and analytics are separate routes and a modal)',
+        design:
+          'One settings area opened by Edit page, like Edit profile: grouped menu beside the page on laptop, list then page on phones',
+        status: 'Added',
+      },
+      {
+        surface: 'Sub-pages',
+        production: 'Modals and separate routes',
+        design:
+          'They replace the centre card under one header: back, the title, one action',
+        status: 'Changed',
+      },
+    ],
+  },
+];
+
+const tone: Record<Status, string> = {
+  Covered: 'text-status-success',
+  Added: 'text-accent-cabbage-default',
+  Changed: 'text-accent-cheese-default',
+  Elsewhere: 'text-text-tertiary',
+  Dropped: 'text-text-quaternary',
+  Neither: 'text-text-quaternary',
+};
+
+const statusLabel: Record<Status, string> = {
+  Covered: 'Covered',
+  Added: 'Added',
+  Changed: 'Changed',
+  Elsewhere: 'Elsewhere',
+  Dropped: 'Dropped',
+  Neither: 'Not in production, not in the design',
+};
+
+const CoverageTable = ({ rows }: { rows: Row[] }): ReactElement => (
+  <div className="overflow-x-auto rounded-16 border border-border-subtlest-tertiary">
+    <table className="w-full min-w-[64rem] border-collapse text-left">
+      <thead>
+        <tr className="bg-surface-float">
+          {['Surface', 'Production today', 'New design', 'Status'].map(
+            (cell) => (
+              <th
+                key={cell}
+                className="px-4 py-3 font-bold text-text-secondary typo-caption1"
+              >
+                {cell}
+              </th>
+            ),
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr
+            key={row.surface}
+            className="border-t border-border-subtlest-tertiary align-top"
+          >
+            <td className="px-4 py-3 font-bold text-text-primary typo-footnote">
+              {row.surface}
+            </td>
+            <td className="px-4 py-3 text-text-tertiary typo-footnote">
+              {row.production}
+            </td>
+            <td className="px-4 py-3 text-text-secondary typo-footnote">
+              {row.design}
+            </td>
+            <td
+              className={classNames(
+                'whitespace-nowrap px-4 py-3 font-bold typo-footnote',
+                tone[row.status],
+              )}
+            >
+              {statusLabel[row.status]}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-4">
+    <h2 className="font-bold typo-title2">{title}</h2>
+    {children}
+  </section>
+);
+
+const counts = coverage
+  .flatMap((group) => group.rows)
+  .reduce<Record<Status, number>>(
+    (acc, row) => ({ ...acc, [row.status]: (acc[row.status] ?? 0) + 1 }),
+    { Covered: 0, Added: 0, Changed: 0, Elsewhere: 0, Dropped: 0, Neither: 0 },
+  );
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Production parity"
+      title="Everything the Squad page does today"
+      intro={
+        <>
+          <p>
+            An audit of the production Squad and source code (the routes under
+            /squads and /sources, the Squads components, the hooks and the
+            GraphQL model), every state it can be in, and where each one lives
+            in the new design. The cases below render the ones that were missing
+            before this pass; the tables list all of them.
+          </p>
+          <p>
+            Statuses: <b className={tone.Covered}>Covered</b> is the same thing
+            in a new seat, <b className={tone.Added}>Added</b> is new in the
+            design, <b className={tone.Changed}>Changed</b> is a deliberate
+            difference, <b className={tone.Elsewhere}>Elsewhere</b> is a surface
+            outside this page that stays as it is,{' '}
+            <b className={tone.Dropped}>Dropped</b> is gone on purpose, and{' '}
+            <b className={tone.Neither}>{statusLabel.Neither}</b> is a pattern
+            other platforms have that Squads never had and the design does not
+            add.
+          </p>
+          <p className="flex flex-wrap gap-x-4 gap-y-1 typo-callout">
+            {(Object.keys(counts) as Status[]).map((status) => (
+              <span
+                key={status}
+                className={classNames('font-bold', tone[status])}
+              >
+                {counts[status]} {statusLabel[status]}
+              </span>
+            ))}
+          </p>
+        </>
+      }
+    >
+      <Section title="Cases added in this pass">
+        <div className="flex flex-col gap-12">
+          {productionCases.map((useCase) => (
+            <Case key={useCase.id} useCase={useCase} />
+          ))}
+        </div>
+      </Section>
+
+      {coverage.map((group) => (
+        <Section key={group.group} title={group.group}>
+          <CoverageTable rows={group.rows} />
+        </Section>
+      ))}
+
+      <Section title="Production quirks the redesign fixes">
+        <ul className="flex max-w-[80ch] list-disc flex-col gap-2 pl-5 text-text-secondary typo-callout">
+          <li>
+            Logged-out visitors never see Join on a public Squad: the button
+            waits for a content-preference query that only runs logged in. The
+            design shows Sign up to join.
+          </li>
+          <li>
+            The cover image can be uploaded but never shows on the page. The
+            design shows it.
+          </li>
+          <li>
+            A blocked member still gets the notifications bell and Leave Squad.
+            The design treats blocked as blocked.
+          </li>
+          <li>
+            An author with nothing pending sees loading skeletons forever on the
+            pending list. The design shows the all-done copy.
+          </li>
+          <li>
+            The empty feed tells anonymous visitors to share their first post.
+            The design speaks to the role.
+          </li>
+          <li>
+            The settings page does not check the Edit permission client side.
+            Settings is admin-only in the design.
+          </li>
+          <li>
+            The rejection alert is missing a space after the colon and the
+            duplicate-post warning has a stray quote. Both fixed in the copy
+            here.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="What the fed verified Squad page adds on top">
+        <p className="max-w-[76ch] text-text-secondary typo-callout">
+          Nothing above changes for a verified Squad page. It is a Squad with
+          three additions: the verified badge, the content feed that posts the
+          company&apos;s RSS into the feed (listed under Integrations and
+          explained on the Content feed page), and the daily.dev manager on the
+          Content feed page. Every gate, role, state and menu item here applies
+          to it unchanged; the source is {ContentSource.Feed} by default in
+          these stories.
+        </p>
+      </Section>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/States.stories.tsx b/packages/storybook/stories/squad-page/use-cases/States.stories.tsx
new file mode 100644
index 00000000000..8e1003be1d6
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/States.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Case, Page } from './shared';
+import { stateCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/States',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// The squad before it has anything, and the squad that keeps people out.
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · States"
+      title="Empty and private"
+      intro={
+        <p>
+          Two states the page has to survive. Empty is the first day, before the
+          feed delivers or anyone writes. Private is the Squad that only
+          approved members read, which a company may want for a customer
+          community or a beta.
+        </p>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        {stateCases.map((useCase) => (
+          <Case key={useCase.id} useCase={useCase} />
+        ))}
+      </div>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/Viewers.stories.tsx b/packages/storybook/stories/squad-page/use-cases/Viewers.stories.tsx
new file mode 100644
index 00000000000..575e08a4315
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/Viewers.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Case, Page } from './shared';
+import { viewerCases } from './cases';
+
+const meta: Meta = {
+  title: 'Squad Page/2. Use cases/Viewers',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// Six people open the same Home. What each of them can do decides what
+// they see: the primary button, the composer, the manage section, the
+// preview switch.
+
+export const Overview: StoryObj = {
+  render: () => (
+    <Page
+      eyebrow="Use cases · Viewers"
+      title="Six people, one Home"
+      intro={
+        <p>
+          The same page for everyone who can open it. What changes is only what
+          they are allowed to do, and the page never shows a control it would
+          refuse.
+        </p>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        {viewerCases.map((useCase) => (
+          <Case key={useCase.id} useCase={useCase} />
+        ))}
+      </div>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/squad-page/use-cases/cases.ts b/packages/storybook/stories/squad-page/use-cases/cases.ts
new file mode 100644
index 00000000000..5aa8093f103
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/cases.ts
@@ -0,0 +1,486 @@
+import { Viewer } from '../kit';
+import type { SquadConfig } from '../workspace';
+import { ContentSource, MemberRole, PostingGate } from '../workspace';
+
+// Every use case, on the chosen direction (Squad Page, 1. Direction).
+// One list so the stories, the index and the phone frames (which load a
+// case by id in the Direction playground) all draw from the same place.
+
+export interface UseCase {
+  id: string;
+  title: string;
+  who: string;
+  sees: string;
+  viewer: Viewer;
+  /** A page id, or about for the right column's widgets below laptop. */
+  page?: string;
+  source?: ContentSource;
+  empty?: boolean;
+  isPrivate?: boolean;
+  config?: Partial<SquadConfig>;
+  /** rem, the desktop frame's height */
+  height?: number;
+}
+
+export const viewerCases: UseCase[] = [
+  {
+    id: 'anonymous',
+    title: 'Anonymous',
+    who: 'Logged out, from a link or a search result',
+    sees: 'The page reads in full. The header ends with Join Squad, which opens sign up, full width under the stats on a phone. The composer is the lock card, no bell, polls are read-only.',
+    viewer: Viewer.Anonymous,
+  },
+  {
+    id: 'visitor',
+    title: 'Logged in, not a member',
+    who: 'A daily.dev user who has not joined',
+    sees: 'Join Squad is the one primary button, last in the header row. Everything reads; the composer says Join the Squad to create new posts.',
+    viewer: Viewer.Visitor,
+  },
+  {
+    id: 'member',
+    title: 'Member',
+    who: 'Joined',
+    sees: 'Joined in the Subtle style and the bell in the header, the composer with Share a link, a vote on polls in the feed.',
+    viewer: Viewer.Member,
+  },
+  {
+    id: 'moderator',
+    title: 'Moderator',
+    who: 'A member the company trusts with the queue',
+    sees: 'Everything a member has, plus Manage in the options menu (Rules, FAQ, Members, Moderation), View as a visitor and the share card at the top of the right column, and Poll in the composer. No analytics or settings.',
+    viewer: Viewer.Moderator,
+  },
+  {
+    id: 'admin',
+    title: 'Admin',
+    who: 'The company, or the daily.dev manager acting for them',
+    sees: 'Edit page as a pen icon in the header and Boost last, like Join (beside Share page under the stats on a phone), Manage at the top of the options menu, View as a visitor and the share card, the Analytics widget, Poll in the composer, Add product on Products.',
+    viewer: Viewer.Admin,
+  },
+  {
+    id: 'blocked',
+    title: 'Blocked',
+    who: 'Removed by a moderator, still logged in',
+    sees: 'A public Squad still reads. Join Squad is disabled with “You are not allowed to join the Squad”, the composer is the lock card, no bell. A private Squad shows the wall.',
+    viewer: Viewer.Blocked,
+  },
+];
+
+export const postingCases: UseCase[] = [
+  {
+    id: 'discussions-anonymous',
+    title: 'Posting, logged out',
+    who: 'Anonymous',
+    sees: 'The composer is the lock card. The feed reads in full.',
+    viewer: Viewer.Anonymous,
+    height: 40,
+  },
+  {
+    id: 'discussions-visitor',
+    title: 'Posting, not a member',
+    who: 'Logged in, not joined',
+    sees: 'The lock card says Join the Squad to create new posts. Same feed.',
+    viewer: Viewer.Visitor,
+    height: 40,
+  },
+  {
+    id: 'discussions-member',
+    title: 'Posting, as a member',
+    who: 'Member',
+    sees: 'The whole composer box opens the new composer; Share a link is the shortcut. The post waits for a moderator if the Squad reviews posts.',
+    viewer: Viewer.Member,
+    height: 40,
+  },
+  {
+    id: 'releases-fed',
+    title: 'Releases on a verified page',
+    who: 'Admin, feed connected',
+    sees: 'Releases arrive in the one feed from the company’s changelog, nobody writes them by hand. The Content feed page in Manage says where they come from.',
+    viewer: Viewer.Admin,
+    source: ContentSource.Feed,
+    height: 44,
+  },
+  {
+    id: 'releases-manual',
+    title: 'Releases on a hand-written Squad',
+    who: 'Admin, no feed',
+    sees: 'The team writes releases in the composer like any post. No Content feed in Manage.',
+    viewer: Viewer.Admin,
+    source: ContentSource.Manual,
+    height: 44,
+  },
+  {
+    id: 'polls-member',
+    title: 'Polls, as a member',
+    who: 'Member',
+    sees: 'Polls sit in the feed on the production poll card, one vote each. The composer has no Poll shortcut; asking is the team’s.',
+    viewer: Viewer.Member,
+    height: 44,
+  },
+  {
+    id: 'polls-moderator',
+    title: 'Polls, as a moderator',
+    who: 'Moderator',
+    sees: 'Poll in the composer: moderators can ask. The poll lands in the feed like any post.',
+    viewer: Viewer.Moderator,
+    height: 44,
+  },
+  {
+    id: 'moderation',
+    title: 'The queue',
+    who: 'Moderator',
+    sees: 'Member posts waiting for approval, with Approve and Decline. A moderator’s Manage menu holds Rules, FAQ, Members and Moderation.',
+    viewer: Viewer.Moderator,
+    page: 'moderation',
+    height: 44,
+  },
+];
+
+export const contentCases: UseCase[] = [
+  {
+    id: 'feed-admin',
+    title: 'The content feed, as an admin',
+    who: 'The company, or its daily.dev manager',
+    sees: 'Managed by daily.dev up top with a contact. The source, its health, where it publishes, how often it is checked, what it has imported. Sync, pause, add a feed. Recent imports with their state.',
+    viewer: Viewer.Admin,
+    page: 'feed',
+    source: ContentSource.Feed,
+    height: 52,
+  },
+  {
+    id: 'feed-member',
+    title: 'The feed, as a member of a fed page',
+    who: 'Member',
+    sees: 'Items from the company’s changelog read like any other post in the one feed, signed by the team member in the item or the Squad.',
+    viewer: Viewer.Member,
+    source: ContentSource.Feed,
+    height: 44,
+  },
+  {
+    id: 'manual-moderator',
+    title: 'A plain Squad, as a moderator',
+    who: 'Moderator, no feed',
+    sees: 'The team writes in the composer. There is no Content feed page because there is no feed.',
+    viewer: Viewer.Moderator,
+    source: ContentSource.Manual,
+    height: 44,
+  },
+  {
+    id: 'manual-admin',
+    title: 'A plain Squad’s Manage menu',
+    who: 'Admin, no feed',
+    sees: 'Manage in the options menu lists Moderation, Analytics, Settings. Content feed appears only once a feed is connected.',
+    viewer: Viewer.Admin,
+    source: ContentSource.Manual,
+    height: 44,
+  },
+];
+
+export const stateCases: UseCase[] = [
+  {
+    id: 'empty-admin',
+    title: 'Just created, as an admin',
+    who: 'Admin, feed not yet delivering',
+    sees: 'The header, the badge, the rules, the team and the links are all there. No products shelf and no pins yet; the feed says what to do next: connect the feed or write the first post.',
+    viewer: Viewer.Admin,
+    empty: true,
+    height: 44,
+  },
+  {
+    id: 'empty-visitor',
+    title: 'Just created, as a visitor',
+    who: 'Logged in, not joined',
+    sees: 'The same page with an empty feed asking them to join to hear when the team posts.',
+    viewer: Viewer.Visitor,
+    empty: true,
+    height: 44,
+  },
+  {
+    id: 'empty-releases',
+    title: 'A fed page before the first item',
+    who: 'Member, feed connected',
+    sees: 'An empty feed: the first changelog item lands the hour it is published.',
+    viewer: Viewer.Member,
+    empty: true,
+    source: ContentSource.Feed,
+    height: 40,
+  },
+  {
+    id: 'private-anonymous',
+    title: 'Private Squad, logged out',
+    who: 'Anonymous',
+    sees: 'The header, rules and team read; the feed and every page are production’s Unauthorized copy, with Log in.',
+    viewer: Viewer.Anonymous,
+    isPrivate: true,
+    height: 40,
+  },
+  {
+    id: 'private-visitor',
+    title: 'Private Squad, logged in',
+    who: 'Logged in, not a member',
+    sees: 'The same wall without Log in. There is no request to join in production; the invitation link is the only door.',
+    viewer: Viewer.Visitor,
+    page: 'rules',
+    isPrivate: true,
+    height: 40,
+  },
+  {
+    id: 'private-member',
+    title: 'Private Squad, as a member',
+    who: 'Member',
+    sees: 'No wall. The Squad behaves like any other.',
+    viewer: Viewer.Member,
+    isPrivate: true,
+    height: 40,
+  },
+];
+
+// Every state the production squad page has today, and where it lives in
+// the direction. Audited from packages/webapp/pages/squads/** and
+// packages/shared/src/components/squads/** on 23 Sep 2026. Copy is
+// production's, word for word, unless a case says it changed.
+export const productionCases: UseCase[] = [
+  {
+    id: 'search',
+    title: 'Searching inside the Squad',
+    who: 'Member, after searching “review”',
+    sees: 'The search icon beside the options menu opens Spotlight with the Squad as a filter pill; Enter opens this page: back, the query as a chip with the Squad’s logo (the text edits it, the cross ends it), the count, and only the matching posts.',
+    viewer: Viewer.Member,
+    page: 'search',
+    height: 44,
+  },
+  {
+    id: 'blocked-member',
+    title: 'Blocked member',
+    who: 'SourceMemberRole.Blocked',
+    sees: 'Join Squad is disabled with production’s copy, the composer is the lock card, the bell and Leave Squad are gone (production still shows them, a quirk). The page reads in full because the Squad is public.',
+    viewer: Viewer.Blocked,
+    height: 44,
+  },
+  {
+    id: 'featured',
+    title: 'Featured public Squad with a category',
+    who: 'Visitor',
+    sees: 'The meta line carries production’s SquadPrivacyState (Featured outranks Public outranks Private) and the category link to the directory. Awards appear in the stats when the Squad has any.',
+    viewer: Viewer.Visitor,
+    config: { featured: true, category: 'DevRel' },
+    height: 40,
+  },
+  {
+    id: 'mods-only',
+    title: 'Only moderators can post',
+    who: 'Member, memberPostingRole = moderator',
+    sees: 'The lock card says “Only admins and moderators can post”.',
+    viewer: Viewer.Member,
+    config: {
+      memberPostingRole: MemberRole.Moderator,
+      postingGate: PostingGate.None,
+    },
+    height: 40,
+  },
+  {
+    id: 'reputation',
+    title: 'Reputation gate, member below it',
+    who: 'Member with 120 reputation, threshold 250',
+    sees: '“You need 250 reputation points to post”. A member above the threshold posts without review.',
+    viewer: Viewer.Member,
+    config: {
+      postingGate: PostingGate.Reputation,
+      postingMinReputation: 250,
+      viewerReputation: 120,
+    },
+    height: 40,
+  },
+  {
+    id: 'moderated',
+    title: 'Post approval on, member with posts in the queue',
+    who: 'Member, moderationRequired',
+    sees: 'The composer works and says posts are reviewed before they go live. Above it, the member’s own queue: two waiting.',
+    viewer: Viewer.Member,
+    config: { postingGate: PostingGate.Moderation, ownPending: 2 },
+    height: 44,
+  },
+  {
+    id: 'pending',
+    title: 'Pending posts, the author’s view',
+    who: 'Member',
+    sees: 'Production’s /squads/moderate for a non-moderator: Pending and Rejected items, the rejection reason, Resubmitted Post, Edit and Delete.',
+    viewer: Viewer.Member,
+    page: 'pending',
+    config: { ownPending: 3 },
+    height: 44,
+  },
+  {
+    id: 'queue',
+    title: 'The moderation queue',
+    who: 'Moderator',
+    sees: 'Approve all N posts, the spam warning, a poll item, Decline opening the ten production reasons, Approve.',
+    viewer: Viewer.Moderator,
+    page: 'moderation',
+    height: 48,
+  },
+  {
+    id: 'queue-empty',
+    title: 'The queue, all done',
+    who: 'Moderator',
+    sees: 'Production’s empty copy. Authors get theirs on Pending posts (production shows skeletons forever there, a bug).',
+    viewer: Viewer.Moderator,
+    page: 'moderation',
+    empty: true,
+    height: 36,
+  },
+  {
+    id: 'members',
+    title: 'Members with the Blocked tab and the role menu',
+    who: 'Admin',
+    sees: 'Production’s SquadMemberModal as a page: three tabs, search, Copy invitation link first, Admin and Moderator badges, and the member menu (Make admin, Promote, Demote, Report, Block, Gift Plus).',
+    viewer: Viewer.Admin,
+    page: 'members',
+    height: 44,
+  },
+  {
+    id: 'members-member',
+    title: 'Members as a plain member',
+    who: 'Member, memberInviteRole = member',
+    sees: 'Two tabs, Copy invitation link because members may invite, Follow on rows (to follow the person) instead of the menu.',
+    viewer: Viewer.Member,
+    page: 'members',
+    height: 40,
+  },
+  {
+    id: 'settings',
+    title: 'Squad settings',
+    who: 'Admin',
+    sees: 'Settings opens the Manage area on Details. Production’s one long form is split across Details, Posting and invitations, Integrations and Danger zone in the menu.',
+    viewer: Viewer.Admin,
+    page: 'settings',
+    height: 56,
+  },
+  {
+    id: 'analytics',
+    title: 'Squad analytics with a boost running',
+    who: 'Admin, ViewAnalytics, campaign active',
+    sees: 'Production’s analytics parts: the Impressions and Unique reach tiles, the 45-day chart with boosted days marked, the Engagement list. The header says View boost instead of Boost.',
+    viewer: Viewer.Admin,
+    page: 'analytics',
+    config: { campaign: true },
+    height: 44,
+  },
+  {
+    id: 'add-product',
+    title: 'Adding a product',
+    who: 'Admin',
+    sees: 'The profile’s add-experience pattern: its own page, Save in the header, the link first to fill the rest, then logo, name, tagline, category, pricing, description.',
+    viewer: Viewer.Admin,
+    page: 'add-product',
+    height: 52,
+  },
+  {
+    id: 'invite-anonymous',
+    title: 'Invitation link, logged out',
+    who: 'Anonymous on /squads/[handle]/[token]',
+    sees: 'Production’s landing: who invited you, the Squad card, Join Squad (sign up first), who is waiting inside.',
+    viewer: Viewer.Anonymous,
+    page: 'invite',
+    height: 44,
+  },
+  {
+    id: 'invite-blocked',
+    title: 'Invitation link, blocked',
+    who: 'Blocked',
+    sees: 'Join is disabled and the forbidden label shows. Production shows it as a toast on click.',
+    viewer: Viewer.Blocked,
+    page: 'invite',
+    height: 44,
+  },
+  {
+    id: 'private-wall',
+    title: 'Private Squad, not a member',
+    who: 'Logged in, not a member',
+    sees: 'Production’s Unauthorized screen, word for word, under the header. The invitation link is the only door.',
+    viewer: Viewer.Visitor,
+    page: 'rules',
+    isPrivate: true,
+    height: 40,
+  },
+  {
+    id: 'not-found',
+    title: 'Deleted Squad or bad handle',
+    who: 'Anyone',
+    sees: 'Production’s Custom404 copy, plus a Find Squads door it does not have.',
+    viewer: Viewer.Visitor,
+    page: 'not-found',
+    height: 32,
+  },
+];
+
+export const manageCases: UseCase[] = [
+  {
+    id: 'manage-admin',
+    title: 'Manage, opened from Edit page',
+    who: 'Admin',
+    sees: 'The profile’s settings pattern: on laptop a grouped menu (Page, Community, Tools) beside Details; on a phone the menu is a list and each item opens its own page with a back button.',
+    viewer: Viewer.Admin,
+    page: 'manage',
+    height: 52,
+  },
+  {
+    id: 'manage-details',
+    title: 'Details',
+    who: 'Admin',
+    sees: 'The cover and the round image with camera and remove buttons, like profile settings, then name, handle and description, and the Squad type with the category dropdown under Public. Save sits in the page header.',
+    viewer: Viewer.Admin,
+    page: 'manage-details',
+    height: 56,
+  },
+  {
+    id: 'manage-moderator',
+    title: 'Manage, as a moderator',
+    who: 'Moderator',
+    sees: 'Only what a moderator may touch: Rules, FAQ, Members, Moderation. It opens on Rules.',
+    viewer: Viewer.Moderator,
+    page: 'manage',
+    height: 48,
+  },
+  {
+    id: 'manage-posting',
+    title: 'Posting and invitations',
+    who: 'Admin',
+    sees: 'Who may post, whether posts are reviewed or gated by reputation, and who may invite, split out of production’s one long settings form.',
+    viewer: Viewer.Admin,
+    page: 'manage-posting',
+    height: 52,
+  },
+  {
+    id: 'manage-products',
+    title: 'Products, managed',
+    who: 'Admin',
+    sees: 'The products as management rows with an edit button each and Add in the header; Add opens the form with Save, and back returns to the list.',
+    viewer: Viewer.Admin,
+    page: 'manage-products',
+    height: 52,
+  },
+  {
+    id: 'manage-links',
+    title: 'Links',
+    who: 'Admin',
+    sees: 'The links the right column shows, each with its mark, address and a remove button, the Add link field on top, and Save in the header.',
+    viewer: Viewer.Admin,
+    page: 'manage-links',
+    height: 44,
+  },
+];
+
+export const allCases: UseCase[] = [
+  ...viewerCases,
+  ...postingCases,
+  ...contentCases,
+  ...stateCases,
+  ...productionCases,
+  ...manageCases,
+];
+
+export const caseById = Object.fromEntries(
+  allCases.map((useCase) => [useCase.id, useCase]),
+) as Record<string, UseCase>;
diff --git a/packages/storybook/stories/squad-page/use-cases/shared.tsx b/packages/storybook/stories/squad-page/use-cases/shared.tsx
new file mode 100644
index 00000000000..ceea2bbb215
--- /dev/null
+++ b/packages/storybook/stories/squad-page/use-cases/shared.tsx
@@ -0,0 +1,201 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+// @ts-expect-error react-dom ships no types in this package
+import { createRoot } from 'react-dom/client';
+import ExtensionProviders from '../../extension/_providers';
+import { KitStyles, Viewer } from '../kit';
+import { WorkspaceStyles } from '../workspace';
+import { DirectionShell } from '../direction';
+import type { UseCase } from './cases';
+
+export type { UseCase } from './cases';
+
+// Shared furniture for the use-case stories: every case drawn twice, on
+// the direction, at desktop width and on a 375px phone. The phone is a
+// frame of its own width, so its breakpoints are real.
+
+export const viewerLabel: Record<Viewer, string> = {
+  [Viewer.Anonymous]: 'Anonymous',
+  [Viewer.Visitor]: 'Logged in, not a member',
+  [Viewer.Member]: 'Member',
+  [Viewer.Moderator]: 'Moderator',
+  [Viewer.Admin]: 'Admin',
+  [Viewer.Blocked]: 'Blocked',
+};
+
+/**
+ * A device of its own width: a blank frame the page renders straight into,
+ * with this document's styles and theme copied in. Its media queries see
+ * the frame's width, so the app's breakpoints apply as they would live,
+ * without booting a second Storybook in every frame.
+ */
+export const ViewportFrame = ({
+  width,
+  height,
+  label,
+  scale = 1,
+  children,
+}: {
+  width: number;
+  /** px */
+  height: number;
+  label: string;
+  /** Draw a wide device smaller without changing its viewport. */
+  scale?: number;
+  children: ReactNode;
+}): ReactElement => {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const rootRef = useRef<{
+    render: (node: ReactNode) => void;
+    unmount: () => void;
+  } | null>(null);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const doc = frameRef.current?.contentDocument;
+    if (!doc) {
+      return undefined;
+    }
+    doc.open();
+    doc.write('<!doctype html><html><head></head><body></body></html>');
+    doc.close();
+    doc.documentElement.className = document.documentElement.className;
+    document.head
+      .querySelectorAll('style, link[rel="stylesheet"]')
+      .forEach((node) => doc.head.appendChild(node.cloneNode(true)));
+    doc.body.style.margin = '0';
+    const mount = doc.createElement('div');
+    doc.body.appendChild(mount);
+    rootRef.current = createRoot(mount);
+    setReady(true);
+
+    const theme = new MutationObserver(() => {
+      doc.documentElement.className = document.documentElement.className;
+    });
+    theme.observe(document.documentElement, { attributes: true });
+
+    return () => {
+      theme.disconnect();
+      const root = rootRef.current;
+      rootRef.current = null;
+      setTimeout(() => root?.unmount());
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      rootRef.current?.render(
+        <ExtensionProviders>
+          <KitStyles />
+          <WorkspaceStyles />
+          {children}
+        </ExtensionProviders>,
+      );
+    }
+  }, [ready, children]);
+
+  return (
+    <div className="flex shrink-0 flex-col gap-2">
+      <span className="text-text-quaternary typo-caption1">{label}</span>
+      <div
+        style={{ width: width * scale, height: height * scale }}
+        className="overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-default"
+      >
+        <iframe
+          ref={frameRef}
+          title={label}
+          style={{
+            width,
+            height,
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Case = ({ useCase }: { useCase: UseCase }): ReactElement => {
+  const height = useCase.height ?? 44;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1">
+        <span className="font-bold text-text-primary typo-callout">
+          {useCase.title}
+        </span>
+        <span className="max-w-[100ch] text-text-tertiary typo-footnote">
+          <b className="text-text-secondary">{useCase.who}.</b> {useCase.sees}
+        </span>
+      </div>
+      <div className="flex items-start gap-6">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <span className="text-text-quaternary typo-caption1">Desktop</span>
+          <DirectionShell
+            viewer={useCase.viewer}
+            initialPage={useCase.page ?? 'home'}
+            source={useCase.source}
+            empty={useCase.empty}
+            isPrivate={useCase.isPrivate}
+            config={useCase.config}
+            width={1060}
+            height={height}
+          />
+        </div>
+        <ViewportFrame width={375} height={height * 16} label="Phone, 375px">
+          <DirectionShell
+            viewer={useCase.viewer}
+            initialPage={useCase.page ?? 'home'}
+            source={useCase.source}
+            empty={useCase.empty}
+            isPrivate={useCase.isPrivate}
+            config={useCase.config}
+            fluid
+          />
+        </ViewportFrame>
+      </div>
+    </div>
+  );
+};
+
+export const Page = ({
+  eyebrow,
+  title,
+  intro,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  intro: ReactNode;
+  children: ReactNode;
+}): ReactElement => (
+  <ExtensionProviders>
+    <div className="min-h-screen bg-background-default px-8 pb-24 pt-10 text-text-primary">
+      <KitStyles />
+      <WorkspaceStyles />
+      <div className="mx-auto flex w-full max-w-[92rem] flex-col gap-12">
+        <header className="flex flex-col gap-3 border-b border-border-subtlest-tertiary pb-8">
+          <span className="font-bold uppercase tracking-[0.16em] text-text-quaternary typo-caption1">
+            {eyebrow}
+          </span>
+          <h1 className="max-w-[24ch] font-bold typo-mega3">{title}</h1>
+          <div className="flex max-w-[76ch] flex-col gap-3 text-text-secondary typo-body">
+            {intro}
+          </div>
+        </header>
+        {children}
+      </div>
+    </div>
+  </ExtensionProviders>
+);
+
+export const Full = ({ children }: { children: ReactNode }): ReactElement => (
+  <ExtensionProviders>
+    <div className="flex min-h-screen items-start justify-center bg-background-subtle p-8">
+      <KitStyles />
+      <WorkspaceStyles />
+      {children}
+    </div>
+  </ExtensionProviders>
+);
diff --git a/packages/storybook/stories/squad-page/workspace.tsx b/packages/storybook/stories/squad-page/workspace.tsx
new file mode 100644
index 00000000000..311ba4f7d5b
--- /dev/null
+++ b/packages/storybook/stories/squad-page/workspace.tsx
@@ -0,0 +1,1930 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  AddUserIcon,
+  AnalyticsIcon,
+  AtIcon,
+  BlockIcon,
+  BookmarkIcon,
+  CameraIcon,
+  CardIcon,
+  ClearIcon,
+  ClickIcon,
+  DiscussIcon,
+  DocsIcon,
+  EditIcon,
+  EyeIcon,
+  HomeIcon,
+  LinkIcon,
+  LockIcon,
+  MedalBadgeIcon,
+  MegaphoneIcon,
+  MenuIcon,
+  MergeIcon,
+  OpenLinkIcon,
+  PlayIcon,
+  PlusIcon,
+  PollIcon,
+  SearchIcon,
+  SettingsIcon,
+  ShareIcon,
+  SlackIcon,
+  SparkleIcon,
+  SquadIcon,
+  StarIcon,
+  TimerIcon,
+  TrashIcon,
+  UpvoteIcon,
+  UserIcon,
+  VIcon,
+  WarningIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { TextField } from '@dailydotdev/shared/src/components/fields/TextField';
+import Textarea from '@dailydotdev/shared/src/components/fields/Textarea';
+import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
+import { Dropdown } from '@dailydotdev/shared/src/components/fields/Dropdown';
+import { DataTile } from '@dailydotdev/shared/src/components/DataTile';
+import UserBadge from '@dailydotdev/shared/src/components/UserBadge';
+import { SourceMemberRole } from '@dailydotdev/shared/src/graphql/sources';
+import { SquadEmptyScreen } from '@dailydotdev/shared/src/components/squads/moderation/SquadEmptyScreen';
+import { BlockedMembersPlaceholder } from '@dailydotdev/shared/src/components/squads/Members/BlockedMembersPlaceholder';
+import { AnalyticsNumbersList } from '@dailydotdev/shared/src/components/analytics/AnalyticsNumbersList';
+import { CombinedImpressionsChart } from '@dailydotdev/shared/src/components/analytics/CombinedImpressionsChart';
+import { SearchField } from '@dailydotdev/shared/src/components/fields/SearchField';
+import {
+  SquadDirectoryNavbar,
+  SquadDirectoryNavbarItem,
+} from '@dailydotdev/shared/src/components/squads/layout/SquadDirectoryNavbar';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { HorizontalSeparator } from '@dailydotdev/shared/src/components/utilities/common';
+import type { SquadPoll } from './data';
+import {
+  analyticsDays,
+  analyticsDiscovery,
+  analyticsEngagement,
+  feedEntries,
+  moderationQueueCount,
+  pendingQueue,
+  formatCount,
+  formatDay,
+  formatSince,
+  companyLinks,
+  polls,
+  products,
+  rules,
+  squad,
+  team,
+} from './data';
+import {
+  Avatar,
+  CardList,
+  Facepile,
+  isAdmin,
+  isBlocked,
+  isJoined,
+  isLoggedIn,
+  isStaff,
+  linkIcon,
+  VerifiedMark,
+  Viewer,
+} from './kit';
+import { PollList } from '@dailydotdev/shared/src/components/cards/poll/PollList';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { PostType, UserVote } from '@dailydotdev/shared/src/graphql/posts';
+import { PostsToolbar } from './home';
+import { ClassicSidebar } from './rail';
+import type { SquadConfig, WorkspaceState } from './state';
+import {
+  ContentSource,
+  defaultConfig,
+  MemberRole,
+  PostingGate,
+  useWorkspace,
+  WorkspaceContext,
+} from './state';
+
+// Round three: the Whop mindset. A squad is not a page with widgets, it is a
+// workspace. The owner composes a left column of pages (a feed, a chat, a
+// document, a link, a bounty board, a job list), each page type renders its
+// own UI in the main area, and the app's own rail stays where it is. Three
+// columns, like Whop: communities rail, this community's pages, the page.
+
+/* ------------------------------------------------------------- page model */
+
+export enum PageType {
+  Home = 'home',
+  /** A saved filter on the squad feed with its own posting rule. */
+  Channel = 'channel',
+  Releases = 'releases',
+  Polls = 'polls',
+  Doc = 'doc',
+  Rules = 'rules',
+  Link = 'link',
+  Products = 'products',
+  Members = 'members',
+  Analytics = 'analytics',
+  Moderation = 'moderation',
+  Settings = 'settings',
+  /** Where the content comes from: the RSS feed a company page is fed by. */
+  Feed = 'feed',
+  Add = 'add',
+  /** A member's own posts in the queue. */
+  Pending = 'pending',
+  /** The invitation link landing. */
+  Invite = 'invite',
+  NotFound = 'not-found',
+}
+
+export interface SquadPage {
+  id: string;
+  label: string;
+  type: PageType;
+  /** Unread or open count, shown as a bubble. */
+  badge?: number;
+  /** Only admins and moderators can post. */
+  restricted?: boolean;
+  /** Opens outside daily.dev. */
+  href?: string;
+  /** One line under the channel name on its page. */
+  description?: string;
+  /** Moderators do not see it; only admins. */
+  adminOnly?: boolean;
+}
+
+export interface SidebarSection {
+  id: string;
+  label?: string;
+  pages: SquadPage[];
+  /** Only rendered for admins. */
+  admin?: boolean;
+}
+
+// The shape every developer community converges on. Reddit calls the channel
+// a post flair (Needs help, Discussion, Show and tell, News, Resource,
+// Announcement), GitHub Discussions ships the same list as its default
+// categories (Announcements, General, Ideas, Polls, Q&A, Show and tell) and
+// Discord servers name them #announcements #general #help #showcase #jobs.
+// Recurring threads are Reddit's other invention: the monthly Who's hiring,
+// the weekly easy-questions thread, Showoff Saturday. Rules and a Read-first
+// wiki are the sidebar on every subreddit. daily.dev already has the parts:
+// post types, posting gates, scheduled posts, pinning, the welcome post.
+
+const page = (
+  id: string,
+  label: string,
+  type: PageType,
+  extra: Partial<SquadPage> = {},
+): SquadPage => ({ id, label, type, ...extra });
+
+export const channels = {
+  discussions: page('discussions', 'Discussions', PageType.Channel, {
+    description:
+      'Questions, opinions, feedback, bug reports. If it needs an answer, it lives here.',
+  }),
+  polls: page('polls', 'Polls', PageType.Polls, { badge: 1 }),
+};
+
+export const docs = {
+  rules: page('rules', 'Rules', PageType.Rules),
+  faq: page('faq', 'FAQ', PageType.Doc),
+};
+
+export const common = {
+  home: page('home', 'Home', PageType.Home),
+  members: page('members', 'Members', PageType.Members),
+  products: page('products', 'Products', PageType.Products),
+  releases: page('releases', 'Releases', PageType.Releases, { badge: 1 }),
+};
+
+/** Pages with no sidebar row: reached from a strip, a link, or a bad URL. */
+export const hidden = {
+  pending: page('pending', 'Pending posts', PageType.Pending),
+  invite: page('invite', 'Invitation', PageType.Invite),
+  notFound: page('not-found', 'Not found', PageType.NotFound),
+};
+
+const link = (id: string, label: string, href: string): SquadPage =>
+  page(id, label, PageType.Link, { href });
+
+export const manage: SidebarSection = {
+  id: 'manage',
+  label: 'Manage',
+  admin: true,
+  pages: [
+    page('feed', 'Content feed', PageType.Feed, { adminOnly: true }),
+    page('moderation', 'Moderation', PageType.Moderation, { badge: 3 }),
+    page('analytics', 'Analytics', PageType.Analytics, { adminOnly: true }),
+    page('settings', 'Settings', PageType.Settings, { adminOnly: true }),
+  ],
+};
+
+export {
+  ContentSource,
+  defaultConfig,
+  MemberRole,
+  PostingGate,
+  postingState,
+  useWorkspace,
+  WorkspaceContext,
+} from './state';
+export type { SquadConfig, WorkspaceState } from './state';
+
+export const sections: SidebarSection[] = [
+  {
+    id: 'top',
+    pages: [common.home, common.releases, common.products],
+  },
+  {
+    id: 'channels',
+    label: 'Channels',
+    pages: [channels.discussions, channels.polls],
+  },
+  {
+    id: 'docs',
+    label: 'Documentation',
+    pages: [docs.rules, docs.faq],
+  },
+  {
+    id: 'links',
+    label: 'Links',
+    pages: companyLinks.map((item) => link(item.id, item.label, item.href)),
+  },
+  manage,
+];
+
+export const pageIcon = (type: PageType, size = IconSize.Small): ReactElement =>
+  ({
+    [PageType.Home]: <HomeIcon size={size} />,
+    [PageType.Channel]: <MegaphoneIcon size={size} />,
+    [PageType.Releases]: <SparkleIcon size={size} secondary />,
+    [PageType.Polls]: <PollIcon size={size} />,
+    [PageType.Doc]: <DocsIcon size={size} />,
+    [PageType.Rules]: <DocsIcon size={size} />,
+    [PageType.Link]: <LinkIcon size={size} />,
+    [PageType.Products]: <CardIcon size={size} />,
+    [PageType.Members]: <UserIcon size={size} />,
+    [PageType.Analytics]: <AnalyticsIcon size={size} />,
+    [PageType.Moderation]: <TimerIcon size={size} />,
+    [PageType.Settings]: <SettingsIcon size={size} />,
+    [PageType.Feed]: <MegaphoneIcon size={size} />,
+    [PageType.Add]: <PlusIcon size={size} />,
+    [PageType.Pending]: <TimerIcon size={size} />,
+    [PageType.Invite]: <AddUserIcon size={size} />,
+    [PageType.NotFound]: <SearchIcon size={size} />,
+  }[type]);
+
+/** Channels get their own glyphs; everything else keeps the type's. */
+const channelIcons: Record<string, ReactElement> = {
+  discussions: <DiscussIcon size={IconSize.Small} />,
+  polls: <PollIcon size={IconSize.Small} />,
+};
+
+export const iconFor = (item: SquadPage): ReactElement =>
+  channelIcons[item.id] ??
+  (item.type === PageType.Link ? linkIcon(item.id) : pageIcon(item.type));
+
+/* ------------------------------------------------------------------ shell */
+
+const shellCss = `
+.ws-scroll { scrollbar-width: thin; scrollbar-color: var(--theme-border-subtlest-tertiary) transparent; }
+.ws-item .ws-item-tools { opacity: 0; }
+.ws-active::before {
+  content: '';
+  position: absolute;
+  left: -0.5rem;
+  top: 0.4rem;
+  bottom: 0.4rem;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--theme-accent-cabbage-default);
+}
+.ws-item:hover .ws-item-tools { opacity: 1; }
+.ws-cover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, color-mix(in srgb, var(--theme-background-default), transparent 20%), transparent 60%);
+}
+`;
+
+export const WorkspaceStyles = (): ReactElement => (
+  // eslint-disable-next-line react/no-danger
+  <style dangerouslySetInnerHTML={{ __html: shellCss }} />
+);
+
+/** Production's sidebar outside layout v2, collapsed to its icons. */
+export const Rail = ({ loggedIn }: { loggedIn?: boolean }): ReactElement => (
+  <ClassicSidebar loggedIn={loggedIn} />
+);
+
+/* ------------------------------------------------------------------ pages */
+
+/**
+ * Set by a page that already sizes its content column (the direction's
+ * sub-pages): every page then fills it with the same padding instead of
+ * its own width cap.
+ */
+export const ColumnFitContext = createContext(false);
+
+export const Column = ({
+  children,
+  width = 'max-w-[46rem]',
+  bare = false,
+  className,
+}: {
+  children: ReactNode;
+  width?: string;
+  /** Inside another page's column: no width cap or padding of its own. */
+  bare?: boolean;
+  className?: string;
+}): ReactElement => {
+  const fit = useContext(ColumnFitContext);
+
+  return (
+    <div
+      className={classNames(
+        'flex w-full flex-col gap-5',
+        !bare && 'mx-auto px-4 py-6 tablet:px-6',
+        !bare && !fit && width,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * A channel is the squad feed filtered to one flair, with a posting rule of
+ * its own. The strip under the bar says what belongs here and who may post,
+ * the way a subreddit's flair description and posting rule do.
+ */
+export const ChannelPage = ({
+  page: channel,
+  viewer,
+}: {
+  page: SquadPage;
+  viewer: Viewer;
+}): ReactElement => {
+  const canPost = isStaff(viewer) || (isJoined(viewer) && !channel.restricted);
+
+  return (
+    <Column>
+      {channel.description && (
+        <div className="flex items-center justify-between gap-4 rounded-12 bg-surface-float px-4 py-3">
+          <span className="text-text-secondary typo-footnote">
+            {channel.description}
+          </span>
+          {canPost ? (
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Small}
+              icon={<PlusIcon />}
+            >
+              Post to {channel.label}
+            </Button>
+          ) : (
+            <span className="flex shrink-0 items-center gap-1 text-text-quaternary typo-caption1">
+              <LockIcon size={IconSize.XSmall} />
+              {channel.restricted
+                ? 'Team only'
+                : isLoggedIn(viewer)
+                ? 'Join to post'
+                : 'Sign up to post'}
+            </span>
+          )}
+        </div>
+      )}
+      <PostsToolbar sort="Latest" />
+      <CardList entries={feedEntries.slice(0, 5)} />
+    </Column>
+  );
+};
+
+/** Reddit's rules widget, as a page: numbered, one line each, with the why. */
+export const RulesPage = (): ReactElement => {
+  const fit = useContext(ColumnFitContext);
+
+  return (
+    <Column width="max-w-[44rem]" className="gap-6">
+      <div className="flex flex-col gap-1">
+        {!fit && (
+          <h1 className="font-bold text-text-primary typo-large-title">
+            Rules
+          </h1>
+        )}
+        <p className="text-text-tertiary typo-callout">
+          Shown once before your first post. Moderators remove what breaks them.
+        </p>
+      </div>
+      <ol className="flex flex-col gap-5">
+        {rules.map(([title, body], index) => (
+          <li key={title} className="flex gap-4">
+            <span className="sq-nums w-5 shrink-0 font-bold text-text-quaternary typo-callout">
+              {index + 1}
+            </span>
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="font-bold text-text-primary typo-callout">
+                {title}
+              </span>
+              <span className="text-text-tertiary typo-footnote">{body}</span>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </Column>
+  );
+};
+
+/** A freeform post, rendered as a page: the FAQ, or any document. */
+export const DocPage = ({ page }: { page: SquadPage }): ReactElement => {
+  const fit = useContext(ColumnFitContext);
+
+  return (
+    <Column width="max-w-[44rem]" className="gap-6">
+      {!fit && (
+        <h1 className="font-bold text-text-primary typo-large-title">
+          {page.id === 'start-here'
+            ? `Welcome to ${squad.name}`
+            : page.id === 'rules'
+            ? 'Rules and how to post'
+            : 'Frequently asked questions'}
+        </h1>
+      )}
+      <p className="text-text-secondary typo-body">
+        {page.id === 'start-here'
+          ? `Everything the ${squad.name} team ships, announced here first. Releases, betas, the reasoning behind changes, and a place to tell us what broke.`
+          : page.id === 'rules'
+          ? 'This Squad is a changelog. Posts from the team are announcements; posts from members are questions, bug reports and feedback about a release.'
+          : 'Answers to the questions we get every week, kept current by the team.'}
+      </p>
+      <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-16 bg-surface-float">
+        <img
+          src={feedEntries[0].image ?? ''}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover opacity-60"
+        />
+        <span className="sq-elevated relative flex size-14 items-center justify-center rounded-full bg-background-default text-text-primary">
+          <PlayIcon size={IconSize.Medium} />
+        </span>
+      </div>
+      <h2 className="font-bold text-text-primary typo-title3">
+        Where to start
+      </h2>
+      <ul className="flex list-disc flex-col gap-1.5 pl-5 text-text-secondary typo-body">
+        <li>
+          Read <span className="text-text-link">Announcements</span> for what
+          shipped this week.
+        </li>
+        <li>Turn on notifications for the Squad so a release finds you.</li>
+        <li>
+          Something broke? Post it to Home with the{' '}
+          <span className="font-bold">#bug</span> tag and a team member picks it
+          up.
+        </li>
+      </ul>
+      <h2 className="font-bold text-text-primary typo-title3">Get involved</h2>
+      <ul className="flex list-disc flex-col gap-1.5 pl-5 text-text-secondary typo-body">
+        <li>
+          Ask in <span className="text-text-link">Discussions</span>; the team
+          answers there.
+        </li>
+        <li>
+          The public API is open:{' '}
+          <span className="text-text-link">docs.coderabbit.ai</span>.
+        </li>
+      </ul>
+      <div className="flex items-center gap-2 border-t border-border-subtlest-tertiary pt-4 text-text-quaternary typo-footnote">
+        <Avatar member={team[3]} size={1.25} />
+        Maintained by {team[3].name} · Updated 2 days ago
+      </div>
+    </Column>
+  );
+};
+
+const noop = () => undefined;
+export const cardHandlers = {
+  onPostClick: noop,
+  onPostAuxClick: noop,
+  onUpvoteClick: noop,
+  onDownvoteClick: noop,
+  onCommentClick: noop,
+  onBookmarkClick: noop,
+  onCopyLinkClick: noop,
+  onShare: noop,
+  onReadArticleClick: noop,
+};
+
+const pollSource = {
+  id: squad.handle,
+  handle: squad.handle,
+  name: squad.name,
+  permalink: squad.permalink,
+  image: squad.image,
+  type: 'squad' as const,
+  active: true,
+  public: true,
+};
+
+/** A quiz question as a real poll post, so the production poll card renders it. */
+export const toPollPost = (poll: SquadPoll, picked?: number): Post =>
+  ({
+    id: poll.id,
+    title: poll.question,
+    permalink: `https://daily.dev/posts/${poll.id}`,
+    commentsPermalink: `https://daily.dev/posts/${poll.id}`,
+    createdAt: '2026-09-20T09:00:00.000Z',
+    endsAt: poll.endsAt,
+    type: PostType.Poll,
+    source: pollSource,
+    author: {
+      id: poll.author.id,
+      name: poll.author.name,
+      username: poll.author.username,
+      image: poll.author.image,
+      permalink: `https://daily.dev/${poll.author.username}`,
+    },
+    numUpvotes: 31,
+    numComments: 12,
+    numPollVotes: poll.votes,
+    pollOptions: poll.options.map((text, index) => ({
+      id: `${poll.id}-${index}`,
+      text,
+      order: index + 1,
+      numVotes: Math.round((poll.split[index] / 100) * poll.votes),
+    })),
+    tags: ['coderabbit'],
+    userState: {
+      vote: UserVote.None,
+      flags: { feedbackDismiss: false },
+      ...(picked !== undefined && {
+        pollOption: { id: `${poll.id}-${picked}` },
+      }),
+    },
+  } as unknown as Post);
+
+/**
+ * One poll in the feed, on the production poll card. The click is caught
+ * before the card's own vote mutation so the story stays offline.
+ */
+export const FeedPoll = ({
+  viewer,
+  poll,
+}: {
+  viewer: Viewer;
+  poll: SquadPoll;
+}): ReactElement => {
+  const [picked, setPicked] = useState<number>();
+
+  return (
+    <div
+      onClickCapture={(event) => {
+        if (picked !== undefined || !isJoined(viewer)) {
+          return;
+        }
+        const option = (event.target as HTMLElement)
+          .closest('button')
+          ?.textContent?.trim();
+        const index = poll.options.indexOf(option ?? '');
+        if (index === -1) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setPicked(index);
+      }}
+    >
+      <PollList post={toPollPost(poll, picked)} {...cardHandlers} />
+    </div>
+  );
+};
+
+const importSources = ['Product Hunt', 'G2', 'Trustpilot', 'GitHub', 'A URL'];
+
+/**
+ * Everything the company makes, on one page. Listings are imported, not
+ * typed: paste a Product Hunt, G2, Trustpilot or GitHub link and the card
+ * arrives with the logo, tagline, category and the source's rating.
+ */
+export const ProductsPage = ({ viewer }: { viewer: Viewer }): ReactElement => (
+  <Column width="max-w-[56rem]">
+    <p className="max-w-[52ch] text-text-secondary typo-callout">
+      Everything {squad.name} makes.
+    </p>
+    {/* Product Hunt's list: logo, name and tagline, then the chips. */}
+    <ol className="flex flex-col gap-6">
+      {products.map((product) => (
+        <li key={product.id} className="group flex items-start gap-4">
+          <img
+            src={product.image}
+            alt=""
+            className="size-12 shrink-0 self-start rounded-12 bg-background-default object-cover"
+          />
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="font-bold text-text-primary typo-callout">
+              {product.name}
+            </span>
+            <span className="line-clamp-2 text-text-secondary typo-footnote">
+              {product.tagline}
+            </span>
+            <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-text-tertiary typo-caption1">
+              {product.rating && (
+                <span className="sq-nums flex items-center gap-1">
+                  <StarIcon
+                    size={IconSize.XSmall}
+                    secondary
+                    className="text-text-primary"
+                  />
+                  <span className="text-text-primary">
+                    {product.rating.toFixed(1)}
+                  </span>
+                  {formatCount(product.reviews ?? 0)} on {product.source}
+                </span>
+              )}
+              <span className="rounded-6 bg-surface-float px-1.5 py-0.5">
+                {product.category}
+              </span>
+              <span className="rounded-6 bg-surface-float px-1.5 py-0.5">
+                {product.pricing}
+              </span>
+              {product.links.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="flex items-center gap-1 hover:text-text-primary"
+                >
+                  <OpenLinkIcon size={IconSize.XSmall} />
+                  {item.label}
+                </a>
+              ))}
+            </span>
+          </div>
+        </li>
+      ))}
+    </ol>
+  </Column>
+);
+
+enum MemberTab {
+  All = 'Members',
+  Moderators = 'Moderators',
+  Blocked = 'Blocked',
+}
+
+const roleActions: Record<string, string[]> = {
+  Admin: ['Demote to moderator', 'Demote to member'],
+  Moderator: ['Make admin', 'Demote to member'],
+  Member: ['Make admin', 'Promote to moderator'],
+};
+
+/* The team snapshot is all admins and moderators; the tail plays members. */
+const roleOf = (member: (typeof team)[number]): string =>
+  team.indexOf(member) >= 5 ? 'Member' : member.role;
+
+/**
+ * Production's SquadMemberModal as a page: three tabs (Blocked for staff
+ * only), search, Copy invitation link first when the viewer may invite,
+ * a role badge on every row, and the per-member menu for staff.
+ */
+export const MembersPage = ({ viewer }: { viewer: Viewer }): ReactElement => {
+  const { config } = useWorkspace();
+  const [tab, setTab] = useState<MemberTab>(MemberTab.All);
+  const [menu, setMenu] = useState<string | null>(null);
+  const staff = isStaff(viewer);
+  const canInvite =
+    isJoined(viewer) &&
+    (staff || config.memberInviteRole === MemberRole.Member);
+  const tabs = [
+    MemberTab.All,
+    MemberTab.Moderators,
+    ...(staff ? [MemberTab.Blocked] : []),
+  ];
+  const blocked = team.slice(6, 8);
+  const rows =
+    tab === MemberTab.Blocked
+      ? blocked
+      : tab === MemberTab.Moderators
+      ? team.filter((member) => roleOf(member) !== 'Member')
+      : team;
+
+  return (
+    <Column>
+      <SquadDirectoryNavbar
+        aria-label="Members filters"
+        className="!mx-0 !border-0 !px-0"
+      >
+        {tabs.map((item) => (
+          <SquadDirectoryNavbarItem
+            key={item}
+            buttonSize={ButtonSize.Small}
+            isActive={tab === item}
+            label={item}
+            ariaLabel={item}
+            onClick={() => setTab(item)}
+          />
+        ))}
+      </SquadDirectoryNavbar>
+      <SearchField
+        inputId="members-search"
+        placeholder={`Search ${tab.toLowerCase()}`}
+        aria-label={`Search ${tab.toLowerCase()}`}
+      />
+      <span className="text-text-tertiary typo-footnote">
+        <b className="sq-nums text-text-primary">
+          {tab === MemberTab.Blocked
+            ? blocked.length
+            : tab === MemberTab.Moderators
+            ? rows.length
+            : formatCount(squad.membersCount)}
+        </b>{' '}
+        {tab.toLowerCase()}
+      </span>
+      {rows.length === 0 ? (
+        <BlockedMembersPlaceholder />
+      ) : (
+        <div className="flex flex-col gap-4">
+          {canInvite && tab !== MemberTab.Blocked && (
+            <button
+              type="button"
+              className="flex items-center gap-3 text-left text-text-primary typo-callout hover:text-text-secondary"
+            >
+              <span className="flex size-10 items-center justify-center rounded-12 bg-surface-float text-text-secondary">
+                <AddUserIcon size={IconSize.Medium} />
+              </span>
+              Copy invitation link
+            </button>
+          )}
+          {rows.map((member) => (
+            <div key={member.id} className="relative flex items-center gap-3">
+              <Avatar member={member} size={2.5} />
+              <div className="flex min-w-0 flex-1 flex-col">
+                <span className="flex min-w-0 items-center gap-2 font-bold text-text-primary typo-callout">
+                  <span className="truncate">{member.name}</span>
+                  {tab !== MemberTab.Blocked && roleOf(member) !== 'Member' && (
+                    <UserBadge
+                      role={
+                        roleOf(member) === 'Admin'
+                          ? SourceMemberRole.Admin
+                          : SourceMemberRole.Moderator
+                      }
+                      className="font-normal"
+                    >
+                      {roleOf(member).toLowerCase()}
+                    </UserBadge>
+                  )}
+                </span>
+                <span className="truncate text-text-tertiary typo-footnote">
+                  @{member.username}
+                </span>
+              </div>
+              {tab === MemberTab.Blocked ? (
+                staff && (
+                  <Button
+                    variant={ButtonVariant.Tertiary}
+                    size={ButtonSize.Small}
+                    icon={<BlockIcon />}
+                    aria-label="Unblock"
+                    title="Unblock"
+                  />
+                )
+              ) : staff ? (
+                <Button
+                  variant={ButtonVariant.Tertiary}
+                  size={ButtonSize.Small}
+                  icon={<MenuIcon />}
+                  aria-label="Member options"
+                  onClick={() => setMenu(menu === member.id ? null : member.id)}
+                />
+              ) : (
+                <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+                  Follow
+                </Button>
+              )}
+              {menu === member.id && (
+                <ul className="sq-elevated absolute right-4 top-full z-popup -mt-1 flex w-56 flex-col rounded-12 bg-background-default p-1">
+                  {[
+                    ...(isAdmin(viewer)
+                      ? roleActions[roleOf(member)] ?? []
+                      : []),
+                    'Report member',
+                    'Block member',
+                    'Gift daily.dev Plus',
+                  ].map((label) => (
+                    <li key={label}>
+                      <button
+                        type="button"
+                        onClick={() => setMenu(null)}
+                        className={classNames(
+                          'flex w-full items-center rounded-8 px-2 py-1.5 text-left typo-callout hover:bg-surface-float',
+                          label === 'Block member'
+                            ? 'text-status-error'
+                            : 'text-text-secondary hover:text-text-primary',
+                        )}
+                      >
+                        {label}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </Column>
+  );
+};
+
+const pendingPosts = pendingQueue;
+
+/**
+ * Production's moderation queue for a moderator: Approve all above two or
+ * more, spam warnings, the poll item, Decline with its reason list, and
+ * the all-done state.
+ */
+export const ModerationPage = (): ReactElement => {
+  const { empty } = useWorkspace();
+  const [declining, setDeclining] = useState<string | null>(null);
+
+  if (empty) {
+    return (
+      <Column>
+        <SquadEmptyScreen
+          Icon={VIcon}
+          title="All done!"
+          description="All caught up! There are no posts waiting for your review right now."
+        />
+      </Column>
+    );
+  }
+
+  return (
+    <Column>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <span className="min-w-0 flex-1 basis-60 text-text-secondary typo-callout">
+          <b className="sq-nums text-text-primary">{moderationQueueCount}</b>{' '}
+          posts waiting. Approve and they go live; decline and the author hears
+          why.
+        </span>
+        <Button
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Small}
+          icon={<VIcon secondary />}
+        >
+          Approve all {moderationQueueCount} posts
+        </Button>
+      </div>
+      <div className="flex flex-col gap-8">
+        {[...pendingPosts, null].map((entry, index) => {
+          const key = entry?.id ?? 'poll';
+          const author = entry?.author ?? polls[1].author;
+          return (
+            <div key={key} className="flex flex-col gap-3">
+              {index === 0 && (
+                <span className="flex items-center gap-2 rounded-12 bg-surface-float px-3 py-2 text-text-secondary typo-footnote">
+                  <WarningIcon
+                    size={IconSize.Small}
+                    className="shrink-0 text-status-warning"
+                  />
+                  Shared in multiple Squads · Spam alert
+                </span>
+              )}
+              <div className="flex items-center gap-3">
+                <Avatar member={author} size={2.5} />
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <span className="font-bold text-text-primary typo-footnote">
+                    {author.name}
+                  </span>
+                  <span className="text-text-tertiary typo-caption1">
+                    {entry ? formatDay(entry.createdAt) : 'Today'}
+                    {index === 2 && ' · Resubmitted Post'}
+                    {!entry && ' · Poll'}
+                  </span>
+                </div>
+              </div>
+              {entry ? (
+                <div className="flex gap-4">
+                  <div className="flex min-w-0 flex-1 flex-col gap-1">
+                    <span className="font-bold text-text-primary typo-callout">
+                      {entry.title}
+                    </span>
+                    <span className="line-clamp-2 text-text-tertiary typo-footnote">
+                      {entry.summary}
+                    </span>
+                  </div>
+                  {entry.image && (
+                    <img
+                      src={entry.image}
+                      alt=""
+                      className="h-16 w-28 shrink-0 rounded-10 object-cover"
+                    />
+                  )}
+                </div>
+              ) : (
+                <div className="flex flex-col gap-2">
+                  <span className="font-bold text-text-primary typo-callout">
+                    {polls[1].question}
+                  </span>
+                  <ul className="flex flex-col gap-1">
+                    {polls[1].options.map((option) => (
+                      <li
+                        key={option}
+                        className="rounded-10 border border-border-subtlest-tertiary px-3 py-1.5 text-text-secondary typo-footnote"
+                      >
+                        {option}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              {declining === key ? (
+                <div className="flex flex-col gap-2 rounded-12 border border-border-subtlest-tertiary p-3">
+                  <span className="font-bold text-text-primary typo-footnote">
+                    Select a reason for declining
+                  </span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {rejectReasons.map((reason) => (
+                      <button
+                        key={reason}
+                        type="button"
+                        onClick={() => setDeclining(null)}
+                        className="rounded-[999px] border border-border-subtlest-tertiary px-2.5 py-1 text-text-secondary typo-caption1 hover:border-border-subtlest-primary hover:text-text-primary"
+                      >
+                        {reason}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <Button
+                    variant={ButtonVariant.Subtle}
+                    size={ButtonSize.Small}
+                    icon={<BlockIcon />}
+                    className="flex-1"
+                    onClick={() => setDeclining(key)}
+                  >
+                    Decline
+                  </Button>
+                  <Button
+                    variant={ButtonVariant.Primary}
+                    size={ButtonSize.Small}
+                    icon={<VIcon secondary />}
+                    className="flex-1"
+                  >
+                    Approve
+                  </Button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </Column>
+  );
+};
+
+const feedItems = feedEntries.slice(0, 4);
+
+/**
+ * The company page's engine. A verified page is a squad fed by the
+ * company's RSS: items land in Releases as posts, daily.dev runs the feed
+ * and the moderation, the company keeps the keys. This is the admin's view
+ * of that arrangement.
+ */
+export const FeedSourcePage = (): ReactElement => (
+  <Column width="max-w-[52rem]" className="gap-6">
+    <div className="flex flex-wrap items-start gap-x-3 gap-y-3">
+      <VerifiedMark label={false} />
+      <div className="flex min-w-0 flex-1 basis-56 flex-col">
+        <span className="font-bold text-text-primary typo-callout">
+          Managed by daily.dev
+        </span>
+        <span className="text-text-tertiary typo-footnote">
+          Your feed is imported, moderated and kept in sync by our team. You
+          keep the keys: pause, edit any post, or write your own.
+        </span>
+      </div>
+      <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+        Contact your manager
+      </Button>
+    </div>
+    <div className="h-px w-full bg-border-subtlest-tertiary" />
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <span className="font-bold text-text-primary typo-body">Source</span>
+        <span className="flex items-center gap-1.5 text-status-success typo-caption1">
+          <span className="size-1.5 rounded-full bg-status-success" />
+          Healthy
+        </span>
+      </div>
+      <dl className="grid grid-cols-1 gap-x-8 gap-y-3 tablet:grid-cols-2">
+        {[
+          ['Feed', squad.feedUrl],
+          ['Publishes to', 'The Squad feed, as posts'],
+          ['Checked', 'Every hour · last 2h ago'],
+          [
+            'Imported',
+            `${squad.totalPosts} items since ${formatSince(squad.createdAt)}`,
+          ],
+          ['Author on posts', 'The team member in the item, or the Squad'],
+          ['Auto-publish', 'On · new items go live without review'],
+        ].map(([label, value]) => (
+          <div key={label} className="flex flex-col gap-0.5">
+            <dt className="text-text-quaternary typo-caption1">{label}</dt>
+            <dd className="break-words text-text-primary typo-callout [overflow-wrap:anywhere]">
+              {value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <div className="flex flex-wrap gap-2">
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+          Sync now
+        </Button>
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+          Pause feed
+        </Button>
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+          Add a feed
+        </Button>
+      </div>
+    </div>
+    <div className="h-px w-full bg-border-subtlest-tertiary" />
+    <div className="flex flex-col gap-3">
+      <span className="font-bold text-text-primary typo-body">
+        Recent imports
+      </span>
+      <ol className="flex flex-col gap-3">
+        {feedItems.map((entry) => (
+          <li key={entry.id} className="flex items-center gap-3">
+            <span className="min-w-0 flex-1 truncate text-text-primary typo-callout">
+              {entry.title}
+            </span>
+            <span className="sq-nums shrink-0 text-text-quaternary typo-caption1">
+              {formatDay(entry.createdAt)}
+            </span>
+            <span className="shrink-0 rounded-6 bg-surface-float px-1.5 py-0.5 text-text-tertiary typo-caption2">
+              Published
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  </Column>
+);
+
+/**
+ * Production's Unauthorized screen, word for word: a private squad has no
+ * request-to-join, the invitation link is the only door. Shown to every
+ * non-member on every page but Home.
+ */
+export const PrivateWall = ({ viewer }: { viewer: Viewer }): ReactElement => (
+  <Column>
+    <div className="flex flex-col items-center gap-3 px-2 py-14 text-center">
+      <LockIcon
+        secondary
+        size={IconSize.XLarge}
+        className="text-text-secondary"
+      />
+      <span className="font-bold text-text-primary typo-title3">
+        Oops! This link leads to a private discussion
+      </span>
+      <span className="max-w-[44ch] text-text-tertiary typo-footnote">
+        You don&apos;t seem to have access to this page. Try to ask the person
+        who shared this link with you for permissions.
+      </span>
+      <div className="mt-2 flex gap-2">
+        <Button variant={ButtonVariant.Primary} size={ButtonSize.Medium}>
+          Back home
+        </Button>
+        {!isLoggedIn(viewer) && (
+          <Button variant={ButtonVariant.Subtle} size={ButtonSize.Medium}>
+            Log in
+          </Button>
+        )}
+      </div>
+    </div>
+  </Column>
+);
+
+/** Production's Custom404: a deleted squad, a bad handle. */
+export const NotFoundPage = (): ReactElement => (
+  <Column>
+    <div className="flex flex-col items-center gap-3 px-6 py-20 text-center">
+      <span className="font-bold text-text-primary typo-mega3">
+        Why are you here?
+      </span>
+      <span className="text-text-tertiary typo-body">
+        You&apos;re not supposed to be here.
+      </span>
+      <div className="mt-3 flex gap-2">
+        <Button variant={ButtonVariant.Primary} size={ButtonSize.Medium}>
+          Go home
+        </Button>
+        <Button variant={ButtonVariant.Subtle} size={ButtonSize.Medium}>
+          Find Squads
+        </Button>
+      </div>
+    </div>
+  </Column>
+);
+
+/**
+ * Production's /squads/[handle]/[token], the invitation landing: the
+ * inviter, the squad card, Join, and who is waiting inside. A member is
+ * redirected past it; a blocked user is told at the door.
+ */
+export const InvitePage = ({ viewer }: { viewer: Viewer }): ReactElement => {
+  const inviter = team[2];
+  const others = team.filter((member) => member.id !== inviter.id);
+
+  return (
+    <Column
+      width="max-w-[40rem]"
+      className="items-center gap-6 py-12 text-center"
+    >
+      <h1 className="font-bold text-text-primary typo-title1">
+        You are invited to join {squad.name}
+      </h1>
+      <p className="text-text-tertiary typo-body">
+        {squad.name} is your place to stay up to date as a Squad. You and other
+        members can share knowledge and content in one place. Join now to start
+        collaborating.
+      </p>
+      <div className="flex items-center gap-4 text-left">
+        <Avatar member={inviter} size={2.5} />
+        <p className="min-w-0 flex-1 text-text-tertiary typo-body">
+          <b className="text-text-primary">{inviter.name}</b>{' '}
+          <span className="text-text-link">(@{inviter.username})</span> has
+          invited you to <b className="text-text-primary">{squad.name}</b>
+        </p>
+      </div>
+      <div className="flex w-full flex-col items-center gap-4 rounded-24 border border-accent-cabbage-default p-6 text-center tablet:flex-row tablet:text-left">
+        <img
+          src={squad.image}
+          alt=""
+          className="size-16 shrink-0 rounded-full"
+        />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="flex items-center gap-1 font-bold text-text-primary typo-body">
+            {squad.name}
+            <VerifiedMark label={false} />
+          </span>
+          <span className="text-text-tertiary typo-callout">
+            @{squad.handle}
+          </span>
+          <span className="mt-2 text-text-tertiary typo-callout">
+            {squad.description}
+          </span>
+        </div>
+        {isJoined(viewer) ? (
+          <Button variant={ButtonVariant.Secondary} size={ButtonSize.Large}>
+            Open Squad
+          </Button>
+        ) : (
+          <Button
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Large}
+            disabled={isBlocked(viewer)}
+          >
+            Join Squad
+          </Button>
+        )}
+      </div>
+      {isBlocked(viewer) && (
+        <span className="rounded-12 bg-surface-float px-4 py-2 text-text-secondary typo-callout">
+          🚫 You no longer have access to this Squad.
+        </span>
+      )}
+      {isJoined(viewer) && (
+        <span className="rounded-12 bg-surface-float px-4 py-2 text-text-secondary typo-callout">
+          You are already a member. Production sends you straight to the Squad.
+        </span>
+      )}
+      <p className="text-text-tertiary typo-body">
+        {inviter.name} and {formatCount(squad.membersCount - 1)} others are
+        waiting for you inside. Join them now!
+      </p>
+      <Facepile members={others} max={8} size={2} />
+      {!isLoggedIn(viewer) && (
+        <span className="text-text-quaternary typo-caption1">
+          Join Squad opens sign up first; the invitation is kept through it.
+        </span>
+      )}
+    </Column>
+  );
+};
+
+/* ------------------------------------------------------------- settings */
+
+interface SettingsOption {
+  value: string;
+  label: string;
+  hint?: string;
+  /** Shown under the option while it is picked, like the category under Public. */
+  after?: ReactNode;
+}
+
+const SettingsRadio = ({
+  name,
+  options,
+  value,
+  onChange,
+  disabled = false,
+}: {
+  name: string;
+  options: SettingsOption[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}): ReactElement => (
+  <Radio
+    name={name}
+    value={value}
+    onChange={onChange}
+    disabled={disabled}
+    className={{
+      container: '!gap-3',
+      content: '!items-start !whitespace-normal !pr-0',
+      label: 'min-w-0 flex-1',
+    }}
+    options={options.map((option) => ({
+      value: option.value,
+      afterElement: option.after && value === option.value && (
+        <div className="ml-9 mt-2">{option.after}</div>
+      ),
+      label: (
+        <span className="flex flex-col gap-0.5 pt-1.5">
+          <span
+            className={classNames(
+              'typo-callout',
+              disabled ? 'text-text-disabled' : 'text-text-primary',
+            )}
+          >
+            {option.label}
+          </span>
+          {option.hint && (
+            <span className="text-text-tertiary typo-footnote">
+              {option.hint}
+            </span>
+          )}
+        </span>
+      ),
+    }))}
+  />
+);
+
+const SettingsSection = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}): ReactElement => (
+  <section className="flex flex-col gap-4">
+    <div className="flex flex-col gap-1">
+      <Typography type={TypographyType.Body} bold>
+        {title}
+      </Typography>
+      {description && (
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+        >
+          {description}
+        </Typography>
+      )}
+    </div>
+    {children}
+  </section>
+);
+
+export const ImageActions = ({
+  label,
+  className,
+  removable = true,
+}: {
+  label: string;
+  className?: string;
+  /** False while nothing is uploaded yet. */
+  removable?: boolean;
+}): ReactElement => (
+  <div className={classNames('flex gap-2', className)}>
+    <Button
+      type="button"
+      className="bg-shadow-shadow3"
+      variant={ButtonVariant.Float}
+      size={ButtonSize.Small}
+      icon={<CameraIcon size={IconSize.Medium} />}
+      aria-label={`Upload ${label}`}
+    />
+    {removable && (
+      <Button
+        type="button"
+        className="bg-shadow-shadow3"
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        icon={<ClearIcon size={IconSize.Medium} />}
+        aria-label={`Remove ${label}`}
+      />
+    )}
+  </div>
+);
+
+const SettingsRow = ({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  action: ReactNode;
+}): ReactElement => (
+  <div className="flex items-center gap-4">
+    <span className="flex size-10 shrink-0 items-center justify-center rounded-12 bg-surface-float">
+      {icon}
+    </span>
+    <div className="flex min-w-0 flex-1 flex-col gap-1">
+      <Typography type={TypographyType.Callout} bold>
+        {title}
+      </Typography>
+      <Typography
+        type={TypographyType.Footnote}
+        color={TypographyColor.Tertiary}
+        className="[overflow-wrap:anywhere]"
+      >
+        {description}
+      </Typography>
+    </div>
+    {action}
+  </div>
+);
+
+const squadCategories = [
+  'Developer tools',
+  'Web development',
+  'DevOps and cloud',
+  'AI and machine learning',
+  'Mobile',
+  'Open source',
+  'Career',
+  'Fun',
+];
+
+/**
+ * Production's Squad settings (Details.tsx and the settings sections),
+ * laid out like the profile settings pages: a bold title and a short
+ * description per section, separators between them.
+ */
+export type SettingsPart = 'details' | 'posting' | 'integrations' | 'danger';
+
+export const SettingsPage = ({
+  only,
+}: {
+  /** One part of the settings, for the Manage area; all of them otherwise. */
+  only?: SettingsPart;
+} = {}): ReactElement => {
+  const shows = (part: SettingsPart): boolean => !only || only === part;
+  const { config, source } = useWorkspace();
+  const [state, setState] = useState(config);
+  const membersOnly = state.memberPostingRole === MemberRole.Moderator;
+  const roleOptions = [
+    { value: MemberRole.Member, label: 'All members (recommended)' },
+    { value: MemberRole.Moderator, label: 'Only moderators' },
+  ];
+  const parts: ReactNode[] = [];
+
+  if (shows('details')) {
+    parts.push(
+      <div key="identity" className="flex flex-col gap-6">
+        <div className="relative mb-10">
+          <div className="group relative h-24 w-full">
+            <div className="relative h-full w-full overflow-hidden rounded-16">
+              <img
+                src={squad.headerImage}
+                alt="Squad cover"
+                className={classNames(
+                  'h-full w-full object-cover',
+                  squad.headerImagePosition === 'top' && 'object-top',
+                  squad.headerImagePosition === 'bottom' && 'object-bottom',
+                )}
+              />
+            </div>
+            <ImageActions
+              label="cover"
+              className="absolute right-6 top-1/2 -translate-y-1/2"
+            />
+          </div>
+          <div className="absolute bottom-0 left-6 size-[7.5rem] translate-y-1/2">
+            <div className="size-full overflow-hidden rounded-full bg-background-default">
+              <img
+                src={squad.image}
+                alt="Squad image"
+                className="size-full object-cover"
+              />
+            </div>
+            <ImageActions
+              label="image"
+              className="absolute inset-0 items-center justify-center"
+            />
+          </div>
+        </div>
+        <div className="mt-6 flex flex-col gap-4">
+          <TextField
+            inputId="squad-name"
+            name="name"
+            label="Squad name"
+            leftIcon={<SquadIcon />}
+            defaultValue={squad.name}
+            className={{ container: 'w-full' }}
+          />
+          <TextField
+            inputId="squad-handle"
+            name="handle"
+            label="Squad handle"
+            leftIcon={<AtIcon />}
+            defaultValue={squad.handle}
+            hint={`daily.dev/squads/${squad.handle}`}
+            className={{ container: 'w-full' }}
+          />
+          <Textarea
+            inputId="squad-description"
+            name="description"
+            label="Squad description"
+            defaultValue={squad.description}
+            rows={3}
+            maxLength={250}
+          />
+        </div>
+      </div>,
+      <SettingsSection
+        key="type"
+        title="Squad type"
+        description="Who can find the page and read it."
+      >
+        <SettingsRadio
+          name="squad-type"
+          value={state.isPublic ? 'public' : 'private'}
+          onChange={(value) =>
+            setState((current) => ({
+              ...current,
+              isPublic: value === 'public',
+            }))
+          }
+          options={[
+            {
+              value: 'public',
+              label: 'Public',
+              hint: 'Listed in the directory and open to anyone.',
+              after: (
+                <Dropdown
+                  placeholder="Select category"
+                  className={{ container: 'w-56' }}
+                  options={squadCategories}
+                  selectedIndex={squadCategories.indexOf(state.category ?? '')}
+                  onChange={(value) =>
+                    setState((current) => ({ ...current, category: value }))
+                  }
+                />
+              ),
+            },
+            {
+              value: 'private',
+              label: 'Private',
+              hint: 'Invite only and hidden from the directory.',
+            },
+          ]}
+        />
+      </SettingsSection>,
+    );
+  }
+
+  if (shows('posting')) {
+    parts.push(
+      <SettingsSection
+        key="post"
+        title="Who can post"
+        description="Admins and moderators can always post."
+      >
+        <SettingsRadio
+          name="post-role"
+          value={state.memberPostingRole}
+          onChange={(value) =>
+            setState((current) => ({
+              ...current,
+              memberPostingRole: value as MemberRole,
+              postingGate:
+                value === MemberRole.Moderator
+                  ? PostingGate.None
+                  : current.postingGate,
+            }))
+          }
+          options={roleOptions}
+        />
+      </SettingsSection>,
+      <SettingsSection
+        key="requirements"
+        title="Posting requirements"
+        description={
+          membersOnly
+            ? 'Only admins and moderators can post, so their posts publish right away.'
+            : 'Whether a member’s post is reviewed before it goes live.'
+        }
+      >
+        <SettingsRadio
+          name="post-gate"
+          disabled={membersOnly}
+          value={state.postingGate}
+          onChange={(value) =>
+            setState((current) => ({
+              ...current,
+              postingGate: value as PostingGate,
+            }))
+          }
+          options={[
+            {
+              value: PostingGate.None,
+              label: 'Anyone can post',
+              hint: 'All members can post. No review.',
+            },
+            {
+              value: PostingGate.Moderation,
+              label: 'Require post approval',
+              hint: 'All members can post. Every post is reviewed.',
+            },
+            {
+              value: PostingGate.Reputation,
+              label: 'Require a minimum reputation',
+              hint: 'Only members with enough reputation can post. No review.',
+            },
+          ]}
+        />
+        {state.postingGate === PostingGate.Reputation && !membersOnly && (
+          <TextField
+            inputId="squad-min-reputation"
+            name="minReputation"
+            label="Minimum reputation"
+            type="number"
+            defaultValue={String(state.postingMinReputation)}
+            className={{ container: 'max-w-60' }}
+          />
+        )}
+      </SettingsSection>,
+      <SettingsSection
+        key="invite"
+        title="Who can invite"
+        description="Who can send invitation links to the page."
+      >
+        <SettingsRadio
+          name="invite-role"
+          value={state.memberInviteRole}
+          onChange={(value) =>
+            setState((current) => ({
+              ...current,
+              memberInviteRole: value as MemberRole,
+            }))
+          }
+          options={roleOptions}
+        />
+      </SettingsSection>,
+    );
+  }
+
+  if (shows('integrations')) {
+    parts.push(
+      <SettingsSection
+        key="integrations"
+        title="Connected apps"
+        description="Send the page’s new posts to the tools your team already uses."
+      >
+        <div className="flex flex-col gap-6">
+          <SettingsRow
+            icon={<SlackIcon size={IconSize.Small} />}
+            title="Slack"
+            description={
+              config.slack
+                ? 'Posting new posts to #product-updates'
+                : 'Post every new post to a channel.'
+            }
+            action={
+              <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+                {config.slack ? 'Manage' : 'Connect'}
+              </Button>
+            }
+          />
+          {source === ContentSource.Feed && (
+            <SettingsRow
+              icon={<MegaphoneIcon size={IconSize.Small} />}
+              title="Content feed"
+              description="Your changelog RSS, checked every hour by daily.dev."
+              action={
+                <Button variant={ButtonVariant.Subtle} size={ButtonSize.Small}>
+                  Open
+                </Button>
+              }
+            />
+          )}
+        </div>
+      </SettingsSection>,
+    );
+  }
+
+  if (shows('danger')) {
+    parts.push(
+      <SettingsSection
+        key="danger"
+        title="Delete the Squad"
+        description="Deleting a Squad is permanent and can’t be undone."
+      >
+        <ul className="flex list-disc flex-col gap-2 pl-5 text-text-tertiary typo-callout">
+          <li>The Squad and its page are deleted.</li>
+          <li>
+            Every post, comment and upvote in it is deleted, yours and everyone
+            else&apos;s.
+          </li>
+          <li>The handle becomes free for anyone to take.</li>
+        </ul>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+        >
+          Questions first? Write to{' '}
+          <a className="text-text-link" href="mailto:support@daily.dev">
+            support@daily.dev
+          </a>
+          .
+        </Typography>
+        <Button
+          variant={ButtonVariant.Primary}
+          color={ButtonColor.Ketchup}
+          className="self-start"
+        >
+          Delete Squad
+        </Button>
+      </SettingsSection>,
+    );
+  }
+
+  return (
+    <Column width="max-w-[44rem]" className="gap-6">
+      {parts.map((part, index) => (
+        <React.Fragment key={(part as ReactElement).key}>
+          {index > 0 && <HorizontalSeparator />}
+          {part}
+        </React.Fragment>
+      ))}
+
+      {!only && (
+        <div className="sticky bottom-0 flex justify-end border-t border-border-subtlest-tertiary bg-background-default py-3">
+          <Button
+            variant={ButtonVariant.Primary}
+            color={ButtonColor.Cabbage}
+            size={ButtonSize.Medium}
+          >
+            Save
+          </Button>
+        </div>
+      )}
+    </Column>
+  );
+};
+
+/* ------------------------------------------------------------ analytics */
+
+const days = analyticsDays;
+
+/** Production's /squads/[handle]/analytics: two tiles, the chart, the list. */
+export const AnalyticsPage = (): ReactElement => {
+  const { config, empty } = useWorkspace();
+  const engagementIcons: Record<string, ReactElement> = {
+    Upvotes: <UpvoteIcon />,
+    'Upvotes ratio': <MergeIcon />,
+    Comments: <DiscussIcon />,
+    Bookmarks: <BookmarkIcon />,
+    Awards: <MedalBadgeIcon secondary />,
+    Shares: <ShareIcon />,
+    Clicks: <ClickIcon />,
+  };
+  const start = new Date(2026, 7, 11);
+  const impressions = days.map((day, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return {
+      name: date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      }),
+      value: day.organic + (config.campaign ? day.boosted : 0),
+      isBoosted: !!config.campaign && day.boosted > 0,
+    };
+  });
+
+  return (
+    <Column width="max-w-[48rem]" className="gap-6">
+      <section className="flex flex-col gap-4">
+        <Typography type={TypographyType.Body} bold>
+          Discovery (last 45 days)
+        </Typography>
+        <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2">
+          {analyticsDiscovery.map(([label, amount]) => (
+            <DataTile
+              key={label}
+              label={label}
+              value={empty ? 0 : amount}
+              info={
+                label === 'Impressions'
+                  ? 'The total number of times posts from this Squad were shown to developers across the platform'
+                  : 'The estimated number of unique developers who viewed posts from this Squad'
+              }
+              icon={
+                <EyeIcon size={IconSize.Small} className="text-text-tertiary" />
+              }
+            />
+          ))}
+        </div>
+      </section>
+      <HorizontalSeparator />
+      <section className="flex flex-col gap-4">
+        <Typography type={TypographyType.Body} bold>
+          Impressions over time
+        </Typography>
+        {empty ? (
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Secondary}
+          >
+            No impressions data in the last 45 days.
+          </Typography>
+        ) : (
+          <CombinedImpressionsChart data={impressions} />
+        )}
+      </section>
+      <HorizontalSeparator />
+      <section className="flex flex-col gap-4">
+        <Typography type={TypographyType.Body} bold>
+          Engagement (last 45 days)
+        </Typography>
+        <AnalyticsNumbersList
+          data={analyticsEngagement.map(([label, value]) => ({
+            icon: engagementIcons[label],
+            label,
+            value: empty ? 0 : value,
+            ...(label === 'Upvotes ratio' && {
+              tooltip: 'The percentage of upvotes out of total votes.',
+            }),
+          }))}
+        />
+      </section>
+    </Column>
+  );
+};
+
+/* --------------------------------------------------------------- pending */
+
+const rejectReasons = [
+  'Off-topic post unrelated to the Squad',
+  "Violates the Squad's code of conduct",
+  'Too promotional without adding value',
+  'Duplicate or similar content already posted',
+  'Lacks quality or clarity',
+  'Inappropriate, NSFW or offensive post',
+  'Post is spam or scam',
+  'Misinformation or false claims',
+  'Copyright or legal issue',
+  'Other',
+];
+
+/**
+ * Production's /squads/moderate for the author: their own posts in the
+ * queue, Pending or Rejected, with the moderator's reason, and Edit or
+ * Delete on each. The moderator's queue is ModerationPage.
+ */
+export const PendingPostsPage = (): ReactElement => {
+  const { config } = useWorkspace();
+  const items = feedEntries.slice(3, 3 + Math.max(config.ownPending, 0));
+
+  if (items.length === 0) {
+    return (
+      <Column>
+        <div className="flex flex-col items-center gap-2 px-2 py-14 text-center">
+          <VIcon size={IconSize.Large} className="text-status-success" />
+          <span className="font-bold text-text-primary typo-title3">
+            All done!
+          </span>
+          <span className="text-text-tertiary typo-footnote">
+            All caught up! No posts are pending
+          </span>
+        </div>
+      </Column>
+    );
+  }
+
+  return (
+    <Column>
+      <span className="text-text-secondary typo-callout">
+        Your posts waiting for a moderator of {squad.name}. You hear when they
+        are reviewed.
+      </span>
+      <div className="flex flex-col gap-8">
+        {items.map((entry, index) => {
+          const rejected = index === 1;
+          return (
+            <div key={entry.id} className="flex flex-col gap-3">
+              <div className="flex items-center gap-3">
+                <Avatar member={entry.author} size={2} />
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <span className="font-bold text-text-primary typo-footnote">
+                    {entry.author.name}
+                  </span>
+                  <span className="flex flex-wrap items-center gap-x-1.5 text-text-tertiary typo-caption1">
+                    {formatDay(entry.createdAt)}
+                    {index === 2 && <span>· Resubmitted</span>}
+                    <span
+                      className={classNames(
+                        'flex items-center gap-1 font-bold',
+                        rejected ? 'text-status-error' : 'text-text-secondary',
+                      )}
+                    >
+                      ·{' '}
+                      {rejected ? (
+                        <WarningIcon size={IconSize.XSmall} />
+                      ) : (
+                        <TimerIcon size={IconSize.XSmall} />
+                      )}
+                      {rejected ? 'Rejected' : 'Pending review'}
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <div className="flex gap-4">
+                <div className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span className="font-bold text-text-primary typo-callout">
+                    {entry.title}
+                  </span>
+                  <span className="line-clamp-2 text-text-tertiary typo-footnote">
+                    {entry.summary}
+                  </span>
+                </div>
+                {entry.image && (
+                  <img
+                    src={entry.image}
+                    alt=""
+                    className="h-16 w-28 shrink-0 rounded-10 object-cover"
+                  />
+                )}
+              </div>
+              {rejected && (
+                <div className="flex gap-2 rounded-12 bg-surface-float px-3 py-2.5 text-text-secondary typo-footnote">
+                  <WarningIcon
+                    size={IconSize.Small}
+                    className="shrink-0 text-status-error"
+                  />
+                  <span className="min-w-0 flex-1">
+                    Your post in {squad.name} was not approved for the following
+                    reason:{' '}
+                    <b className="text-text-primary">{rejectReasons[2]}</b>.
+                    Please review the feedback and consider making changes
+                    before resubmitting.
+                  </span>
+                </div>
+              )}
+              <div className="grid grid-cols-2 gap-2">
+                <Button
+                  variant={ButtonVariant.Subtle}
+                  size={ButtonSize.Small}
+                  icon={<EditIcon />}
+                >
+                  Edit
+                </Button>
+                <Button
+                  variant={ButtonVariant.Subtle}
+                  size={ButtonSize.Small}
+                  icon={<TrashIcon />}
+                >
+                  Delete
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Column>
+  );
+};