`fea4bce`

feat: add approval bar and slash command suggestions

**Approval Bar (Claude Code style):**
- Inline approval bar above input for confirmations
- Shows: [tool] command_preview [Y]es [n]o [e]dit
- Press 'Y' to approve, 'n' to reject, 'e' to edit
- Edit puts command in input field for modification
- Replaces modal dialog with cleaner inline UX

**Slash Command Suggestions:**
- Shadow text suggestions for /help, /model, /clear, /exit
- Shows completion in placeholder: "help (Tab to complete)"
- Press Tab to accept suggestion

**Other Improvements:**
- Fix "Show full output" toggle visibility
- Hide completion check messages from users
- Refocus input after rejection

Authored by

espadonne 4 months ago

SHA: fea4bce833145b56810e11a3da1e1d52e26b7759
Parents: 5453736
Tree: a1af50b

5 changed files

Status	File	+	-
M	`src/loader/ui/app.py`	80	53
M	`src/loader/ui/widgets/__init__.py`	4	0
A	`src/loader/ui/widgets/approval_bar.py`	144	0
M	`src/loader/ui/widgets/input_area.py`	76	5
M	`src/loader/ui/widgets/tool_widget.py`	8	4

src/loader/ui/app.pymodified

  """Main Textual application for Loader TUI."""
 +import asyncio
  import time
  from pathlib import Path
  from textual.binding import Binding
  from textual.containers import Container, ScrollableContainer
  from textual.reactive import reactive
 -from textual.widgets import Footer, Static
 +from textual.widgets import Footer, Input, Static
  from textual import work
  from textual.worker import Worker, get_current_worker
      ToolCallStarted,
      VerificationPerformed,
