feat: embed to side panel

[Junyi-99]

Feat: embedded paperdebugger window.

Fix

Overleaf Style Disorder.

Details

This pull request introduces several UI and usability improvements, focusing on enhanced tab resizing, embedding support, and a more flexible developer tools layout. The main changes include adding a draggable resize handle for tabs, updating the layout and styling for the dev tools, and improving store state management for various UI widths. There are also minor bugfixes and style tweaks for better display and compatibility.

Tab Resizing & Sidebar Improvements

• Added a draggable resize handle to the tab items in Tabs, allowing users to adjust tab width dynamically. The component now auto-collapses text when the width is below a threshold, and state is managed via the store for persistence. (webapp/_webapp/src/components/tabs.tsx, webapp/_webapp/src/stores/conversation/conversation-ui-store.ts, webapp/_webapp/src/index.css) [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Dev Tools Layout & Styling

• Redesigned the dev tools HTML structure for a more modern, flexible layout using flexbox, and improved the code block and variable display for better readability and overflow handling. (webapp/_webapp/src/devtool/index.html, webapp/_webapp/src/devtool/app.tsx, webapp/_webapp/src/devtool/VariableInput.tsx) [1] [2] [3] [4] [5]

General Styling & Compatibility

• Added CSS fixes for media element alignment and Overleaf compatibility, and improved sidebar and tab styling for embedded modes. (webapp/_webapp/src/index.css) [1] [2] [3]

Codebase Cleanups & Refactoring

• Removed unused dev tool imports and related code from the main app entry point to streamline the main application logic. (webapp/_webapp/src/main.tsx, webapp/_webapp/src/views/devtools/index.tsx) [1] [2] [3] [4]

New Components

• Introduced a Body component to handle authentication and conditional rendering of the main application or login view. (webapp/_webapp/src/views/body.tsx)

[Copilot]

Pull request overview

This PR adds an embedded sidebar mode for PaperDebugger, refactors the window controller and authentication body into reusable components, introduces tab-width resizing, and modernizes the DevTools layout and integration.

Changes:

• Introduces a new embed display mode with an EmbedSidebar view that integrates the app into a host .ide-redesign-body layout, including a draggable width handle and dedicated styles.
• Refactors the window header controls into WindowController, adds store-managed tab width with draggable resizing in Tabs, and centralizes auth-gated rendering into a new Body component.
• Updates DevTools HTML structure and TSX rendering to use a flex-based layout and moves DevTools mounting from the main app into the devtool application, alongside Overleaf compatibility CSS tweaks.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
webapp/_webapp/src/views/window-controller.tsx	New reusable window controller component providing the title bar, close button, and layout mode controls including the new embed mode.
webapp/_webapp/src/views/index.tsx	MainDrawer now routes to EmbedSidebar when displayMode === "embed" and reuses the new WindowController and Body components.
webapp/_webapp/src/views/embed-sidebar.tsx	Implements embedded sidebar mounting into .ide-redesign-body, sets up flex layout, manages embedWidth, and adds a left-side resize handle with global mouse listeners.
webapp/_webapp/src/views/devtools/index.tsx	Removes Rnd usage and restructures DevTools UI into a scrollable, card-based flex layout suitable for embedding inside the devtool page.
webapp/_webapp/src/views/body.tsx	New component that conditionally renders PaperDebugger or Login based on authentication, reused by floating and embedded layouts.
webapp/_webapp/src/stores/conversation/conversation-ui-store.ts	Adds embed display mode, embedWidth, and tabItemsWidth (with setters), and adjusts default floating window dimensions.
webapp/_webapp/src/main.tsx	Removes DevTools store usage and main-app DevTools rendering, leaving DevTools to be handled by the dedicated devtool app.
webapp/_webapp/src/index.css	Adds Overleaf/media compatibility tweaks and new styles for the embedded sidebar and tab-resize handles, including .pd-embed-resize-handle and .pd-tab-items-resize-handle.
webapp/_webapp/src/devtool/index.html	Wraps the devtool page in .ide-redesign-body / .ide-redesign-inner containers and prepares separate roots for DevTools and PaperDebugger in a flex layout.
webapp/_webapp/src/devtool/app.tsx	Extends the devtool app UI to show current auth/connection state and conditionally render DevTools based on useDevtoolStore().showTool.
webapp/_webapp/src/devtool/VariableInput.tsx	Improves variable display by allowing long values to wrap (break-all) within the available width.
webapp/_webapp/src/components/tabs.tsx	Adds draggable width resizing for the tab sidebar, persists width in the store, and auto-collapses tab text when width drops below a threshold.
webapp/_webapp/src/views/devtools/index.tsx	(TSX side of DevTools) Aligns with new static layout, introducing sections with clearer headers, counters, and button groups for conversation and streaming message manipulation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.