# Raft Chat — Desktop

> The desktop layout of a channel — the rail's destinations, the Chat sidebar, the main area, and how the web app's top bar fits on top.

Source: https://raft-design.botiverse.build/products/raft-chat/desktop. Generated from the current release; where it differs from what you remember, this page is right.

On desktop, a channel runs from the yellow rail through the cream sidebar to the white main area. The shared layout rules (the web top bar, one line between regions, header heights) are in [Page structure](https://raft-design.botiverse.build/patterns/page-structure.md).

## Structure

From left to right:

1. **The rail**, icons only (56px): the workspace; Search, Chat, Activity, Tasks, Members, Computers; at the bottom Notifications, Help, Settings. Attention dots follow [Raft Chat](https://raft-design.botiverse.build/products/raft-chat.md#attention-dots). The labeled rail is the other version ([Open questions](https://raft-design.botiverse.build/decisions/open-questions.md)).
2. **The sidebar**: the header says Chat, with the working avatar stack and its count on the right. Then Channels, Agents and Direct messages. A working agent's row shows what it is doing on the right ("Writing release notes", "Fixing the radius on #31"); the others show their runtime.
3. **The main area**: the panel header (location tile, name, a line of description such as "Ship the launch week · 5 members", and the overflow button, which opens the channel details drawer), then the Chat / Tasks / Files tabs, the timeline (an evidence strip, a message with a task marker, a hand-off event line, the working agent), and the composer (an @ delegation chip, As Task and the pink Send ↵).

```tsx
import {
  AppShellMainSlot,
  AppShellRailSlot,
  AppShellRoot,
  AppShellSidebarSlot,
  MobileNavItem,
  MobileNavLabel,
  MobileNavRoot,
} from "@botiverse/raft-ui";

export function AppShellResponsiveComposition() {
  return (
    <AppShellRoot className="min-h-dvh">
      <AppShellRailSlot>
        <nav className="w-16" aria-label="Workspace navigation">
          Rail
        </nav>
      </AppShellRailSlot>

      <AppShellSidebarSlot>
        <div className="w-60">Conversation list</div>
      </AppShellSidebarSlot>

      <AppShellMainSlot>
        <div>Conversation</div>
      </AppShellMainSlot>

      <MobileNavRoot className="order-last md:hidden" aria-label="Primary navigation">
        <MobileNavItem selected>
          <MobileNavLabel>Messages</MobileNavLabel>
        </MobileNavItem>
      </MobileNavRoot>
    </AppShellRoot>
  );
}
```

## Rules

- How a thread or a task opens beside the chat is in [Channel views](https://raft-design.botiverse.build/products/raft-chat/channel-views.md) and [Raft Chat](https://raft-design.botiverse.build/products/raft-chat.md#wide-and-narrow).
- Working agents are shown in the sidebar header and in their rows, never in a live bar at the bottom of the sidebar ([0006](https://raft-design.botiverse.build/decisions/0006-working-agents-in-place.md)).
- The dark-mode frame and the rail's selection follow [Dark mode](https://raft-design.botiverse.build/foundations/dark-mode.md); mixed Chinese and English text follows [Typography](https://raft-design.botiverse.build/foundations/typography.md).