Collapsible Global Sidebar for Kilo Code Web App

[furqanahmadrao]

Feature Request: Collapsible Global Sidebar for Kilo Code Web App

Overview

Kilo Code’s web interface (app.kilo.ai) includes a global left navigation sidebar that is always visible across features such as App Builder, Cloud Agents, Sessions, etc.

While this sidebar is useful for navigation, it becomes a major space constraint in workflows like App Builder, where multiple panes already exist.

Current Layout Issue

In the App Builder view, the screen is divided into:

• Global Kilo Code navigation sidebar (left)
• Chat panel for agent interaction (center)
• Live preview panel (right)

With all three visible at once, horizontal space becomes very limited — especially on laptops or smaller displays. The global sidebar often becomes redundant once the user is already inside a feature.

Problem

• The global sidebar cannot be collapsed or hidden
• It reduces focus on the actual workspace (chat + preview)
• It creates visual clutter when working inside feature-specific layouts
• There is no “focus mode” or space-optimized layout

Proposed Solution

Introduce a collapsible / hideable global sidebar across the Kilo Code web app:

Suggested behavior:

• A toggle button to collapse/expand the global sidebar
• Optional icon-only collapsed state
• Remember user preference across sessions
• Works consistently across all features (App Builder, Cloud Agents, etc.)

Why This Helps

• 🧠 Better focus while building apps
• 📐 More space for preview and interaction
• 💻 Improved usability on smaller screens
• 🎯 Aligns with modern IDE and builder UX patterns (VS Code, Figma, etc.)

Scope

This is a UI/UX enhancement for the entire Kilo Code web app, not limited to App Builder alone.
App Builder simply highlights the issue more clearly due to its multi-pane layout.

---

Thanks for considering this improvement! I believe it would significantly enhance productivity and usability for power users on the web interface 🙌