Claude Desktop 2.0 New Features in Depth

⬅️ Previous: Chapter 1: Overview & Version Boundaries · 📚 Back to the 2.0 overview · Next: Chapter 3: Architecture Redesign & Comparison ➡️

This chapter covers the features Claude Desktop 2.0 added: pop-out windows, bundled offline visualization libraries, the offline message queue, the reasoning effort selector, the modern CSS motion system, home card hover effects, hairline borders, touch-target compensation and the managed-config key changes. It is a translation of the Chinese handbook chapter; every value is copied from it unchanged, and code blocks are reproduced as-is.

2. New in 2.0

2.1 Separate multi-window architecture

Through the Electron IPC channel DESKTOP_WINDOW_POP_OUT_CHAT, the main renderer can detach the active conversation into its own BrowserWindow, and each child window has its own native Find-in-Page instance, which solves the problem of comparing and debugging long, complex tasks side by side.

// 主进程多窗口调度逻辑 (从 app.asar 分析提取)
ipcMain.handle('DESKTOP_WINDOW_POP_OUT_CHAT', async (event, { sessionId, bounds }) => {
  const popoutWindow = new BrowserWindow({
    width: bounds?.width || 900,
    height: bounds?.height || 700,
    titleBarStyle: 'hiddenInset',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      sandbox: true,
      contextIsolation: true
    }
  });
  popoutWindow.loadURL(`claude://session/${sessionId}?mode=popout`);
  return popoutWindow.id;
});

2.2 Offline visualization components

External CDN loading is dropped entirely; these are bundled in the ASAR:

• [email protected]_dist_mermaid.min.js
• [email protected]_dist_chart.umd.js
• [email protected]_dist_gridjs.umd.js

The inactive-row rules for data tables are standardized:

.cds-root [data-cds=DataTable] tr[data-dimmed] {
  --cds-row-dimmed-opacity: .5;
  --cds-text-primary: var(--cds-undimmed-text-muted);
}
/* 行内交互表单控件强制恢复 100% 亮度 */
.cds-root [data-cds=DataTable] tr[data-dimmed] :is(button,input,select,textarea) {
  --cds-row-dimmed-opacity: 1;
  --cds-text-primary: var(--cds-undimmed-text-primary);
}

• Why Anthropic changed this: in high-security enterprise intranets, external CDNs are blocked by the firewall. Making the chart containers native and defining the inactive state in the style layer keeps them 100% usable in finance, defense and classified development settings.

2.3 Offline message retry

• 1.x baseline: when the network dropped, the message turned into red error text, and as soon as the browser or Electron page was refreshed, a carefully written prompt was gone for good;
• 2.0 change: a ChatComposerQueuedMessages container inside the Composer, bound directly to IndexedDB transactions.

interface QueuedMessage {
  id: string;
  sessionId: string;
  content: string;
  attachments: AttachmentRef[];
  failedAt: number;
  retryCount: number;
}

• Why Anthropic changed this: a developer's engineering prompts often contain hundreds of lines of context, file paths and stack traces, and are very valuable. Making the queued state a first-class component ends the bad experience of "a crash eats my text".

2.4 The reasoning effort selector

The data model extracted from index.chunk-BWk6pVUt.js:

interface EffortOption {
  id: "low" | "medium" | "high" | "xhigh" | "max";
  name: string;
  description: string;
  recommended?: boolean;
  badge?: { message: "Default"; variant: "neutral" | "accent" | "warning" };
  tooltip?: { content: string };
}

• Why Anthropic changed this:
  • Fine-grained reasoning cost management: models with deep thinking (such as Sonnet 3.7 / 4.6 / 5) can burn tens of thousands of tokens on one complex engineering problem. With only an on/off switch, simple writing tasks get slowed down and waste quota on overthinking, while very hard bugs get too little thought.
  • Enterprise quota guardrail: at the max level, the UI shows an explicit warning ("May use excessive tokens resulting in long response times"), and the enterprise admin side can lock maxEffort to medium by policy, so employees don't accidentally exhaust the company's API budget.

2.5 The modern CSS motion system

1. Native cascading stagger with modern CSS sibling-index()

The official build uses the native modern CSS selector counting function directly:

.cds-root .cds-chip-in {
  animation: cds-chip-in var(--cds-dur-base) var(--cds-ease-out) backwards;
  animation-delay: calc(var(--cds-chip-in-base-delay, 50ms) + min(sibling-index() - 1, 8) * 30ms);
}