+ )
 -from .widgets import ConfirmationModal, DiffWidget, InputArea, StatusLine, StreamingText, ToolCallWidget
 +from .widgets import ApprovalBar, ConfirmationModal, DiffWidget, InputArea, StatusLine, StreamingText, ToolCallWidget
  class LoaderApp(App):
          self._streamed_content: bool = False  # Track if any content was streamed
          self._tool_widget_queue: list[ToolCallWidget] = []  # Queue of pending tool widgets
          self._timer_handle = None
 +        # Approval bar state
 +        self._pending_confirmation: asyncio.Future | None = None
 +        self._pending_command: str = ""
      def _debug_log(self, message: str) -> None:
          """Write debug message to log file."""
      def compose(self) -> ComposeResult:
          yield Container(
              ScrollableContainer(id="message-area"),
 +            ApprovalBar(id="approval-bar"),
              InputArea(id="input-area"),
              StatusLine(id="status-line"),
              id="main-container",
          """Show help message with available commands."""
          help_text = """[bold]Available Commands:[/bold]
 -[cyan]/help[/cyan], [cyan]/h[/cyan]        Show this help message
 -[cyan]/exit[/cyan], [cyan]/q[/cyan]        Exit the application
 -[cyan]/clear[/cyan], [cyan]/c[/cyan]       Clear the conversation
 -[cyan]/model[/cyan] [dim]<name>[/dim]   Switch to a different model
 -[cyan]/models[/cyan]         List available models
 +[cyan]/help[/cyan], [cyan]/h[/cyan]          Show this help message
 +[cyan]/exit[/cyan], [cyan]/q[/cyan]          Exit the application
 +[cyan]/clear[/cyan], [cyan]/c[/cyan]         Clear the conversation
 +[cyan]/model[/cyan], [cyan]/models[/cyan]    Open model selector (fzf-style)
 +[cyan]/model[/cyan] [dim]<name>[/dim]     Switch to a specific model
  [bold]Shortcuts:[/bold]
 -[dim]Ctrl+C[/dim]          Exit
 -[dim]Ctrl+L[/dim]          Clear conversation"""
 +[dim]Ctrl+C[/dim]            Exit
 +[dim]Ctrl+L[/dim]            Clear conversation"""
          self._add_message(help_text)
      def _handle_model_command(self, args: str) -> None:
 -        """Handle /model command - switch or list models."""
 +        """Handle /model command - switch or show selector."""
          if not args:
 -            # List available models
 -            self._list_models()
 +            # Show interactive model selector
 +            self._show_model_selector()
          else:
 -            # Switch to specified model
 +            # Switch to specified model directly
              self._switch_model(args.strip())
 -    def _list_models(self) -> None:
 -        """List available Ollama models."""
 -        # Use Textual's worker to run async code
 -        self.run_worker(self._fetch_and_display_models())
 +    def _show_model_selector(self) -> None:
 +        """Show interactive model selection modal."""
 +        # Use Textual's worker to fetch models then show modal
 +        self.run_worker(self._fetch_and_show_selector())
++
 +    async def _fetch_and_show_selector(self) -> None:
 +        """Fetch models and show the selection modal."""
 +        from .widgets import ModelSelectModal
 -    async def _fetch_and_display_models(self) -> None:
 -        """Fetch and display available models (async worker)."""
          try:
              models = []
              if hasattr(self.agent.backend, "list_models"):
                  models = await self.agent.backend.list_models()
              if models:
 -                lines = ["[bold]Available Models:[/bold]", ""]
                  current = self.agent.backend.model if hasattr(self.agent.backend, "model") else ""
 -                for m in models:
 -                    name = m.get("name", "")
 -                    size_mb = m.get("size", 0) / (1024 * 1024)
 -                    marker = "[green]●[/green]" if name == current else "[dim]○[/dim]"
 -                    lines.append(f"  {marker} [cyan]{name}[/cyan] [dim]({size_mb:.0f}MB)[/dim]")
 -                lines.append("")
 -                lines.append("[dim]Use /model <name> to switch[/dim]")
 -                self._add_message("\n".join(lines))
++
 +                def on_select(selected: str | None) -> None:
 +                    if selected:
 +                        self._switch_model(selected)
++
 +                # Schedule on main thread - workers can use call_later
 +                self.call_later(
 +                    lambda: self.push_screen(ModelSelectModal(models, current), on_select)
 +                )
              else:
                  self._add_message("[yellow]No models found. Is Ollama running?[/yellow]")
          except Exception as e:
          message: str,
          details: str,
      ) -> bool:
 -        """Show confirmation modal and wait for user response."""
 -        modal = ConfirmationModal(
 -            tool_name=tool_name,
 -            message=message,
 -            details=details,
 -        )
 -        return await self.push_screen_wait(modal)
 +        """Show approval bar and wait for user response."""
 +        # Create a future to wait on
 +        loop = asyncio.get_event_loop()
 +        self._pending_confirmation = loop.create_future()
 +        self._pending_command = details
++
 +        # Show the approval bar
 +        approval_bar = self.query_one("#approval-bar", ApprovalBar)
 +        self.call_later(lambda: approval_bar.show_approval(tool_name, message, details))
++
 +        # Wait for user response
 +        try:
 +            return await self._pending_confirmation
 +        finally:
 +            self._pending_confirmation = None
 +            self._pending_command = ""
++
 +    def on_approval_bar_approved(self, event: ApprovalBar.Approved) -> None:
 +        """Handle approval from the bar."""
 +        if self._pending_confirmation and not self._pending_confirmation.done():
 +            self._pending_confirmation.set_result(True)
++
 +    def on_approval_bar_rejected(self, event: ApprovalBar.Rejected) -> None:
 +        """Handle rejection from the bar."""
 +        if self._pending_confirmation and not self._pending_confirmation.done():
 +            self._pending_confirmation.set_result(False)
 +        # Refocus input
 +        self.query_one(InputArea).focus_input()
++
 +    def on_approval_bar_edit_requested(self, event: ApprovalBar.EditRequested) -> None:
 +        """Handle edit request - put command in input for editing."""
 +        if self._pending_confirmation and not self._pending_confirmation.done():
 +            self._pending_confirmation.set_result(False)
 +        # Put the command in the input field for editing
 +        input_area = self.query_one(InputArea)
 +        input_widget = input_area.query_one("#user-input", Input)
 +        input_widget.value = event.command
 +        input_widget.cursor_position = len(event.command)
 +        input_area.focus_input()
      @work(exclusive=True)
      async def run_agent(self, user_input: str) -> str:
      def on_steering_received(self, message: SteeringReceived) -> None:
          """Handle steering message being processed by agent."""
 -        # The steering message was already displayed when sent,
 -        # this confirms it was injected into the agent's context
 -        self._add_message(
 -            "[dim italic]↪ Steering message injected, agent will incorporate it...[/dim italic]"
 -        )
 +        # Don't display anything - auto-steering is internal
 +        # Only show if this was user-initiated (but we don't track that currently)
 +        pass
      # Reasoning event handlers
      def on_decomposition_created(self, message: DecompositionCreated) -> None:
      def on_completion_check_performed(self, message: CompletionCheckPerformed) -> None:
          """Handle task completion check."""
 -        check = message.completion_check
 -        if check and not check.is_complete:
 -            lines = ["[bold yellow]⚡ Task not complete yet![/bold yellow]"]
 -            if check.accomplished:
 -                lines.append(f"  [green]Done:[/green] {', '.join(check.accomplished[:3])}")
 -            if check.suggested_next_steps:
 -                lines.append("  [yellow]Next steps:[/yellow]")
 -                for step in check.suggested_next_steps[:2]:
 -                    lines.append(f"    → {step}")
 -            lines.append("  [italic]Continuing...[/italic]")
 -            self._add_message("\n".join(lines), "completion-check")
 -        else:
 -            self._add_message(f"[dim]{escape(message.content)}[/dim]")
 +        # Don't display anything - completion checks are internal steering
 +        # The agent will continue automatically if needed
 +        pass
      def on_rollback_tracked(self, message: RollbackTracked) -> None:
          """Handle rollback action tracking (verbose mode only)."""

src/loader/ui/widgets/__init__.pymodified

  from .diff_widget import DiffWidget
  from .streaming import StreamingText
  from .confirmation import ConfirmationModal
 +from .model_select import ModelSelectModal
 +from .approval_bar import ApprovalBar
  __all__ = [
 +    "ApprovalBar",
      "InputArea",
      "StatusLine",
      "ToolCallWidget",
      "DiffWidget",
      "StreamingText",
      "ConfirmationModal",
 +    "ModelSelectModal",
+ ]

src/loader/ui/widgets/approval_bar.pyadded

 +"""Approval bar widget for command confirmation (Claude Code style)."""
++
 +from textual.app import ComposeResult
 +from textual.containers import Horizontal
 +from textual.message import Message
 +from textual.widgets import Static
 +from textual.binding import Binding
 +from textual.widget import Widget
++
++
 +class ApprovalBar(Widget):
 +    """Inline approval bar that appears above the input when confirmation is needed.
++
 +    Shows: [tool_name] command_preview                    [Y]es [n]o [e]dit
++
 +    Similar to Claude Code's approval flow.
 +    """
++
 +    BINDINGS = [
 +        Binding("y", "approve", "Yes", show=False, priority=True),
 +        Binding("n", "reject", "No", show=False, priority=True),
 +        Binding("e", "edit", "Edit", show=False, priority=True),
 +        Binding("escape", "reject", "Cancel", show=False, priority=True),
 +    ]
++
 +    DEFAULT_CSS = """
 +    ApprovalBar {
 +        height: auto;
 +        dock: bottom;
 +        display: none;
 +        padding: 0 1;
 +        background: $surface;
 +        border-top: solid $warning;
 +    }
++
 +    ApprovalBar.visible {
 +        display: block;
 +    }
++
 +    ApprovalBar #approval-container {
 +        width: 100%;
 +        height: auto;
 +    }
