Claude Desktop 2.0 vs 1.x: Architecture Redesign & Comparison
Claude Desktop 2.0 vs 1.x: 28px sidebar rows, #FCFCFB / #151515 canvas, composer radius 20px → 12px/14px, density modes, pill overshoot, CSS-only motion.
⬅️ Previous: Chapter 2: New Features in Depth · 📚 Back to the 2.0 overview · Next: Chapter 4: The System Foundation ➡️
This chapter compares what Claude Desktop 2.0 redesigned against 1.x: the conversation sidebar, the canvas colors, the radius and density system, the model selector, skeletons and pill micro-interactions, runtime concurrency fixes and the move of motion onto the CSS compositor. It is a translation of the Chinese handbook chapter; every value is copied from it unchanged, and code blocks are reproduced as-is.
3. Redesigns
3.1 Conversation sidebar and environment convergence
1. 1.x vs 2.0 sidebar interactions at a glance
| Dimension / element | CDS 1.x sidebar baseline | CDS 2.0 sidebar architecture |
|---|---|---|
| Organization | User-created nested folder trees, filed any way | Strict grouping in four modes (None / Status / Date / Environment); single folders merge silently into one Default scope |
| Row height and density | Loose 38px~40px conversation rows | Compact 28px engineering rows, 45% more items visible vertically |
| Git branch name | None | Monospace branch badges (such as feat/auth) inline in the row |
| GitHub PR badge | None | PR status pills (#123 Open / Merged) attached inline in real time |
| Background task heartbeat | No state animation | An isRunning breathing glow ring and a spinning starting micro-icon |
| Remote dispatch and bridge flags | None | A Bridge icon and a permissionMode indicator |
| Sidebar/canvas boundary | A slightly heavy 1px outline | A 0.5px hairline (border-0.5 border-border-300) |
2. Latest implementation code (extracted from the build output)
In index.chunk-DPv6qSYD.js, the analysis extracted the full engineering metadata model for items in the left sidebar's conversation list:
// 提取自 index.chunk-DPv6qSYD.js 会话数据管道
interface SidebarSessionRow {
sessionId: string;
title: string;
cwd: string; // 本地工作树绝对路径
branch?: string; // Git 分支名称 (如 main, feat/login)
isArchived: boolean;
isRunning: boolean; // 后台 Agent 正在执行代码/命令
starting: boolean; // 容器或虚拟机正在拉起
prNumber?: number; // 关联的 GitHub PR 编号 (如 123)
prState?: 'OPEN' | 'MERGED' | 'CLOSED';
lastActivityAt?: string;
group: string; // 四态分组作用域归属
pinned: boolean; // isStarred 置顶星标
remoteControlActive: boolean; // 是否处于 Slack / 网页桥接控制
permissionMode?: 'auto' | 'accept_edits' | 'plan'; // 权限模式
}3. Why Anthropic overturned the old sidebar design
- From a "chat history browser" to a "multi-agent task monitor": in the 1.x era, the sidebar was a "chat history list" for looking up what you discussed the day before. In 2.0, with the Claude Code CLI, Worktrees and Cowork deeply integrated, developers often run 3 to 5 different agents in the background at once (one running unit tests in a local Worktree, one fixing deploy scripts over remote SSH, one refactoring the front end in a cloud container). With 1.x's roomy 40px rows and no branch or PR info, developers would have to click into each conversation to see which task finished and which got stuck on a rate limit. The dense 28px status column in 2.0 lets developers see every concurrent agent's branch name, PR status, live heartbeat and permission level at a glance in the sidebar, with the throughput of a modern IDE task board.
- Preventing crossings between physical execution sources: removing freely nested folders and grouping strictly by physical source ("This Computer / Cloud / SSH / Slack") prevents users from unknowingly running a high-risk local script in the cloud or on a remote host.
3.2 How the workbench canvas and base color evolved
1. 1.x vs 2.0 canvas base colors
| Color token / property | CDS 1.x baseline | CDS 2.0 | Visual effect and hue |
|---|---|---|---|
Light mode base --claude-background-color | #FAF8F5 / #FBF9F4 | #FCFCFB (gray-10) | Drops the old, clearly yellowish and warm parchment feel for a clean, cool snow white (Alabaster) without the yellow, brighter and clearer |
Dark mode base --claude-background-color | #1A1915 / #1E1E1E | #151515 (gray-850) | From a warm gray-brown dark to a pure obsidian ink black; 30% more contrast in the darks and sharper edges on code highlight colors |
Page background binding --cds-page-bg | A static color variable | var(--cds-surface-0) passed through dynamically | Falls back to transparent automatically during Pulse/animation states to avoid repaint color mixing |
2. Why Anthropic moved from warm clay paper to a modern cool snow white
- Removing hue interference with syntax highlighting and Git diffs: the old yellowish paper had a literary feel, but when developers read a lot of highlighted code (light cyan TypeScript, orange-red Rust, emerald Python) and the red/green line backgrounds of Git diffs, the yellow base mixed with the cool highlights and made text edges look "dirty and blurry", which is tiring.
#FCFCFBgives a neutral base with no color cast, so code colors and diff states are clear at a glance. - Aligning with the look of modern developer productivity tools: top developer tools such as Linear, VS Code and Cursor generally use cool, high-contrast neutral bases. The base-color shift in 2.0 marks Claude's move to the visual identity of a "high-intensity engineering console".
3.3 Base radius and density system
1. 1.x vs 2.0 radius and size values
| Value / design token | CDS 1.x baseline | CDS 2.0 compact (Default Compact) | CDS 2.0 comfortable (Comfortable) | Change and visual effect |
|---|---|---|---|---|
Composer radius --cds-radius-composer | 20px (rounded-[20px]) | 12px (calc(.75rem * scale)) | 14px (calc(.875rem * scale)) | 40% flatter, losing the toy-like pill look |
Base control radius --cds-radius | 8px (rounded-lg) | 6px (calc(.375rem * scale)) | 8px (calc(.5rem * scale)) | Sharper and tidier in the default compact mode |
Sub-panel/card radius --cds-panel-radius | 10px | 10px | 12px (calc(.75rem * scale)) | A slightly softer curve on large card outlines |
Checkbox radius --cds-checkbox-radius | 4px | 4px | 5px (calc(.3125rem * scale)) | Pixel-level tuning so the checkmark looks concentric |
Base control height --cds-h-control | 32px (2rem) | 24px (calc(1.5rem * scale)) | 32px (calc(2rem * scale)) | Default height 25% smaller, much higher information density |
Nested inline control height --cds-h-control-nested | Not separately specified | 18px (calc(1.125rem * scale)) | 22px (calc(1.375rem * scale)) | A dedicated height for pills and small buttons inside the composer |
Base icon size --cds-icon | 20px | 16px (calc(1rem * scale)) | 20px (calc(1.25rem * scale)) | Compact mode aligns fully to the 16px Retina grid |
Component outer gaps (--cds-gap-*) | 4/8/12/16/24px | 6/8/12/20/32px sequence | 8/12/16/28/40px sequence | Adds a new --cds-gap-xl step for macro spacing |
2. Latest implementation code (extracted from the build output)
/* 默认紧凑模式 (Compact Density) */
.cds-root {
--cds-radius: calc(.375rem * var(--cds-rem-scale, 1)); /* 6px */
--cds-radius-composer: calc(.75rem * var(--cds-rem-scale, 1)); /* 12px */
--cds-h-control: calc(1.5rem * var(--cds-rem-scale, 1)); /* 24px */
--cds-h-control-nested: calc(1.125rem * var(--cds-rem-scale, 1)); /* 18px */
--cds-icon: calc(1rem * var(--cds-rem-scale, 1)); /* 16px */
}
/* 舒适宽适模式 (Comfortable Density) */
.cds-root[data-density=comfortable] {
--cds-radius: calc(.5rem * var(--cds-rem-scale, 1)); /* 8px */
--cds-radius-composer: calc(.875rem * var(--cds-rem-scale, 1)); /* 14px */
--cds-h-control: calc(2rem * var(--cds-rem-scale, 1)); /* 32px */
--cds-h-control-nested: calc(1.375rem * var(--cds-rem-scale, 1)); /* 22px */
--cds-icon: calc(1.25rem * var(--cds-rem-scale, 1)); /* 20px */
}3. Why Anthropic changed the 20px pill to a flatter 12px/14px radius
- Dropping the toy feel for a professional engineering workstation: the large 20px oval pill of 1.x was a holdover from early consumer chat products like iMessage / WhatsApp. In 2.0, ChatComposer has become a composite work dock holding the Worktree branch selector, the 5-level effort selector, queued prompts, multi-line code diffs and file lists. A 20px radius creates large "Corner Dead Zones" in the rectangle's corners that hide long indented code lines or clip the hit areas of chin buttons.
- Making the most of the rectangle: the flatter 12px (compact) and 14px (comfortable) radii keep a warm, approachable look while maximizing the usable inner rectangle, so the short chin can lay out more tools horizontally in a compact visual, a real step toward an IDE-grade productivity tool.
3.4 Model selector and usage awareness
1. 1.x vs 2.0
- 1.x baseline: a simple static label next to the model selector; the context size slider could be dragged at any point mid-conversation.
- 2.0 change: the selector becomes a live token usage gauge (Token Gauge); context settings move out of the main chat entirely, into the new-session drawer
NewSessionDrawer.
2. Why Anthropic changed this
- Maximizing the Prompt Caching hit rate: changing the context size mid-conversation invalidates the underlying KV Cache entirely, making inference latency on later turns jump more than 5x and cost 90% more. Locking the context once before the connection is established is a core engineering precondition for streaming throughput.
3.5 Skeletons and pill micro-interactions
1. Pill physical overshoot deformation
- 1.x baseline: a simple darker color and a slight shift;
- 2.0 change: a two-stage combined deformation (1.32x scale-up + an overshoot that settles):
.cds-root .cds-pill-pop { animation: cds-pill-pop-up calc(var(--cds-dur-base) * .4) var(--cds-ease-out), cds-pill-pop-down calc(var(--cds-dur-base) * .6) var(--cds-ease-overshoot) calc(var(--cds-dur-base) * .4); }
2. Two Skeleton modes
- Synchronized breathing (
[data-motion=lockstep]): the whole group dims to 60% and back on a 2.0s cycle, suited to dense lists; - Cascading wave shimmer (
[data-motion=wave]): each skeleton block is offset byvar(--cds-skel-i) * 90ms, with a 105° angled linear highlight band (cds-skeleton-sweep), suited to loading large cards.
3.6 Runtime concurrency and environment isolation
1. Ten key concurrency and isolation fixes
- Deadlock when cloning Worktrees of large repos concurrently: the Git lock queue was redesigned to queue serially in isolation;
- Linux SSH Worktree escaping its boundary: fixed a high-risk bug where symlink path traversal let changes be written back unexpectedly to the host machine's working directory;
- Sync after Mac sleep disconnects: after waking from lid-closed sleep, it reconciles incrementally based on the Git SHA;
- Graceful handling of very large prompt truncation: with very long context it shows a gentle card banner instead of a full-screen error;
- Lost lead-in text before tool calls: fixed an ordering bug in how AST extraction packed and folded nodes;
- Background self-healing after the 5-hour rate limit: when quota runs out, tasks are suspended and the scheduler wakes them automatically when the countdown ends;
- Attributing abnormal exits on Windows: distinguishes real crashes from false "Session Interrupted" states;
- Initialization failures with special characters in paths: any path encoding is now parsed;
- Haiku Auto permission wrongly downgraded: fixed Auto mode graying out and falling into Accept edits;
- 800ms debounced auto-save in the code panel: a new auto-save toggle for files.
2. Hard-locked Windows OpenSSH path and certificate rotation
- Hard-locked path: only
C:\Windows\System32\OpenSSH\ssh.exemay be called, with no fuzzy lookup throughPATH, blocking privilege-escalation hijacks via.bat/.cmd/.ps1scripts; - New signing certificate: the Windows installer has a new certificate, so enterprise policies that pin the Thumbprint need the new fingerprint added.
3.7 The chapter pin UI leak
- Finding: unpacking and review confirm that the "Pin as chapter" button that occasionally appears in the UI is not fake front-end UI; it is
mcp__ccd_session__mark_chapter, a tool Anthropic uses internally to split multi-step tasks; - Internal source evidence:
// 分析提取于 index.chunk-DPv6qSYD.js "Two or more at once: call 'mcp__ccd_session__mark_chapter' first with a short batch title." - Conclusion: a debugging action used by internal developers while testing long-running agent workflows, which leaked into the production build because it lacked a production Feature Flag gate; it is being removed with a hotfix.
3.8 Moving motion onto the pure-CSS compositor
In 2.0, Anthropic made a major low-level engineering decision: move almost all micro-interaction motion from a JavaScript animation library to pure CSS keyframes driven by the compositor.
- Why Anthropic changed this: in a desktop client for large models, the heaviest core workload is high-speed LLM streaming (Streaming: 80~120 tokens/sec). In the 1.x era, many micro-animations used JavaScript-driven Framer Motion loops. With many tokens updating the DOM continuously, the Main Thread locked up for whole frames, causing dropped frames, stutter and heavy MacBook battery drain. 2.0 moves all motion to modern native CSS selectors, scroll-driven animation and GPU acceleration on the Compositor Thread, so even while the main thread is busy processing streamed text, motion stays smooth at 120Hz.
⬅️ Chapter 2: New Features in Depth · 📚 2.0 overview · Chapter 4: The System Foundation ➡️
Chapter 2: New Features in Depth
New in Claude Desktop 2.0: pop-out windows, offline charts, queued offline messages, effort selector, sibling-index() motion, 0.5px hairlines, touch targets.
Chapter 4: The System Foundation
Claude Desktop 2.0 foundation: 47 pure-CSS keyframes, 40 data-cds component contracts, a 5-level duration token matrix and 3 cubic-bezier easing curves.