diff --git a/src/renderer/src/components/sidepanel/ChatSidePanel.vue b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
index dbba5dacf..3f2b14226 100644
--- a/src/renderer/src/components/sidepanel/ChatSidePanel.vue
+++ b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
@@ -1,20 +1,31 @@
 <template>
   <div
-    class="chat-side-panel-shell relative h-full min-h-0 shrink-0 overflow-hidden"
-    :class="{ 'chat-side-panel-shell--resizing': isResizing }"
-    :style="{ width: `${layoutWidth}px` }"
+    data-testid="chat-side-panel-shell"
+    class="chat-side-panel-shell h-full min-h-0 overflow-hidden"
+    :class="[
+      isWorkspaceFullscreenActive ? 'absolute inset-0 z-30 w-full' : 'relative shrink-0',
+      { 'chat-side-panel-shell--resizing': isResizing }
+    ]"
+    :style="shellStyle"
+    :data-workspace-fullscreen="String(isWorkspaceFullscreenActive)"
   >
     <aside
       v-if="props.sessionId"
-      class="chat-side-panel-surface absolute inset-y-0 right-0 flex h-full min-h-0 w-full flex-col border-l bg-background shadow-lg transition-[transform,opacity,box-shadow] duration-[var(--dc-motion-default)] ease-[var(--dc-ease-out-express)]"
-      :class="
+      class="chat-side-panel-surface absolute inset-y-0 flex h-full min-h-0 w-full origin-right flex-col bg-background"
+      :class="[
+        isWorkspaceFullscreenActive ? 'inset-x-0 border shadow-xl' : 'right-0 border-l shadow-lg',
         panelVisible
           ? 'translate-x-0 opacity-100'
-          : 'pointer-events-none translate-x-3 opacity-0 shadow-none'
-      "
+          : 'pointer-events-none translate-x-3 opacity-0 shadow-none',
+        {
+          'chat-side-panel-surface--fullscreen-enter': fullscreenMotionState === 'expanding',
+          'chat-side-panel-surface--fullscreen-exit': fullscreenMotionState === 'collapsing'
+        }
+      ]"
     >
       <button
-        v-if="panelVisible"
+        v-if="panelVisible && !isWorkspaceFullscreenActive"
+        data-testid="chat-side-panel-resize-handle"
         class="absolute inset-y-0 left-0 w-1 -translate-x-1/2 cursor-col-resize"
         type="button"
         @mousedown="startResize"
@@ -23,7 +34,7 @@
       <div class="flex h-11 items-center justify-between border-b px-3">
         <div class="flex items-center gap-1 rounded-lg bg-muted p-0.5">
           <button
-            class="rounded-md px-2.5 py-1 text-xs transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
+            class="rounded-md px-2.5 py-1 text-xs transition-colors duration-200 ease-out"
             :class="
               sidepanelStore.activeTab === 'workspace'
                 ? 'bg-background text-foreground shadow-sm'
@@ -35,7 +46,7 @@
             {{ t('chat.workspace.title') }}
           </button>
           <button
-            class="rounded-md px-2.5 py-1 text-xs transition-colors duration-[var(--dc-motion-fast)] ease-[var(--dc-ease-out-soft)]"
+            class="rounded-md px-2.5 py-1 text-xs transition-colors duration-200 ease-out"
             :class="
               sidepanelStore.activeTab === 'browser'
                 ? 'bg-background text-foreground shadow-sm'
@@ -57,6 +68,8 @@
         v-if="sidepanelStore.activeTab === 'workspace'"
         :session-id="props.sessionId"
         :workspace-path="props.workspacePath"
+        :is-fullscreen="isWorkspaceFullscreenActive"
+        @toggle-fullscreen="toggleWorkspaceFullscreen"
       />
       <BrowserPanel v-else :session-id="props.sessionId" />
     </aside>
@@ -82,17 +95,31 @@ const { t } = useI18n()
 const sidepanelStore = useSidepanelStore()
 const browserClient = createBrowserClient()
 const PANEL_MOTION_MS = 220
+const FULLSCREEN_MOTION_MS = 180
 let stopBrowserOpenRequestedListener: (() => void) | null = null
 let resizeCleanup: (() => void) | null = null
 let pendingResizeWidth: number | null = null
 let resizeFrame: number | null = null
 let panelMotionTimer: number | null = null
 let panelMotionFrame: number | null = null
