openclacky 0.5.5 → 0.6.0

data/lib/clacky/ui2/README.md

@@ -0,0 +1,214 @@
+# Clacky UI2 - MVC Terminal UI System
+
+A modern, MVC-based terminal UI system with split-screen layout, component-based rendering, and direct method calls for simplicity.
+
+## Features
+
+- **Split-Screen Layout**: Scrollable output area on top, fixed input area at bottom
+- **MVC Architecture**: Clean separation of concerns (Model-View-Controller)
+- **Direct Method Calls**: Agent directly calls UIController semantic methods
+- **Component-Based**: Reusable, composable UI components
+- **Scrollable Output**: Navigate through history with arrow keys
+- **Input History**: Navigate previous inputs with up/down arrows
+- **Responsive**: Handles terminal resize automatically
+- **Rich Formatting**: Colored output with Pastel integration
+
+## Architecture
+
+```
++---------------------------------------------+
+|           Business Layer (Agent)            |
+|   Agent directly calls @ui.show_xxx()       |
++-----------------------+---------------------+
+                        | Direct calls
+                        v
++---------------------------------------------+
+|        Controller Layer (UIController)      |
+|  - show_assistant_message()                 |
+|  - show_tool_call()                         |
+|  - show_tool_result()                       |
+|  - request_confirmation()                   |
++-----------------------+---------------------+
+                        | Render
+                        v
++---------------------------------------------+
+|          View Layer (ViewRenderer)          |
+|  - Components (Message, Tool, Status)       |
++---------------------------------------------+
+```
+
+## Quick Start
+
+### Agent Integration
+
+```ruby
+# Create UI controller
+ui_controller = Clacky::UI2::UIController.new(
+  working_dir: Dir.pwd,
+  mode: "confirm_safes",
+  model: "claude-3-5-sonnet"
+)
+
+# Create agent with UI injected
+agent = Clacky::Agent.new(client, config, ui: ui_controller)
+
+# Set up input handler
+ui_controller.on_input do |input, images|
+  result = agent.run(input, images: images)
+end
+
+# Start UI (blocks until exit)
+ui_controller.start
+```
+
+### UIController Semantic Methods
+
+The Agent calls these methods directly:
+
+```ruby
+# Show messages
+@ui.show_assistant_message("Hello!")
+@ui.show_user_message("Hi there", images: [])
+
+# Show tool operations
+@ui.show_tool_call("file_reader", { path: "test.rb" })
+@ui.show_tool_result("File contents...")
+@ui.show_tool_error("File not found")
+
+# Show status
+@ui.show_progress("Thinking...")
+@ui.clear_progress
+@ui.show_complete(iterations: 5, cost: 0.001)
+
+# Show info/warning/error
+@ui.show_info("Session saved")
+@ui.show_warning("Rate limited")
+@ui.show_error("Failed to connect")
+
+# Interactive confirmation
+result = @ui.request_confirmation("Allow file write?", default: true)
+# Returns: true/false for yes/no, String for feedback, nil for cancelled
+
+# Show diff
+@ui.show_diff(old_content, new_content, max_lines: 50)
+```
+
+## Components
+
+### ViewRenderer
+
+Unified interface for rendering all UI components.
+
+```ruby
+renderer = Clacky::UI2::ViewRenderer.new
+
+# Render messages
+renderer.render_user_message("Hello")
+renderer.render_assistant_message("Hi there")
+
+# Render tools
+renderer.render_tool_call(
+  tool_name: "file_reader",
+  formatted_call: "file_reader(path: 'test.rb')"
+)
+renderer.render_tool_result(result: "Success")
+
+# Render status
+renderer.render_status(
+  iteration: 5,
+  cost: 0.1234,
+  tasks_completed: 3,
+  tasks_total: 10
+)
+```
+
+### OutputArea
+
+Scrollable output buffer with automatic line wrapping.
+
+```ruby
+output = Clacky::UI2::Components::OutputArea.new(height: 20)
+
+output.append("Line 1")
+output.append("Line 2\nLine 3")
+
+output.scroll_up(5)
+output.scroll_down(2)
+output.scroll_to_top
+output.scroll_to_bottom
+
+output.at_bottom? # => true/false
+output.scroll_percentage # => 0.0 to 100.0
+```
+
+### InputArea
+
+Fixed input area with cursor support and history.
+
+```ruby
+input = Clacky::UI2::Components::InputArea.new(height: 2)
+
+input.insert_char("H")
+input.backspace
+input.cursor_left
+input.cursor_right
+
+value = input.submit # Returns and clears input
+input.history_prev   # Navigate history
+```
+
+### LayoutManager
+
+Manages screen layout and coordinates rendering.
+
+```ruby
+layout = Clacky::UI2::LayoutManager.new(
+  output_area: output,
+  input_area: input
+)
+
+layout.initialize_screen
+layout.append_output("Hello")
+layout.move_input_to_output
+layout.scroll_output_up(5)
+layout.cleanup_screen
+```
+
+## Keyboard Shortcuts
+
+- **Enter** - Submit input
+- **Ctrl+C** - Exit/Interrupt
+- **Ctrl+L** - Clear output
+- **Ctrl+U** - Clear input line
+- **Up/Down** - Scroll output (when input empty) or navigate history
+- **Left/Right** - Move cursor in input
+- **Home/End** - Jump to start/end of input
+- **Backspace** - Delete character before cursor
+- **Delete** - Delete character at cursor
+
+## Layout Structure
+
+```
++----------------------------------------+
+|         Output Area (Scrollable)       | <- Lines 0 to height-4
+|  [<<] Assistant: Hello...              |
+|  [=>] Tool: file_reader                |
+|  [<=] Result: ...                      |
+|  ...                                   |
++----------------------------------------+ <- Separator
+| [>>] Input: _                          | <- Input line
++----------------------------------------+ <- Session bar
+| Mode: confirm_safes | Tasks: 5 | $0.01 |
++----------------------------------------+
+```
+
+## Design Principles
+
+1. **Simplicity**: Agent directly calls UIController methods - no middleware
+2. **Dependency Injection**: Agent receives `ui:` parameter
+3. **Component-Based**: Reusable, testable UI components
+4. **Responsive**: Handles terminal resize and edge cases
+
+## License
+
+MIT