++
 +    ApprovalBar #approval-tool {
 +        color: $warning;
 +        text-style: bold;
 +        padding-right: 1;
 +    }
++
 +    ApprovalBar #approval-preview {
 +        color: $text;
 +    }
++
 +    ApprovalBar #approval-keys {
 +        color: $text-muted;
 +        text-align: right;
 +        width: auto;
 +        dock: right;
 +    }
++
 +    ApprovalBar #approval-keys .key {
 +        color: $success;
 +        text-style: bold;
 +    }
 +    """
++
 +    class Approved(Message):
 +        """Message sent when user approves the action."""
 +        pass
++
 +    class Rejected(Message):
 +        """Message sent when user rejects the action."""
 +        pass
++
 +    class EditRequested(Message):
 +        """Message sent when user wants to edit the command."""
 +        def __init__(self, command: str) -> None:
 +            self.command = command
 +            super().__init__()
++
 +    def __init__(self, *args, **kwargs) -> None:
 +        super().__init__(*args, **kwargs)
 +        self._tool_name: str = ""
 +        self._command_preview: str = ""
 +        self._full_command: str = ""
++
 +    def compose(self) -> ComposeResult:
 +        with Horizontal(id="approval-container"):
 +            yield Static("", id="approval-tool")
 +            yield Static("", id="approval-preview")
 +            yield Static(
 +                "[Y]es  [n]o  [e]dit",
 +                id="approval-keys",
 +            )
++
 +    def show_approval(self, tool_name: str, message: str, details: str = "") -> None:
 +        """Show the approval bar with a pending action.
