Open Claude UI
中文
v2 · Claude Desktop 2.0 UI Handbook

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.

中文版Last updated:

⬅️ 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 / elementCDS 1.x sidebar baselineCDS 2.0 sidebar architecture
OrganizationUser-created nested folder trees, filed any wayStrict grouping in four modes (None / Status / Date / Environment); single folders merge silently into one Default scope
Row height and densityLoose 38px~40px conversation rowsCompact 28px engineering rows, 45% more items visible vertically
Git branch nameNoneMonospace branch badges (such as feat/auth) inline in the row
GitHub PR badgeNonePR status pills (#123 Open / Merged) attached inline in real time
Background task heartbeatNo state animationAn isRunning breathing glow ring and a spinning starting micro-icon
Remote dispatch and bridge flagsNoneA Bridge icon and a permissionMode indicator
Sidebar/canvas boundaryA slightly heavy 1px outlineA 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 / propertyCDS 1.x baselineCDS 2.0Visual 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-bgA static color variablevar(--cds-surface-0) passed through dynamicallyFalls 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. #FCFCFB gives 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 tokenCDS 1.x baselineCDS 2.0 compact (Default Compact)CDS 2.0 comfortable (Comfortable)Change and visual effect
Composer radius --cds-radius-composer20px (rounded-[20px])12px (calc(.75rem * scale))14px (calc(.875rem * scale))40% flatter, losing the toy-like pill look
Base control radius --cds-radius8px (rounded-lg)6px (calc(.375rem * scale))8px (calc(.5rem * scale))Sharper and tidier in the default compact mode
Sub-panel/card radius --cds-panel-radius10px10px12px (calc(.75rem * scale))A slightly softer curve on large card outlines
Checkbox radius --cds-checkbox-radius4px4px5px (calc(.3125rem * scale))Pixel-level tuning so the checkmark looks concentric
Base control height --cds-h-control32px (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-nestedNot separately specified18px (calc(1.125rem * scale))22px (calc(1.375rem * scale))A dedicated height for pills and small buttons inside the composer
Base icon size --cds-icon20px16px (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/24px6/8/12/20/32px sequence8/12/16/28/40px sequenceAdds 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 by var(--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

  1. Deadlock when cloning Worktrees of large repos concurrently: the Git lock queue was redesigned to queue serially in isolation;
  2. 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;
  3. Sync after Mac sleep disconnects: after waking from lid-closed sleep, it reconciles incrementally based on the Git SHA;
  4. Graceful handling of very large prompt truncation: with very long context it shows a gentle card banner instead of a full-screen error;
  5. Lost lead-in text before tool calls: fixed an ordering bug in how AST extraction packed and folded nodes;
  6. 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;
  7. Attributing abnormal exits on Windows: distinguishes real crashes from false "Session Interrupted" states;
  8. Initialization failures with special characters in paths: any path encoding is now parsed;
  9. Haiku Auto permission wrongly downgraded: fixed Auto mode graying out and falling into Accept edits;
  10. 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.exe may be called, with no fuzzy lookup through PATH, blocking privilege-escalation hijacks via .bat/.cmd/.ps1 scripts;
  • 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 ➡️

On this page