Claude Desktop UI: Architecture & Interaction Hooks
Claude Desktop-style Electron UI in React: draggable title bar, session reordering, Cowork board, scroll pinning, roving focus, rate-limit backoff. 7 demos.
Desktop architecture and interaction hooks covers what is specific to Claude Desktop as an Electron app: the draggable window title bar, session list reordering, the multi-agent (Cowork) collaboration board, and a few React hooks for scroll following, roving focus, shared-element transitions and rate-limit backoff. The 7 demos on this page correspond to Chapter 6 of the v1 handbook. This page is a translation of the Chinese demo page.
Key values
| Item | Value | Source |
|---|---|---|
| macOS traffic-light inset | 74px | v1/06 §6.1 |
| Title bar drag strip | 45px | v1/06 §6.1 |
| Drag threshold | movement within 4px does not count as a drag | v1/06 §6.2 |
| Agent task states | idle → running → waiting_review → completed / errored | v1/06 §6.3 |
| Rate-limit backoff | 5-second base, doubling exponentially, capped at 10 minutes | v1/06 §6.7 |
Desktop title bar
The left side of the title bar leaves room for the macOS traffic lights. Empty space drags the window; button areas do not respond to dragging.
Session list drag reordering
Pinned conversations can be reordered by dragging, or moved up and down with the keyboard.
Multi-agent collaboration board
The Cowork board shows the status of several agents' subtasks and their shared artifacts.
Scroll following for streamed output
When you are at the bottom, the view follows the streamed output automatically; scroll up and it stops following.
Roving focus
Only one element in the list is reachable with Tab; the arrow keys move between items.
Shared-element transition
The View Transitions API smoothly enlarges a thumbnail into a preview.
Rate-limit backoff
When rate-limited, it waits with exponential backoff and retries automatically when the countdown ends.
How do I use these components in a project?
Copy the matching file from code-examples/ and import cds-theme.css. For example:
import { useClaudeScrollPinning } from './useClaudeScrollPinning';
const { containerRef, isPinned, showJumpControl, handleScroll, scrollToBottom } = useClaudeScrollPinning([messages]);Note: some labels inside the demo components are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.
Sources
The specs on this page come from Chapter 6 of the v1 handbook, the component and hook code comes from the repository's code-examples/, and platform behavior follows the Electron, MDN and W3C documentation.
- open-claude-ui · code-examples/:
ClaudeDesktopHeader.tsx,DraggableSessionList.tsx,CoworkAgentCanvas.tsx,useClaudeScrollPinning.ts,useClaudeRovingFocus.ts,useClaudeSharedElementTransition.ts,useRateLimitBackoff.ts. - Electron docs: Custom title bar: hiding the native title bar and defining draggable regions.
- MDN: View Transition API: the API behind the shared-element transition.
- W3C ARIA APG: Keyboard interface: the guidance on roving focus (roving tabindex).
- React docs: Custom Hooks
Once an intentional upward scroll is detected, auto-scrolling is locked out for 150ms, permanently eliminating "scroll viewport hijacking".
— open-claude-ui README · 150ms Scroll Pinning Cooldown Latch & 40px Tolerance
Related pages
Media & Artifacts
Claude-style React media components: 6-band voice waveform, image lightbox, split pane, sandboxed Artifacts iframe, diff viewer, code block. 6 live demos.
New in 2.0
Claude Desktop 2.0 UI components: effort selector, composer chin, sibling-index() stagger, 1.32× pill overshoot, 0.5px hairlines, skeleton modes. 6 demos.