data/lib/clacky/ui2/components/base_component.rb

@@ -0,0 +1,163 @@
+# frozen_string_literal: true
+
+require "pastel"
+
+module Clacky
+  module UI2
+    module Components
+      # BaseComponent provides common functionality for all UI components
+      class BaseComponent
+        def initialize
+          @pastel = Pastel.new
+        end
+
+        # Render component with given data
+        # @param data [Hash] Data to render
+        # @return [String] Rendered output
+        def render(data)
+          raise NotImplementedError, "Subclasses must implement render method"
+        end
+
+        # Class method to render without instantiating
+        # @param data [Hash] Data to render
+        # @return [String] Rendered output
+        def self.render(data)
+          new.render(data)
+        end
+
+        protected
+
+        # Get current theme from ThemeManager
+        # @return [Themes::BaseTheme] Current theme instance
+        def theme
+          UI2::ThemeManager.current_theme
+        end
+
+        # Format symbol with color from theme
+        # @param symbol_key [Symbol] Symbol key (e.g., :user, :assistant)
+        # @return [String] Colored symbol
+        def format_symbol(symbol_key)
+          theme.format_symbol(symbol_key)
+        end
+
+        # Format text with color from theme
+        # @param text [String] Text to format
+        # @param symbol_key [Symbol] Symbol key for color lookup
+        # @return [String] Colored text
+        def format_text(text, symbol_key)
+          theme.format_text(text, symbol_key)
+        end
+
+        # Truncate text to max length
+        # @param text [String] Text to truncate
+        # @param max_length [Integer] Maximum length
+        # @return [String] Truncated text
+        def truncate(text, max_length)
+          return "" if text.nil? || text.empty?
+
+          cleaned = text.strip.gsub(/\s+/, ' ')
+          
+          if cleaned.length > max_length
+            cleaned[0...max_length] + "..."
+          else
+            cleaned
+          end
+        end
+
+        # Wrap text to specified width
+        # @param text [String] Text to wrap
+        # @param width [Integer] Maximum width
+        # @return [Array<String>] Array of wrapped lines
+        def wrap_text(text, width)
+          return [] if text.nil? || text.empty?
+          
+          words = text.split(/\s+/)
+          lines = []
+          current_line = ""
+          
+          words.each do |word|
+            if current_line.empty?
+              current_line = word
+            elsif (current_line.length + word.length + 1) <= width
+              current_line += " #{word}"
+            else
+              lines << current_line
+              current_line = word
+            end
+          end
+          
+          lines << current_line unless current_line.empty?
+          lines
+        end
+
+        # Format timestamp
+        # @param time [Time] Time object
+        # @return [String] Formatted timestamp
+        def format_timestamp(time = Time.now)
+          time.strftime("%H:%M:%S")
+        end
+
+        # Create indented text
+        # @param text [String] Text to indent
+        # @param spaces [Integer] Number of spaces
+        # @return [String] Indented text
+        def indent(text, spaces = 2)
+          prefix = " " * spaces
+          text.split("\n").map { |line| "#{prefix}#{line}" }.join("\n")
+        end
+
+        # Format key-value pair
+        # @param key [String] Key name
+        # @param value [String] Value
+        # @return [String] Formatted key-value
+        def format_key_value(key, value)
+          "#{@pastel.cyan(key)}: #{@pastel.white(value)}"
+        end
+
+        # Create a separator line
+        # @param char [String] Character to use
+        # @param width [Integer] Width of separator
+        # @return [String] Separator line
+        def separator(char = "─", width = 80)
+          @pastel.dim(char * width)
+        end
+
+        # Format list item
+        # @param text [String] Item text
+        # @param bullet [String] Bullet character
+        # @return [String] Formatted list item
+        def format_list_item(text, bullet = "•")
+          "#{@pastel.dim(bullet)} #{@pastel.white(text)}"
+        end
+
+        # Format code block
+        # @param code [String] Code content
+        # @param language [String, nil] Language for syntax highlighting hint
+        # @return [String] Formatted code block
+        def format_code_block(code, language = nil)
+          header = language ? @pastel.dim("```#{language}") : @pastel.dim("```")
+          footer = @pastel.dim("```")
+          content = @pastel.cyan(code)
+          
+          "#{header}\n#{content}\n#{footer}"
+        end
+
+        # Format progress bar
+        # @param current [Integer] Current value
+        # @param total [Integer] Total value
+        # @param width [Integer] Bar width
+        # @return [String] Progress bar
+        def format_progress_bar(current, total, width = 20)
+          return "" if total == 0
+          
+          percentage = (current.to_f / total * 100).round(1)
+          filled = (current.to_f / total * width).round
+          empty = width - filled
+          
+          bar = @pastel.green("█" * filled) + @pastel.dim("░" * empty)
+          "#{bar} #{percentage}%"
+        end
+      end
+    end
+  end
+end

