Would you consider adding a CollapsiblePanel component?

[changlv]

@nickprotop Looks like I'm burning your tokens again ！ haha~

The requirement is straightforward: click the header to expand content, and click again to collapse it, leaving only the title visible.

Use cases:

• UI layouts similar to common Q&A systems.
• Collapsing/expanding secondary content in AI Agent clients, such as reasoning steps, sub-agent invocations and tool calls.

We don't need a left-right accordion style (In my opinion, accordion components are not a typical requirement for TUI). Only vertical expand/collapse functionality is needed.

Just a suggestion!

Hope you have a wonderful weekend!

[nickprotop]

Hi @changlv — this is done and merged to master. Thanks again for the well-scoped suggestion; it slotted in nicely.

CollapsiblePanel is a container control with a clickable header that toggles a body of child controls — vertical expand/collapse only, exactly as you described (no accordion). It hosts any IWindowControls, so it's a good fit for both your use cases: FAQ/Q&A panels and collapsing secondary content in AI-agent clients (reasoning steps, sub-agent calls, tool-call payloads).

Quick start:

var panel = Controls.CollapsiblePanel("[bold]Reasoning[/] [grey](3 steps)[/]")
    .Expanded()
    .AddControl(Controls.Markup()
        .AddLine("[dim]• step one[/]")
        .AddLine("[dim]• step two[/]")
        .Build())
    .OnExpandedChanged((s, expanded) => { /* react */ })
    .Build();

What it supports:

• Two header styles — borderless (a single ▸ Title / ▾ Title row) and bordered (a box with the title in the top border). .WithHeaderStyle(...).
• Markup titles (not plain strings) — rendered through the normal markup parser, e.g. [yellow]Tool call:[/] read_file.
• Custom expand/collapse icons (.WithIcons("[-]", "[+]")), an optional header separator line, and .WithMaxContentHeight(n) to cap the body (wrap a ScrollablePanel inside for a scrollable capped body).
• Three ways to toggle: click the header, press Enter/Space when it's focused, or set IsExpanded / call Toggle() from code. There's an ExpandedChanged event.
• Starts expanded or collapsed (.Expanded() / .Collapsed()), optional open/close animation (.Animated()), and a focused-header color so it's clear which section is the active tab stop.

On the copy-as-plain-text point from your original post: text selection/copy already strips markup formatting library-wide, so content copied out of a panel body comes through as plain text.

There's a reference page in the docs (docs/controls/CollapsiblePanel.md) and a live demo — run the DemoApp and open "Collapsible Panel"; the showcase has an AI-agent-transcript example plus interactive and scrollable bodies.

Give it a try and let me know if anything's missing for your scenarios.

[changlv]

@nickprotop cool~！What exciting news! I'm currently battling with the network while syncing the project. I'll send you my feedback after testing!

[changlv]

@nickprotop This is exactly what I wanted! It works perfectly after testing. Thanks a lot for your great work!