+let fullscreenMotionTimer: number | null = null
 
 const shouldShow = computed(() => sidepanelStore.open && Boolean(props.sessionId))
 const layoutWidth = ref(shouldShow.value ? sidepanelStore.width : 0)
 const panelVisible = ref(shouldShow.value)
 const isResizing = ref(false)
+const isWorkspaceFullscreen = ref(false)
+const fullscreenMotionState = ref<'expanding' | 'collapsing' | null>(null)
+
+const isWorkspaceFullscreenActive = computed(() => {
+  return isWorkspaceFullscreen.value && shouldShow.value && sidepanelStore.activeTab === 'workspace'
+})
+
+const shellStyle = computed(() => {
+  return {
+    width: isWorkspaceFullscreenActive.value ? '100%' : `${layoutWidth.value}px`
+  }
+})
 
 const handleBrowserOpenRequested = (payload: {
   sessionId: string
@@ -119,6 +146,15 @@ const clearPanelMotionHandles = () => {
   }
 }
 
+const clearFullscreenMotionHandle = () => {
+  if (fullscreenMotionTimer !== null) {
+    window.clearTimeout(fullscreenMotionTimer)
+    fullscreenMotionTimer = null
+  }
+
+  fullscreenMotionState.value = null
+}
+
 const applyPendingResize = () => {
   resizeFrame = null
   if (pendingResizeWidth === null) {
@@ -144,8 +180,32 @@ const stopResizeTracking = () => {
   }
 }
 
+const resetWorkspaceFullscreen = () => {
+  isWorkspaceFullscreen.value = false
+  clearFullscreenMotionHandle()
+}
+
+const toggleWorkspaceFullscreen = () => {
+  if (!shouldShow.value || sidepanelStore.activeTab !== 'workspace') {
+    return
+  }
+
+  clearFullscreenMotionHandle()
+  fullscreenMotionState.value = isWorkspaceFullscreen.value ? 'collapsing' : 'expanding'
+  fullscreenMotionTimer = window.setTimeout(() => {
+    fullscreenMotionTimer = null
+    fullscreenMotionState.value = null
+  }, FULLSCREEN_MOTION_MS)
+  isWorkspaceFullscreen.value = !isWorkspaceFullscreen.value
+}
+
 const startResize = (event: MouseEvent) => {
   event.preventDefault()
+
+  if (isWorkspaceFullscreenActive.value) {
+    return
+  }
+
   stopResizeTracking()
   isResizing.value = true
 
@@ -178,6 +238,10 @@ watch(shouldShow, (visible) => {
   clearPanelMotionHandles()
   stopResizeTracking()
 
+  if (!visible) {
+    resetWorkspaceFullscreen()
+  }
+
   if (visible) {
     layoutWidth.value = sidepanelStore.width
     panelMotionFrame = window.requestAnimationFrame(() => {
@@ -196,6 +260,24 @@ watch(shouldShow, (visible) => {
   }, PANEL_MOTION_MS)
 })
 
+watch(
+  () => sidepanelStore.activeTab,
+  (activeTab) => {
+    if (activeTab !== 'workspace') {
+      resetWorkspaceFullscreen()
+    }
+  }
+)
+
+watch(
+  () => props.sessionId,
+  (sessionId, previousSessionId) => {
+    if (!sessionId || sessionId !== previousSessionId) {
+      resetWorkspaceFullscreen()
+    }
+  }
+)
+
 watch(
   () => sidepanelStore.width,
   (width) => {
@@ -213,6 +295,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   clearPanelMotionHandles()
+  clearFullscreenMotionHandle()
   stopResizeTracking()
   stopBrowserOpenRequestedListener?.()
   stopBrowserOpenRequestedListener = null
@@ -222,21 +305,72 @@ onBeforeUnmount(() => {
 <style scoped>
 .chat-side-panel-shell {
   contain: layout style paint;
+  transition-duration: var(--dc-motion-default);
+  transition-property: width;
+  transition-timing-function: var(--dc-ease-out-express);
 }
 
 .chat-side-panel-surface {
   backface-visibility: hidden;
   transform: translateZ(0);
+  transition-duration: var(--dc-motion-default);
+  transition-property: transform, opacity, box-shadow, border-radius;
+  transition-timing-function: var(--dc-ease-out-express);
   will-change: transform, opacity;
 }
 
+.chat-side-panel-surface--fullscreen-enter {
+  animation: workspace-panel-fullscreen-enter 180ms var(--dc-ease-out-express);
+}
+
+.chat-side-panel-surface--fullscreen-exit {
+  animation: workspace-panel-fullscreen-exit 180ms var(--dc-ease-out-express);
+}
+
 .chat-side-panel-shell--resizing .chat-side-panel-surface {
   transition: none;
 }
 
+.chat-side-panel-shell--resizing {
+  transition: none;
+}
+
+@keyframes workspace-panel-fullscreen-enter {
+  from {
+    opacity: 0.94;
+    transform: translateZ(0) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateZ(0) scale(1);
+  }
+}
+
+@keyframes workspace-panel-fullscreen-exit {
+  from {
+    opacity: 0.96;
+    transform: translateZ(0) scale(1.01);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateZ(0) scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
+  .chat-side-panel-shell {
+    transition: none;
+  }
+
   .chat-side-panel-surface {
     transition: none;
   }
+
+  .chat-side-panel-surface--fullscreen-enter,
+  .chat-side-panel-surface--fullscreen-exit {
+    animation: none;
+  }
 }
 </style>
diff --git a/src/renderer/src/components/sidepanel/WorkspacePanel.vue b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
index 4289f00ab..eb0eec2f0 100644
--- a/src/renderer/src/components/sidepanel/WorkspacePanel.vue
+++ b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
@@ -136,6 +136,8 @@
       :git-diff="selectedGitDiff"
       :loading-file-preview="loadingFilePreview"
       :loading-git-diff="loadingGitDiff"
+      :is-fullscreen="props.isFullscreen"
+      @toggle-fullscreen="emit('toggle-fullscreen')"
     />
   </div>
 </template>
@@ -161,10 +163,12 @@ import type { WorkspaceGitFileChange } from '@shared/presenter'
 const props = defineProps<{
   sessionId: string
   workspacePath: string | null
+  isFullscreen?: boolean
 }>()
 
 const emit = defineEmits<{
   'update:workspacePath': [path: string | null]
+  'toggle-fullscreen': []
 }>()
 
 type ArtifactItem = WorkspaceArtifactContext & {
diff --git a/src/renderer/src/components/sidepanel/WorkspaceViewer.vue b/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
index 0772ed0a5..bd5f74de6 100644
--- a/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
+++ b/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
@@ -33,6 +33,21 @@
           </button>
         </div>
 
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7"
+          data-testid="workspace-viewer-fullscreen-toggle"
+          :title="fullscreenToggleLabel"
+          :aria-label="fullscreenToggleLabel"
+          @click="emit('toggle-fullscreen')"
+        >
+          <Icon
+            :icon="props.isFullscreen ? 'lucide:minimize-2' : 'lucide:maximize-2'"
+            class="h-4 w-4"
+          />
+        </Button>
+
         <Button
           v-if="openFilePath"
           variant="outline"
@@ -76,7 +91,7 @@
             >
               {{ t('chat.workspace.git.staged') }}
             </h4>
-            <pre class="whitespace-pre-wrap break-words">{{ props.gitDiff.staged }}</pre>
+            <pre class="whitespace-pre-wrap wrap-break-word">{{ props.gitDiff.staged }}</pre>
           </section>
           <section v-if="props.gitDiff.unstaged">
             <h4
@@ -84,7 +99,7 @@
             >
               {{ t('chat.workspace.git.unstaged') }}
             </h4>
-            <pre class="whitespace-pre-wrap break-words">{{ props.gitDiff.unstaged }}</pre>
+            <pre class="whitespace-pre-wrap wrap-break-word">{{ props.gitDiff.unstaged }}</pre>
           </section>
           <div
             v-if="!props.gitDiff.staged && !props.gitDiff.unstaged"
@@ -131,6 +146,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@shadcn/components/ui/button'
 import { createWorkspaceClient } from '@api/WorkspaceClient'
@@ -149,6 +165,11 @@ const props = defineProps<{
   gitDiff: WorkspaceGitDiff | null
   loadingFilePreview: boolean
   loadingGitDiff: boolean
+  isFullscreen?: boolean
+}>()
+
+const emit = defineEmits<{
+  'toggle-fullscreen': []
 }>()
 
 const { t } = useI18n()
@@ -251,6 +272,10 @@ const emptyMessage = computed(() => {
   return t('chat.workspace.title')
 })
 
+const fullscreenToggleLabel = computed(() => {
+  return props.isFullscreen ? t('common.restore') : t('common.maximize')
+})
+
 const handleOpenFile = async () => {
   if (!openFilePath.value) {
     return
diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index 6a126b34d..f9a3b0f81 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full min-h-0 w-full flex-row overflow-hidden">
+  <div class="relative flex h-full min-h-0 w-full flex-row overflow-hidden">
     <div
       class="relative flex h-full min-h-0 min-w-0 w-0 flex-1 transition-[width] duration-200 ease-out"
     >
diff --git a/test/renderer/components/ChatSidePanel.test.ts b/test/renderer/components/ChatSidePanel.test.ts
index da1230aec..ade606177 100644
--- a/test/renderer/components/ChatSidePanel.test.ts
+++ b/test/renderer/components/ChatSidePanel.test.ts
@@ -1,21 +1,30 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick, reactive } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
 describe('ChatSidePanel', () => {
-  it('opens the browser sidepanel when OPEN_REQUESTED targets the current host window', async () => {
+  const setup = async (options?: {
+    open?: boolean
+    activeTab?: 'workspace' | 'browser'
+    sessionId?: string | null
+  }) => {
     vi.resetModules()
 
-    const handlers = new Map<string, (payload: unknown) => void>()
-    const sidepanelStore = {
-      open: false,
-      activeTab: 'workspace',
+    let openRequestedHandler: ((payload: unknown) => void) | null = null
+    const sidepanelStore = reactive({
+      open: options?.open ?? true,
+      activeTab: options?.activeTab ?? 'workspace',
       width: 520,
       openWorkspace: vi.fn(),
-      openBrowser: vi.fn(),
-      closePanel: vi.fn(),
+      openBrowser: vi.fn(() => {
+        sidepanelStore.activeTab = 'browser'
+        sidepanelStore.open = true
+      }),
+      closePanel: vi.fn(() => {
+        sidepanelStore.open = false
+      }),
       setWidth: vi.fn()
-    }
+    })
 
     vi.doMock('vue-i18n', () => ({
       useI18n: () => ({
@@ -23,59 +32,81 @@ describe('ChatSidePanel', () => {
       })
     }))
 
+    vi.doMock('@iconify/vue', () => ({
+      Icon: defineComponent({
+        name: 'Icon',
+        template: '<span data-testid="icon" />'
+      })
+    }))
+
+    vi.doMock('@api/BrowserClient', () => ({
+      createBrowserClient: () => ({
+        onOpenRequestedForCurrentWindow: vi.fn((handler: (payload: unknown) => void) => {
+          openRequestedHandler = handler
+          return vi.fn()
+        })
+      })
+    }))
+
     vi.doMock('@/components/sidepanel/BrowserPanel.vue', () => ({
       default: defineComponent({
         name: 'BrowserPanel',
-        template: '<div />'
+        template: '<div data-testid="browser-panel-stub" />'
       })
     }))
 
     vi.doMock('@/components/sidepanel/WorkspacePanel.vue', () => ({
       default: defineComponent({
         name: 'WorkspacePanel',
-        template: '<div />'
+        props: {
+          isFullscreen: {
+            type: Boolean,
+            default: false
+          }
+        },
+        emits: ['toggle-fullscreen'],
+        template:
+          '<div data-testid="workspace-panel-stub" :data-fullscreen="String(isFullscreen)"><button data-testid="workspace-panel-toggle" @click="$emit(\'toggle-fullscreen\')">toggle</button></div>'
       })
     }))
 
     vi.doMock('@/stores/ui/sidepanel', () => ({
       useSidepanelStore: () => sidepanelStore
     }))
-    ;(window as any).api = {
-      ...(window as any).api,
-      getWindowId: vi.fn(() => 7)
-    }
-    ;(window as any).deepchat = {
-      ...(window as any).deepchat,
-      on: vi.fn((eventName: string, handler: (payload: unknown) => void) => {
-        handlers.set(eventName, handler)
-        return vi.fn()
-      })
-    }
 
     const ChatSidePanel = (await import('@/components/sidepanel/ChatSidePanel.vue')).default
-    mount(ChatSidePanel, {
+    const wrapper = mount(ChatSidePanel, {
       props: {
-        sessionId: 'session-1',
+        sessionId: options?.sessionId ?? 'session-1',
         workspacePath: 'C:/workspace'
       },
       global: {
         stubs: {
           Button: defineComponent({
             name: 'Button',
-            template: '<button v-bind="$attrs"><slot /></button>'
-          }),
-          Icon: true,
-          BrowserPanel: true,
-          WorkspacePanel: true
+            emits: ['click'],
+            template: '<button v-bind="$attrs" @click="$emit(\'click\', $event)"><slot /></button>'
+          })
         }
       }
     })
 
     await flushPromises()
-    const handler = handlers.get('browser.open.requested')
-    expect(handler).toBeTypeOf('function')
 
-    handler?.({
+    return {
+      wrapper,
+      sidepanelStore,
+      emitOpenRequested: (payload: unknown) => openRequestedHandler?.(payload)
+    }
+  }
+
+  it('opens the browser sidepanel when OPEN_REQUESTED targets the current host window', async () => {
+    const { sidepanelStore, emitOpenRequested } = await setup({
+      open: false,
+      activeTab: 'workspace'
+    })
+
+    emitOpenRequested({
       windowId: 7,
       sessionId: 'session-1',
       url: 'https://example.com',
@@ -84,4 +115,30 @@ describe('ChatSidePanel', () => {
 
     expect(sidepanelStore.openBrowser).toHaveBeenCalledTimes(1)
   })
+
+  it('toggles fullscreen layout from the workspace panel and clears it when switching tabs', async () => {
+    const { wrapper, sidepanelStore } = await setup({
+      open: true,
+      activeTab: 'workspace'
+    })
+
+    expect(
+      wrapper.get('[data-testid="chat-side-panel-shell"]').attributes('data-workspace-fullscreen')
+    ).toBe('false')
+    expect(wrapper.find('[data-testid="chat-side-panel-resize-handle"]').exists()).toBe(true)
+
+    await wrapper.get('[data-testid="workspace-panel-toggle"]').trigger('click')
+
+    expect(
+      wrapper.get('[data-testid="chat-side-panel-shell"]').attributes('data-workspace-fullscreen')
+    ).toBe('true')
+    expect(wrapper.find('[data-testid="chat-side-panel-resize-handle"]').exists()).toBe(false)
+
+    sidepanelStore.activeTab = 'browser'
+    await nextTick()
+
+    expect(
+      wrapper.get('[data-testid="chat-side-panel-shell"]').attributes('data-workspace-fullscreen')
+    ).toBe('false')
+  })
 })
diff --git a/test/renderer/components/WorkspaceViewer.test.ts b/test/renderer/components/WorkspaceViewer.test.ts
index d98a6e934..2fe0eaf24 100644
--- a/test/renderer/components/WorkspaceViewer.test.ts
+++ b/test/renderer/components/WorkspaceViewer.test.ts
@@ -58,8 +58,15 @@ describe('WorkspaceViewer', () => {
       useSidepanelStore: () => sidepanelStore
     }))
 
-    vi.doMock('@api/legacy/presenters', () => ({
-      useLegacyPresenter: () => ({
+    vi.doMock('@iconify/vue', () => ({
+      Icon: defineComponent({
+        name: 'Icon',
+        template: '<span data-testid="icon" />'
+      })
+    }))
+
+    vi.doMock('@api/WorkspaceClient', () => ({
+      createWorkspaceClient: () => ({
         openFile: openFileMock
       })
     }))
@@ -117,6 +124,7 @@ describe('WorkspaceViewer', () => {
         gitDiff: null,
         loadingFilePreview: false,
         loadingGitDiff: false,
+        isFullscreen: false,
         ...options?.props
       },
       global: {
@@ -133,6 +141,28 @@ describe('WorkspaceViewer', () => {
     return { wrapper, sidepanelStore, openFileMock }
   }
 
+  it('shows a maximize button and emits toggle-fullscreen', async () => {
+    const { wrapper } = await setup()
+
+    const fullscreenButton = wrapper.get('[data-testid="workspace-viewer-fullscreen-toggle"]')
+    expect(fullscreenButton.attributes('title')).toBe('common.maximize')
+
+    await fullscreenButton.trigger('click')
+    expect(wrapper.emitted('toggle-fullscreen')).toEqual([[]])
+  })
+
+  it('shows restore label while fullscreen is active', async () => {
+    const { wrapper } = await setup({
+      props: {
+        isFullscreen: true
+      }
+    })
+
+    expect(
+      wrapper.get('[data-testid="workspace-viewer-fullscreen-toggle"]').attributes('title')
+    ).toBe('common.restore')
+  })
+
   it('shows raw artifact preview through preview pane fallback', async () => {
     const { wrapper } = await setup()