flagon-io/g1t

This is the first slice of #304. It changes the frame and the session page; live streaming and answering a session from the web come in later slices.

The app bar replaces the rail

From 768px the apps are tabs along the top of the window, with their names shown from 1280px and icons alone below that.

• Left: g1t's mark, then the workspace and its menu. People and Workspace settings have moved into that menu.
• Tabs: Home, Work, Chat, Code, Artifacts and Routines, then the pinned apps, the Apps launcher and Explore.
• Right: search, Ask, the bell, Create new and the account menu.
• When the window is narrow: the search field gives up its width first. If the tabs still don't fit, they scroll under a fade.

Under the bar, the sidebar starts at the window's left edge. The page keeps a slim 48px bar for the breadcrumbs and the sidebar toggle. --topbar-h covers both bars, so pages with sticky elements line up without changes.

A phone is unchanged: it still has the bottom bar.

Ask and the bell keep their own state, so each is mounted in one place only. Until the page hydrates both copies render and CSS hides one; after that a useMedia hook keeps only the visible one.

Needs attention (Work sidebar)

The Work sidebar now starts with a New work item pill and a Needs attention card:

• It lists the inbox's Needs you items in this workspace, newest first. It shows three, then Show more.
• Done and snoozed items are left out.
• Each row opens a card beside the sidebar with Review, Snooze (until tomorrow) and Dismiss (marks it done).
• The filtering is needsAttention in lib/inbox.ts, with tests.

The session page reads as an answer

The page is now laid out in this order:

1. The question bubble.
2. Worked for 14m · 34 tool calls, which toggles the transcript.
3. What it came to: its reported result, or the last thing it said once it ended.
4. Three tiles:
   • how long it worked, with an activity chart and a tooltip on each bar;
   • what it changed;
   • its model cost and who is billed for it. The provider bills that, not g1t.
5. Highlights: the decisions this session (and its subagents) kept on its pull requests and work items, plus the notes it wrote. Each has a numbered citation that links to its source. A transcript citation unfolds the transcript and jumps to #entry-N.
6. Deliverables as cards.
7. Subagents, skills and what it touched.
8. The transcript, folded under the answer. It is open when there is no answer yet.

If the decisions can't be read, that part says so in place and the rest of the page still renders.

The logic is in lib/session-story.ts, with tests.

Also

• The landing page's product tour, a miniature of the app, now draws the app bar too. Its cursor targets are now tab-chat and tab-code.

Checks

• tsc is clean.
• 1,171 web tests run with none failing (one skipped).
• Prettier is clean.
• I looked at each change in light and dark, at 1440, 1280, 1100, 900 and phone widths, in a scratch Vite + headless Chrome harness. Screenshots follow in a comment.

Screenshots, in order: the Work sidebar with Needs attention (light), a Needs attention card opened (dark), the session page (light and dark), the session page on a phone, and the app bar at 1100px with two pinned apps.