@keyframes cds-chip-in {
  0% { opacity: 0; filter: blur(2px); transform: scale(.8); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

2. Native View Transitions API transitions (cds-attachments)

When the user deletes or removes an attachment in the message stream, a native view transition runs:

:root:active-view-transition-type(cds-attachments)::view-transition-old(.cds-attachment):only-child {
  animation: .13s cubic-bezier(.55, .055, .675, .19) forwards cds-attachment-out;
}

@keyframes cds-attachment-out {
  to { opacity: 0; transform: scale(.5); }
}

3. Scroll-driven gradient transparency masks

Scroll viewport edges no longer use solid-color pseudo-elements; they bind directly to a CSS scroll timeline:

@keyframes cds-scroll-fade-top {
  0% { --cds-scroll-fade-top-raw: 0px; }
  to { --cds-scroll-fade-top-raw: var(--cds-scroll-fade-size); }
}

• Effect: when a long conversation is scrolled to the top, the top mask variable shrinks to 0px (a hard edge); as soon as you scroll away from the top, it expands to a 28px feathered translucent gradient that smoothly hides the text scrolling up.

2.6 Home card hover glow

On the 2.0 home screen (new conversation / starter cards), prompt suggestion cards get a textured hover effect with a soft ambient glow from the bottom:

/* 提取自 MainWindowPage-CGx8l8Ts.js 编译产物 */
.starter-card {
  transition: transform 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.starter-card:hover {
  transform: scaleY(1.015) scaleX(1.005);
}

.starter-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(at bottom, hsla(var(--bg-000) / 20%), hsla(var(--bg-000) / 0%));
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.starter-card:hover:after {
  opacity: 1;
}

• How it works: on hover, the card lifts very slightly in 3D perspective (1.5% larger on the Y axis, 0.5% wider on the X axis), while a pseudo-element underneath fades in a translucent highlight diffusing upward from the bottom.

2.7 Ultra-thin hairlines and relative colors

The base border rules extracted from MainWindowPage-BD9CWQ83.css:

.border-0\.5 {
  border-width: 0.5px;
}

:root {
  /* 基于底色动态推导高拟真漫反射投影 */
  --cds-elevation-subtle: 0 1px 2px 0 color-mix(in srgb, var(--cds-surface-0) 80%, black 20%);
  --cds-elevation-card: 0 4px 12px -2px color-mix(in srgb, var(--cds-surface-0) 90%, black 10%);
}

• Engineering advantage: no more hard-coded static opacity. Whether the user is on the light or dark theme, shadows and hairline borders generate an accurate diffuse falloff from the current background hue in real time.

2.8 Touch negative-margin compensation

For the composer's bottom action area (ChatComposerChin), the official design includes a size compensation algorithm:

.cds-root [data-cds=ChatComposerChin] [data-touch-size] {
  --cmp-chin-touch-grow: calc((var(--cds-h-control) - var(--cmp-chin-row-h, var(--cds-h-control))) / 2);
  min-height: var(--cmp-chin-row-h, var(--cds-h-control));
}

.cds-root [data-cds=ChatComposerChin] [data-touch-size] :is([data-cds=ButtonGroup],[data-cds=SplitDropdownButton]):not([data-size]),
.cds-root [data-cds=ChatComposerChin] [data-touch-size] :is([data-cds=Button],[data-cds=ModelSelector],[data-cds=ModelSelectorEffort]):not([data-size]):not(:is([data-cds=ButtonGroup],[data-cds=SplitDropdownButton]) *) {
  margin-block: calc(var(--cmp-chin-touch-grow, 0px) * -1);
}

• Why Anthropic introduced touch negative-margin compensation:
  • Design pressure: desktop developers want High Information Density, with a compact, refined composer chin whose row height stays within 28px;
  • Accessibility problem: on touchscreen devices (such as the Microsoft Surface Pro or touch monitors) or with a stylus, buttons smaller than 44×44px are easy to mis-tap, which violates WCAG 2.1 AA;
  • The math: --cmp-chin-touch-grow computes the difference between the control's standard hit size and the short visual row height, and margin-block: calc(... * -1) expands the button's invisible hit area (Hit-box) outward, keeping the short visual row while providing a large enough touch target.

2.9 Enterprise managed config migration

🚨 Enterprise Risk Alert:
The analysis shows that Claude 2.0 removes the fallback logic for the old keys entirely! If an enterprise has only the old keys configured, the client is silently treated as an "Unmanaged" client, so extension-blocking policies stop working.
Also, because the persisted token structure was redesigned, every OAuth MCP connector must be re-authorized once after the upgrade.

⬅️ Chapter 1: Overview & Version Boundaries · 📚 2.0 overview · Chapter 3: Architecture Redesign & Comparison ➡️ · Live demos: new in 2.0