Bridge OS

Bridge OS

Everyone with a Bridge account. It's the home of your network: who you know, the intros you make and receive, your meetings, and the outcomes. It's also where every other Bridge app is launched from and connects to.

os.brdg.app

The shell draws all of this. A screen only fills the content area, so never redraw any of it on a page.

Every page picks one of these from src/lib/layout/widths.ts. The template says which.

• Activity (what's new: intros, meetings, people you recently met)
• Network (people and organizations you know, invites, sharing)
• Outcomes (what your intros led to)

Follow these so a new screen matches the ones already shipped.

• A page is a server page.tsx that renders one client _components/<name>-content.tsx.
• Pick a width from src/lib/layout/widths.ts; never write a max-w-* of your own.
• Not everything is a card. Tab rows, page titles, Back links and section titles sit on the page itself; cards hold content (a table, a list, a form).
• A record page (a person or an organization) opens with the record's own card, not a page title, then underline tabs on the page line, then one card for the tab's content.
• Two-column pages: the main column is minmax(0,1fr), the side panel is 340px and stays in view (sticky top-20) with its own scroll.
• A section title (icon + title) sits above or inside its card, never as a separate card.
• Sub-pages start with "← Back", which goes back in history.
• Tabs are in the address (?tab=); the default tab has none.
• Each card loads on its own. The page never waits for all its data.
• Main areas appear in both the top bar and the phone bar. Everything else is reached from a page.

Step by step: Build a screen (builds a Bridge OS organization page) and Add a screen (every file, in order).

26 screens follow 8 templates. 3 fit only approximately (marked Closest, with what differs). A new screen starts from the template whose job matches, never a new frame.

Where Bridge OS code differs from this page today. Follow the page, not the gap.

• Page headers, Back links and section titles are written by hand on every page (the App kit proposes shared ones).
• Seven public pages copy the top bar, footer and background by hand.
• One generic loading screen for every page change, whatever the page's shape.
• The app launcher and user menu still use Radix menus, not the package's ActionMenu.
• Contact actions menu: plain buttons inside the menu, so arrow keys don't move between them.

• Bridge OS route survey (commit 5d9b382), 2026-11-02.
• Bridge OS src/app/(shell)/layout.tsx, src/lib/layout/widths.ts, top-nav.tsx, org-network-content.tsx, src/app/connect/.
• Bridge OS components.md, CLAUDE.md.