diff --git a/packages/client/ui-sidebar/package.json b/packages/client/ui-sidebar/package.json
index 5f7b4d0f23..7d85b111cf 100644
--- a/packages/client/ui-sidebar/package.json
+++ b/packages/client/ui-sidebar/package.json
@@ -47,6 +47,7 @@
},
"devDependencies": {
"@deepseek-ai/dsh-client-runtime": "workspace:^",
+ "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
"@deepseek-ai/dsh-client-ui-layout": "workspace:^",
"@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
"@deepseek-ai/dsh-client-ui-slots": "workspace:^",
diff --git a/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap b/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..6678d3088e
--- /dev/null
+++ b/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap
@@ -0,0 +1,131 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sidebar shell snapshots > renders the collapsed rail after the crossfade settles, in place 1`] = `
+
+`;
+
+exports[`sidebar shell snapshots > renders the expanded column (wordmark, capsule, empty holes) 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx b/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx
new file mode 100644
index 0000000000..d9b1bcd473
--- /dev/null
+++ b/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+/**
+ * Local DOM snapshots of the sidebar shell through the real assembly path:
+ * SlotTestRuntime mounts the package apply on its own fiber, the auto frame
+ * supplies the layout's owner share at the render site, and the snapshot
+ * captures exactly the 'sidebar' slot's output (CSS-module class names
+ * folded to their semantic locals by the runtime's serializer). The child
+ * holes (sidebar.workspaces / sidebar.settings) have no registrant here, so
+ * the snapshots pin the shell chrome itself.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, waitFor } from '@testing-library/react'
+import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { apply, inject } from '@deepseek-ai/dsh-client-ui-sidebar/client'
+
+afterEach(cleanup)
+
+async function bench() {
+ const runtime = await SlotTestRuntime.create()
+ runtime.provide('layout', { toggleSidebar: vi.fn() })
+ await runtime.declare({ 'sidebar': { kind: 'single', scope: 'root' } })
+ await runtime.mount({ inject: [...inject], apply })
+ return runtime
+}
+
+describe('sidebar shell snapshots', () => {
+ it('renders the expanded column (wordmark, capsule, empty holes)', async () => {
+ const runtime = await bench()
+ const slot = runtime.renderSlot('sidebar', { collapsed: false, width: 300 })
+ // Wordmark + capsule both start a session in the expanded state.
+ expect(slot.view.getAllByRole('button', { name: 'New session' })).toHaveLength(2)
+ expect(slot.container).toMatchSnapshot()
+ await runtime.dispose()
+ })
+
+ it('renders the collapsed rail after the crossfade settles, in place', async () => {
+ const runtime = await bench()
+ const slot = runtime.renderSlot('sidebar', { collapsed: false, width: 300 })
+ const shell = slot.container.firstElementChild
+ slot.update({ collapsed: true, width: 56 })
+ // The wide content (wordmark shortcut) unmounts at the 150ms settle;
+ // only the rail's capsule remains a New-session button.
+ await waitFor(() => {
+ expect(slot.view.getAllByRole('button', { name: 'New session' })).toHaveLength(1)
+ })
+ expect(slot.container).toMatchSnapshot()
+ // Same tree position: the owner flip re-rendered the shell in place.
+ expect(slot.container.firstElementChild).toBe(shell)
+ await runtime.dispose()
+ })
+})