<%= tag.div \
      id: "command-terminal",
      class: "terminal full-width flex flex-column justify-end",
      data: {
        controller: "toggle-class terminal navigable-list",
        terminal_error_class: "terminal--error",
        terminal_confirmation_class: "terminal--confirmation",
        terminal_help_class: "terminal--showing-help",
        terminal_output_class: "terminal--showing-output",
        terminal_busy_class: "terminal--busy",
        toggle_class_toggle_class: "terminal--open",
        navigable_list_reverse_order_value: true,
        action: "keydown->terminal#handleKeyPress keydown->navigable-list#navigate focusin->navigable-list#select keydown.esc->toggle-class#remove:stop keydown.esc->terminal#focus keydown.esc->navigable-list#selectLast keydown.esc@document->terminal#hideMenus" } do %>
  <%= turbo_frame_tag :recent_commands, src: commands_path, data: { terminal_target: "recentCommands" } %>
  <div class="terminal__output" data-terminal-target="output"></div>

  <%= render "commands/form" %>
<% end %>