data/lib/clacky/ui2/components/common_component.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require_relative "base_component"
+
+module Clacky
+  module UI2
+    module Components
+      # CommonComponent renders common UI elements (progress, success, error, warning)
+      class CommonComponent < BaseComponent
+        # Render thinking indicator
+        # @return [String] Thinking indicator
+        def render_thinking
+          symbol = format_symbol(:thinking)
+          text = format_text("Thinking...", :thinking)
+          "#{symbol} #{text}"
+        end
+
+        # Render progress indicator
+        # @param message [String] Progress message
+        # @return [String] Progress indicator
+        def render_progress(message)
+          symbol = format_symbol(:thinking)
+          text = format_text(message, :thinking)
+          "#{symbol} #{text}"
+        end
+
+        # Render success message
+        # @param message [String] Success message
+        # @return [String] Success message
+        def render_success(message)
+          symbol = format_symbol(:success)
+          text = format_text(message, :success)
+          "#{symbol} #{text}"
+        end
+
+        # Render error message
+        # @param message [String] Error message
+        # @return [String] Error message
+        def render_error(message)
+          symbol = format_symbol(:error)
+          text = format_text(message, :error)
+          "#{symbol} #{text}"
+        end
+
+        # Render warning message
+        # @param message [String] Warning message
+        # @return [String] Warning message
+        def render_warning(message)
+          symbol = format_symbol(:warning)
+          text = format_text(message, :warning)
+          "#{symbol} #{text}"
+        end
+
+        # Render task completion summary
+        # @param iterations [Integer] Number of iterations
+        # @param cost [Float] Cost in USD
+        # @param duration [Float] Duration in seconds
+        # @param cache_tokens [Integer] Cache read tokens
+        # @param cache_requests [Integer] Total cache requests count
+        # @param cache_hits [Integer] Cache hit requests count
+        # @return [String] Formatted completion summary
+        def render_task_complete(iterations:, cost:, duration: nil, cache_tokens: nil, cache_requests: nil, cache_hits: nil)
+          lines = []
+          lines << ""
+          lines << @pastel.dim("─" * 60)
+          lines << render_success("Task Complete")
+          lines << ""
+          
+          # Display each stat on a separate line
+          lines << "  Iterations: #{iterations}"
+          lines << "  Cost: $#{cost.round(4)}"
+          lines << "  Duration: #{duration.round(1)}s" if duration
+          
+          # Display cache information if available
+          if cache_tokens && cache_tokens > 0
+            lines << "  Cache Tokens: #{cache_tokens} tokens"
+          end
+          
+          if cache_requests && cache_requests > 0
+            hit_rate = cache_hits > 0 ? ((cache_hits.to_f / cache_requests) * 100).round(1) : 0
+            lines << "  Cache Requests: #{cache_requests} (#{cache_hits} hits, #{hit_rate}% hit rate)"
+          end
+          
+          lines.join("\n")
+        end
+      end
+    end
+  end
+end

data/lib/clacky/ui2/components/inline_input.rb

