[Feature] Add Clear Terminal Button to Terminal Panel

[grishabhatia]

Problem statement

Feature Description

Add a "Clear Terminal" button to the terminal panel that clears all terminal output with one click.

Current Problem

Currently, terminal output accumulates over time. Users have to manually type the clear command or refresh the page, which is not convenient, especially on mobile devices.

Proposed Solution

Add a "Clear Terminal" button (trash can 🗑️ or broom 🧹 icon) to the terminal component's top-right corner (or existing button panel). When clicked:

1. All terminal text/history is cleared
2. A fresh prompt shows (like $ or > )
3. Only visible output is cleared - WebContainer terminal instance does NOT reset

Expected Behavior

• Terminal clears instantly on button click
• No undo needed (clear is a one-way action)
• Optional keyboard shortcut: Ctrl/Cmd + L (standard terminal convention)

Alternative Approaches Considered

• User types clear command (current workaround)
• Right-click context menu with "Clear" option (more complex)

Additional Context

• All popular IDEs (VS Code, Cursor, Windsurf) have a clear terminal button
• Very helpful for mobile users who can't easily type clear on soft keyboard
• Simple implementation: Use xterm.js clear() method

Mockup

Terminal header should have delete icon:
[Terminal] [🐚 bash] [🗑️ Clear] [✖️ Close]

Labels requested: gssoc26, gssoc:approved, level:intermediate

Proposed solution

Add a "Clear Terminal" button (trash can 🗑️ icon) to the terminal panel's top-right corner.

Implementation details:

1. Locate terminal component file: modules/terminal/components/terminal.tsx
2. Add a new Button component next to existing buttons (close, expand, etc.)
3. Use xterm.js built-in clear() method:

   const clearTerminal = () => {
     if (terminal.current) {
       terminal.current.clear();
     }
   };

Alternatives considered

1. Manual clear command - User types "clear" in terminal (current workaround but inconvenient on mobile)
2. Right-click context menu - Adds complexity and not discoverable
3. Auto-clear on new command - Would remove useful history, user has no control
4. Keyboard shortcut only - Not discoverable for new users, especially on mobile

Estimated scope

Small

Primary area

Playground editor

Additional context

No response

Confirmation

• I searched existing issues before opening this request.

[github-actions]

👋 Thanks for opening an issue, @grishabhatia!

Our maintainers will review this issue shortly 🚀

---

📘 Before Contributing

Please read the contribution guide carefully before requesting assignment:

👉 https://github.com/piyushdotcomm/Editron/blob/main/CONTRIBUTING.md

---

🏷️ NSoC'26 / GSSoC'26 Requirement

Please clearly mention whether you are contributing via:

• NSoC'26
• GSSoC'26
• or as a regular contributor

Example: I am contributing under GSSoC'26

⚠️ Assignment requests without this information may be rejected automatically.

---

⏳ GSSoC Assignment Restriction

GSSoC contributors will only be allowed to take issue assignments after:

🗓️ May 15th, 12:00 AM IST

Before that date, assignment requests from GSSoC contributors will be automatically blocked.

---

🤖 Assignment System

To request assignment, comment: /assign or assign me

The smart assignment workflow validates:

• contributor eligibility
• NSoC/GSSoC participation mention
• active issue assignment limits
• repository contribution rules

---

⚠️ Important Repository Rules

• Do not start working before assignment
• Maximum 3 active assigned issues per contributor
• Contributors are encouraged to combine related fixes into 1–2 quality PRs instead of many small PRs
• PRs without assignment may be closed
• Spam or low-quality PRs may be rejected

Happy contributing 🎉

[grishabhatia]

@piyushdotcomm @maintainers

Please assign this issue to me. I am a GSSoC26 participant and I want to work on this feature.

Details:

• Feature: Add Clear Terminal Button
• Timeline: Will complete within 2-3 hours
• Labels requested: gssoc26, gssoc:approved, level:intermediate

I have already gone through the codebase and identified the files to modify (modules/terminal/components/terminal.tsx). Will use xterm.js clear() method for implementation.

Looking forward to contributing! 🚀

[github-actions]

⚠️ Maintainer Ping Warning

Hi @grishabhatia,

Please avoid repeatedly pinging maintainers for assignment, review, or merge requests.

Reviews and assignments are handled in queue order. Excessive pinging may lead to spam labeling and restrictions.

Recommended wait times:

• Assignment: 12–24 hours
• Review: 24–72 hours

[piyushdotcomm]

@grishabhatia assigned to you. dont forget to star the repo