++
 +        Args:
 +            tool_name: Name of the tool (e.g., "bash", "write")
 +            message: Short message about the action
 +            details: Command or details to show (and potentially edit)
 +        """
 +        self._tool_name = tool_name
 +        self._full_command = details
++
 +        # Update the display
 +        tool_label = self.query_one("#approval-tool", Static)
 +        preview_label = self.query_one("#approval-preview", Static)
++
 +        tool_label.update(f"[{tool_name}]")
++
 +        # Truncate preview if too long
 +        preview = details if details else message
 +        if len(preview) > 60:
 +            preview = preview[:57] + "..."
 +        preview_label.update(preview)
++
 +        # Show the bar
 +        self.add_class("visible")
 +        self.focus()
++
 +    def hide_approval(self) -> None:
 +        """Hide the approval bar."""
 +        self.remove_class("visible")
 +        self._tool_name = ""
 +        self._command_preview = ""
 +        self._full_command = ""
++
 +    def action_approve(self) -> None:
 +        """Handle 'y' key - approve the action."""
 +        self.post_message(self.Approved())
 +        self.hide_approval()
++
 +    def action_reject(self) -> None:
 +        """Handle 'n' or escape - reject the action."""
 +        self.post_message(self.Rejected())
 +        self.hide_approval()
++
 +    def action_edit(self) -> None:
 +        """Handle 'e' key - edit the command."""
 +        self.post_message(self.EditRequested(self._full_command))
 +        self.hide_approval()

src/loader/ui/widgets/input_area.pymodified

 -"""Input area widget with '>' prompt and history support."""
 +"""Input area widget with '>' prompt, history, and shadow text suggestions."""
  from textual.app import ComposeResult
  from textual.containers import Horizontal
  from textual.widgets import Input, Static
 +# Available slash commands for suggestions
 +SLASH_COMMANDS = [
 +    "/help",
 +    "/model",
 +    "/models",
 +    "/clear",
 +    "/exit",
 +]
++
++
  class InputArea(Horizontal):
 -    """Fixed input area at bottom of screen with '>' prompt and history."""
 +    """Fixed input area at bottom of screen with '>' prompt, history, and shadow text."""
++
 +    DEFAULT_CSS = """
 +    InputArea {
 +        height: auto;
 +        width: 100%;
 +    }
++
 +    InputArea .prompt {
 +        width: auto;
 +        padding: 0 1 0 0;
 +    }
++
 +    InputArea #input-wrapper {
 +        width: 1fr;
 +    }
++
 +    InputArea #user-input {
 +        width: 100%;
 +        background: transparent;
 +    }
++
 +    InputArea #shadow-text {
 +        color: $text-disabled;
 +        layer: below;
 +        offset: 0 0;
 +    }
 +    """
      class Submitted(Message):
          """Message sent when user submits input."""
          self._history: list[str] = []
          self._history_index: int = -1  # -1 = new input, 0+ = history position
          self._current_input: str = ""  # Saves current input when navigating
 +        self._suggestion: str = ""  # Current shadow text suggestion
      def compose(self) -> ComposeResult:
          yield Static("> ", classes="prompt")
          yield Input(placeholder="Type a message...", id="user-input")
 +    def on_input_changed(self, event: Input.Changed) -> None:
 +        """Handle input changes for shadow text suggestions."""
 +        value = event.value
 +        self._suggestion = ""
++
 +        # Suggest slash commands
 +        if value.startswith("/") and len(value) > 0:
 +            for cmd in SLASH_COMMANDS:
 +                if cmd.startswith(value) and cmd != value:
 +                    self._suggestion = cmd[len(value):]  # Just the completion part
 +                    break
++
 +        # Update placeholder to show suggestion
 +        input_widget = event.input
 +        if self._suggestion:
 +            # Show the suggestion as part of placeholder
 +            input_widget.placeholder = f"{self._suggestion}  (Tab to complete)"
 +        else:
 +            input_widget.placeholder = "Type a message..."
++
      def on_input_submitted(self, event: Input.Submitted) -> None:
          """Handle input submission."""
          value = event.value.strip()
              # Reset history navigation
              self._history_index = -1
              self._current_input = ""
 +            self._suggestion = ""
              self.post_message(self.Submitted(value))
              event.input.clear()
 +            event.input.placeholder = "Type a message..."
      def on_key(self, event: Key) -> None:
 -        """Handle up/down arrow keys for history navigation."""
 -        if not self._history:
 +        """Handle special keys: Tab for completion, Up/Down for history."""
 +        input_widget = self.query_one("#user-input", Input)
++
 +        # Tab to accept suggestion
 +        if event.key == "tab" and self._suggestion:
 +            event.prevent_default()
 +            event.stop()
 +            new_value = input_widget.value + self._suggestion
 +            input_widget.value = new_value
 +            input_widget.cursor_position = len(new_value)
 +            self._suggestion = ""
 +            input_widget.placeholder = "Type a message..."
              return
 -        input_widget = self.query_one("#user-input", Input)
 +        if not self._history:
 +            return
          if event.key == "up":
              event.prevent_default()

src/loader/ui/widgets/tool_widget.pymodified

+         )
          yield Static("", id="tool-summary", classes="tool-summary")
 -        # Toggle button for expand/collapse
 -        yield Button("▶ Show full output", id="tool-toggle", classes="tool-toggle", variant="default")
+-
 -        yield Static("", id="tool-full-result", classes="tool-full-result")
 +        # Toggle button for expand/collapse (hidden by default until result has more lines)
 +        toggle = Button("▶ Show full output", id="tool-toggle", classes="tool-toggle", variant="default")
 +        toggle.display = False
 +        yield toggle
++
 +        full_result = Static("", id="tool-full-result", classes="tool-full-result")
 +        full_result.display = False
 +        yield full_result
      def on_button_pressed(self, event: Button.Pressed) -> None:
          """Handle toggle button press."""