@@ -0,0 +1,187 @@
+# frozen_string_literal: true
+
+require_relative "../line_editor"
+
+module Clacky
+  module UI2
+    module Components
+      # InlineInput provides inline input for confirmations and simple prompts
+      # Renders at the end of output area, not at fixed bottom position
+      class InlineInput
+        include LineEditor
+
+        attr_reader :prompt, :default_value
+
+        def initialize(prompt: "", default: nil)
+          initialize_line_editor
+          @prompt = prompt
+          @default_value = default
+          @active = false
+          @result_queue = nil
+          @paste_counter = 0
+          @paste_placeholders = {}
+        end
+
+        # Activate inline input and wait for user input
+        # @return [String] User input
+        def collect
+          @active = true
+          @result_queue = Queue.new
+          # Don't set default as initial text - start empty
+          @result_queue.pop
+        end
+
+        # Check if active
+        def active?
+          @active
+        end
+
+        # Handle keyboard input
+        # @param key [Symbol, String] Key input
+        # @return [Hash] Result with action
+        def handle_key(key)
+          return { action: nil } unless @active
+
+          case key
+          when Hash
+            if key[:type] == :rapid_input
+              # Handle multi-line paste with placeholder
+              pasted_text = key[:text]
+              pasted_lines = pasted_text.split(/\r\n|\r|\n/)
+
+              if pasted_lines.size > 1
+                # Multi-line paste - use placeholder
+                @paste_counter += 1
+                placeholder = "[##{@paste_counter} Paste Text]"
+                @paste_placeholders[placeholder] = pasted_text
+                insert_text(placeholder)
+              else
+                # Single line - insert directly
+                insert_text(pasted_text)
+              end
+            end
+            { action: :update }
+          when :enter
+            handle_enter
+          when :backspace
+            backspace
+            { action: :update }
+          when :delete
+            delete_char
+            { action: :update }
+          when :left_arrow, :ctrl_b
+            cursor_left
+            { action: :update }
+          when :right_arrow, :ctrl_f
+            cursor_right
+            { action: :update }
+          when :home, :ctrl_a
+            cursor_home
+            { action: :update }
+          when :end, :ctrl_e
+            cursor_end
+            { action: :update }
+          when :ctrl_k
+            kill_to_end
+            { action: :update }
+          when :ctrl_u
+            kill_to_start
+            { action: :update }
+          when :ctrl_w
+            kill_word
+            { action: :update }
+          when :shift_tab
+            handle_shift_tab
+          when :ctrl_c
+            handle_cancel
+          when :escape
+            handle_cancel
+          else
+            if key.is_a?(String) && key.length >= 1 && key.ord >= 32
+              insert_char(key)
+              { action: :update }
+            else
+              { action: nil }
+            end
+          end
+        end
+
+        # Render inline input with prompt and cursor
+        # @return [String] Rendered line (may wrap to multiple lines)
+        def render
+          line = render_line_with_cursor
+          full_text = "#{@prompt}#{line}"
+          
+          # Calculate terminal width and check if wrapping is needed
+          width = TTY::Screen.width
+          visible_text = strip_ansi_codes(full_text)
+          display_width = calculate_display_width(visible_text)
+          
+          # If no wrapping needed, return as is
+          return full_text if display_width <= width
+          
+          # Otherwise, wrap the input (prompt on first line, continuation indented)
+          prompt_width = calculate_display_width(strip_ansi_codes(@prompt))
+          available_width = width - prompt_width
+          
+          # For simplicity, just return full text and let terminal handle wrapping
+          # InlineInput is typically short, so natural wrapping should be fine
+          full_text
+        end
+
+        # Get cursor column position
+        # @return [Integer] Column position
+        def cursor_col
+          cursor_column(@prompt)
+        end
+
+        # Deactivate inline input
+        def deactivate
+          @active = false
+          @result_queue = nil
+        end
+
+        private
+
+        def handle_enter
+          result = expand_placeholders(current_line)
+          # If empty and has default, use default
+          result = @default_value.to_s if result.empty? && @default_value
+
+          queue = @result_queue
+          deactivate
+          queue&.push(result)
+
+          { action: :submit, result: result }
+        end
+
+        def expand_placeholders(text)
+          super(text, @paste_placeholders)
+        end
+
+        def handle_cancel
+          queue = @result_queue
+          deactivate
+          queue&.push(nil)
+
+          { action: :cancel }
+        end
+
+        def handle_shift_tab
+          # Auto-confirm as yes (or use default if it's true)
+          result = if @default_value == true || @default_value.to_s.downcase == "yes"
+            @default_value.to_s
+          else
+            "yes"
+          end
+
+          queue = @result_queue
+          deactivate
+          queue&.push(result)
+
+          { action: :toggle_mode }
+        end
+      end
+    end
+  end
+end