openclacky 0.6.2 → 0.6.4

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

@@ -0,0 +1,273 @@
+# frozen_string_literal: true
+
+require "pastel"
+require_relative "../theme_manager"
+
+module Clacky
+  module UI2
+    module Components
+      # CommandSuggestions displays a dropdown menu of available commands
+      # Supports keyboard navigation and filtering
+      class CommandSuggestions
+        attr_reader :selected_index, :visible
+
+        # System commands available by default
+        SYSTEM_COMMANDS = [
+          { command: "/clear", description: "Clear chat history and restart session" },
+          { command: "/help", description: "Show help information" },
+          { command: "/exit", description: "Exit the chat session" },
+          { command: "/quit", description: "Quit the application" }
+        ].freeze
+
+        def initialize
+          @pastel = Pastel.new
+          @commands = []
+          @filtered_commands = []
+          @selected_index = 0
+          @visible = false
+          @filter_text = ""
+          @skill_commands = []
+          
+          # Initialize with system commands
+          update_commands
+        end
+
+        # Get current theme from ThemeManager
+        def theme
+          UI2::ThemeManager.current_theme
+        end
+
+        # Load skill commands from skill loader
+        # @param skill_loader [Clacky::SkillLoader] The skill loader instance
+        def load_skill_commands(skill_loader)
+          return unless skill_loader
+
+          @skill_commands = skill_loader.user_invocable_skills.map do |skill|
+            {
+              command: skill.slash_command,
+              description: skill.description || "No description available",
+              type: :skill
+            }
+          end
+
+          update_commands
+        end
+
+        # Show the suggestions dropdown
+        # @param filter_text [String] Initial filter text (everything after the /)
+        def show(filter_text = "")
+          @filter_text = filter_text
+          @visible = true
+          update_filtered_commands
+          @selected_index = 0
+        end
+
+        # Hide the suggestions dropdown
+        def hide
+          @visible = false
+          @filter_text = ""
+          @filtered_commands = []
+          @selected_index = 0
+        end
+
+        # Update filter text and refresh filtered commands
+        # @param text [String] Filter text (everything after the /)
+        def update_filter(text)
+          @filter_text = text
+          update_filtered_commands
+          @selected_index = 0  # Reset selection when filter changes
+        end
+
+        # Move selection up
+        def select_previous
+          return if @filtered_commands.empty?
+          @selected_index = (@selected_index - 1) % @filtered_commands.size
+        end
+
+        # Move selection down
+        def select_next
+          return if @filtered_commands.empty?
+          @selected_index = (@selected_index + 1) % @filtered_commands.size
+        end
+
+        # Get the currently selected command
+        # @return [Hash, nil] Selected command hash or nil if none selected
+        def selected_command
+          return nil if @filtered_commands.empty?
+          @filtered_commands[@selected_index]
+        end
+
+        # Get the currently selected command text
+        # @return [String, nil] Selected command text or nil if none selected
+        def selected_command_text
+          cmd = selected_command
+          cmd ? cmd[:command] : nil
+        end
+
+        # Check if there are any suggestions to show
+        # @return [Boolean]
+        def has_suggestions?
+          @visible && !@filtered_commands.empty?
+        end
+
+        # Calculate required height for rendering
+        # @return [Integer] Number of lines needed
+        def required_height
+          return 0 unless @visible
+          return 0 if @filtered_commands.empty?
+
+          # Header + commands + footer
+          1 + [@filtered_commands.size, 5].min + 1  # Max 5 visible items
+        end
+
+        # Render the suggestions dropdown
+        # @param row [Integer] Starting row position
+        # @param col [Integer] Starting column position
+        # @param width [Integer] Maximum width for the dropdown
+        # @return [String] Rendered output
+        def render(row:, col:, width: 60)
+          return "" unless @visible
+          return "" if @filtered_commands.empty?
+
+          output = []
+          max_items = 5  # Maximum visible items
+          visible_commands = @filtered_commands.take(max_items)
+
+          # Header
+          header = @pastel.dim("┌─ Commands ") + @pastel.dim("─" * (width - 13)) + @pastel.dim("┐")
+          output << position_cursor(row, col) + header
+
+          # Items
+          visible_commands.each_with_index do |cmd, idx|
+            is_selected = (idx == @selected_index)
+            line = render_command_item(cmd, is_selected, width)
+            output << position_cursor(row + 1 + idx, col) + line
+          end
+
+          # Footer with navigation hint
+          footer_row = row + 1 + visible_commands.size
+          total = @filtered_commands.size
+          hint = total > max_items ? " (#{total - max_items} more...)" : ""
+          footer = @pastel.dim("└") + @pastel.dim("─" * (width - 2)) + @pastel.dim("┘")
+          output << position_cursor(footer_row, col) + footer
+
+          output.join
+        end
+
+        # Clear the rendered dropdown from screen
+        # @param row [Integer] Starting row position
+        # @param col [Integer] Starting column position
+        def clear_from_screen(row:, col:)
+          return unless @visible
+
+          height = required_height
+          output = []
+          
+          height.times do |i|
+            output << position_cursor(row + i, col) + clear_line
+          end
+          
+          print output.join
+          flush
+        end
+
+        private
+
+        # Update the complete commands list (system + skills)
+        private def update_commands
+          system_cmds = SYSTEM_COMMANDS.map { |c| c.merge(type: :system) }
+          @commands = system_cmds + @skill_commands
+          update_filtered_commands if @visible
+        end
+
+        # Update filtered commands based on current filter text
+        private def update_filtered_commands
+          if @filter_text.empty?
+            @filtered_commands = @commands
+          else
+            filter_lower = @filter_text.downcase
+            @filtered_commands = @commands.select do |cmd|
+              # Remove leading / for comparison
+              cmd_name = cmd[:command].sub(/^\//, "")
+              cmd_name.downcase.start_with?(filter_lower) ||
+                cmd[:description].downcase.include?(filter_lower)
+            end
+          end
+        end
+
+        # Render a single command item
+        # @param cmd [Hash] Command hash with :command and :description
+        # @param selected [Boolean] Whether this item is selected
+        # @param width [Integer] Maximum width
+        # @return [String] Rendered item
+        private def render_command_item(cmd, selected, width)
+          # Calculate available space
+          available = width - 4  # Account for borders and padding
+
+          # Format command (e.g., "/clear")
+          command_text = cmd[:command]
+          
+          # Format description
+          max_desc_length = available - command_text.length - 3  # 3 for spacing
+          description = truncate_text(cmd[:description], max_desc_length)
+
+          # Build line
+          if selected
+            # Highlighted selection
+            line = @pastel.on_blue(@pastel.white(" #{command_text} "))
+            line += @pastel.on_blue(@pastel.dim(" #{description}"))
+            # Pad to full width
+            content_length = command_text.length + description.length + 2
+            padding = " " * [available - content_length, 0].max
+            line += @pastel.on_blue(padding)
+            @pastel.dim("│") + line + @pastel.dim("│")
+          else
+            # Normal item
+            line = " #{@pastel.cyan(command_text)} #{@pastel.dim(description)}"
+            # Pad to full width
+            content_length = strip_ansi(line).length
+            padding = " " * [available - content_length, 0].max
+            @pastel.dim("│") + line + padding + @pastel.dim("│")
+          end
+        end
+
+        # Truncate text to maximum length
+        # @param text [String] Text to truncate
+        # @param max_length [Integer] Maximum length
+        # @return [String] Truncated text
+        private def truncate_text(text, max_length)
+          return "" if max_length <= 3
+          return text if text.length <= max_length
+
+          text[0...(max_length - 3)] + "..."
+        end
+
+        # Strip ANSI codes from text
+        # @param text [String] Text with ANSI codes
+        # @return [String] Plain text
+        private def strip_ansi(text)
+          text.gsub(/\e\[[0-9;]*m/, '')
+        end
+
+        # Position cursor at specific row and column
+        # @param row [Integer] Row position (0-indexed)
+        # @param col [Integer] Column position (0-indexed)
+        # @return [String] ANSI escape sequence
+        private def position_cursor(row, col)
+          "\e[#{row + 1};#{col + 1}H"
+        end
+
+        # Clear current line
+        # @return [String] ANSI escape sequence
+        private def clear_line
+          "\e[2K"
+        end
+
+        # Flush output to terminal
+        private def flush
+          $stdout.flush
+        end
+      end
+    end
+  end
+end

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

@@ -109,24 +109,31 @@ module Clacky
         # 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
+
+          # Get wrapped segments
+          wrapped_segments = wrap_line(@line, available_width)
+
+          # Build rendered output with cursor
+          output = ""
+
+          wrapped_segments.each_with_index do |segment, idx|
+            prefix = if idx == 0
+              @prompt
+            else
+              "> "  # Continuation prompt indicator
+            end
+
+            # Render segment with cursor if needed
+            segment_text = render_line_segment_with_cursor(@line, segment[:start], segment[:end])
+
+            output += "#{prefix}#{segment_text}"
+            output += "\n" unless idx == wrapped_segments.size - 1
+          end
+
+          output
         end
 
         # Get cursor column position
@@ -135,6 +142,18 @@ module Clacky
           cursor_column(@prompt)
         end
 
+        # Get the number of lines this input will occupy when rendered
+        # @param width [Integer] Terminal width
+        # @return [Integer] Number of lines
+        def line_count(width = TTY::Screen.width)
+          prompt_width = calculate_display_width(strip_ansi_codes(@prompt))
+          available_width = width - prompt_width
+          return 1 if available_width <= 0
+
+          segments = wrap_line(@line, available_width)
+          segments.size
+        end
+
         # Deactivate inline input
         def deactivate
           @active = false

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

@@ -4,6 +4,7 @@ require "pastel"
 require "tempfile"
 require_relative "../theme_manager"
 require_relative "../line_editor"
+require_relative "command_suggestions"
 
 module Clacky
   module UI2
@@ -68,6 +69,10 @@ module Clacky
           @animation_frame = 0
           @last_animation_update = Time.now
           @working_frames = ["❄", "❅", "❆"]
+
+          # Command suggestions dropdown
+          @command_suggestions = CommandSuggestions.new
+          @skill_loader = nil  # Will be set via set_skill_loader method
         end
 
         # Get current theme from ThemeManager
@@ -111,6 +116,9 @@ module Clacky
           # Bottom separator
           height += 1
           
+          # Command suggestions (rendered above input)
+          height += @command_suggestions.required_height if @command_suggestions
+          
           # Tips and user tips
           height += 1 if @tips_message
           height += 1 if @user_tip
@@ -118,6 +126,13 @@ module Clacky
           height
         end
 
+        # Set skill loader for command suggestions
+        # @param skill_loader [Clacky::SkillLoader] The skill loader instance
+        def set_skill_loader(skill_loader)
+          @skill_loader = skill_loader
+          @command_suggestions.load_skill_commands(skill_loader) if skill_loader
+        end
+
         # Update session bar info
         # @param working_dir [String] Working directory
         # @param mode [String] Permission mode
@@ -144,17 +159,65 @@ module Clacky
 
           old_height = required_height
 
+          # Handle command suggestions navigation first if visible
+          if @command_suggestions.visible
+            case key
+            when :up_arrow
+              @command_suggestions.select_previous
+              return { action: nil }
+            when :down_arrow
+              @command_suggestions.select_next
+              return { action: nil }
+            when :enter
+              # Accept selected command
+              if @command_suggestions.has_suggestions?
+                selected = @command_suggestions.selected_command_text
+                if selected
+                  # Replace current input with selected command
+                  @lines = [selected]
+                  @line_index = 0
+                  @cursor_position = selected.length
+                  @command_suggestions.hide
+                  return { action: nil }
+                end
+              end
+              # Fall through to normal enter handling if no suggestion
+            when :escape
+              @command_suggestions.hide
+              return { action: nil }
+            when :tab
+              # Tab also accepts the suggestion
+              if @command_suggestions.has_suggestions?
+                selected = @command_suggestions.selected_command_text
+                if selected
+                  @lines = [selected]
+                  @line_index = 0
+                  @cursor_position = selected.length
+                  @command_suggestions.hide
+                  return { action: nil }
+                end
+              end
+            end
+          end
+
           result = case key
           when Hash
             if key[:type] == :rapid_input
               insert_text(key[:text])
               clear_tips
+              update_command_suggestions
             end
             { action: nil }
           when :enter then handle_enter
           when :newline then newline; { action: nil }
-          when :backspace then backspace; { action: nil }
-          when :delete then delete_char; { action: nil }
+          when :backspace 
+            backspace
+            update_command_suggestions
+            { action: nil }
+          when :delete 
+            delete_char
+            update_command_suggestions
+            { action: nil }
           when :left_arrow, :ctrl_b then cursor_left; { action: nil }
           when :right_arrow, :ctrl_f then cursor_right; { action: nil }
           when :up_arrow then handle_up_arrow
@@ -168,10 +231,15 @@ module Clacky
           when :ctrl_d then handle_ctrl_d
           when :ctrl_v then handle_paste
           when :shift_tab then { action: :toggle_mode }
-          when :escape then { action: nil }
+          when :escape 
+            if @command_suggestions.visible
+              @command_suggestions.hide
+            end
+            { action: nil }
           else
             if key.is_a?(String) && key.length >= 1 && key.ord >= 32
               insert_char(key)
+              update_command_suggestions
             end
             { action: nil }
           end
@@ -219,6 +287,13 @@ module Clacky
           render_separator(current_row)
           current_row += 1
 
+          # Command suggestions (rendered above tips)
+          if @command_suggestions && @command_suggestions.visible
+            # Render suggestions at current row
+            print @command_suggestions.render(row: current_row, col: 0, width: [@width - 4, 60].min)
+            current_row += @command_suggestions.required_height
+          end
+
           # Tips bar (if any)
           if @tips_message
             move_cursor(current_row, 0)
@@ -495,6 +570,7 @@ module Clacky
           @paste_counter = 0
           @paste_placeholders = {}
           clear_tips
+          @command_suggestions.hide if @command_suggestions
         end
 
         def submit
@@ -530,6 +606,23 @@ module Clacky
 
         private
 
+        # Update command suggestions based on current input
+        # Shows suggestions when input starts with /
+        private def update_command_suggestions
+          return unless @command_suggestions
+          
+          current = current_line.strip
+          
+          # Check if we should show suggestions (input starts with /)
+          if current.start_with?('/') && @line_index == 0
+            # Extract the filter text (everything after /)
+            filter_text = current[1..-1] || ""
+            @command_suggestions.show(filter_text)
+          else
+            @command_suggestions.hide
+          end
+        end
+
         # Render all input lines with auto-wrap support
         # @param start_row [Integer] Starting row position
         # @return [Integer] Next available row after rendering all lines
@@ -603,69 +696,14 @@ module Clacky
         # @param max_width [Integer] Maximum display width per wrapped line
         # @return [Array<Hash>] Array of segment info: { text: String, start: Integer, end: Integer }
         def wrap_line(line, max_width)
-          return [{ text: "", start: 0, end: 0 }] if line.empty?
-          return [{ text: line, start: 0, end: line.length }] if max_width <= 0
-
-          segments = []
-          chars = line.chars
-          segment_start = 0
-          current_width = 0
-          current_end = 0
-
-          chars.each_with_index do |char, idx|
-            char_width = char_display_width(char)
-            
-            # If adding this character exceeds max width, complete current segment
-            if current_width + char_width > max_width && current_end > segment_start
-              segments << {
-                text: chars[segment_start...current_end].join,
-                start: segment_start,
-                end: current_end
-              }
-              segment_start = idx
-              current_end = idx + 1
-              current_width = char_width
-            else
-              current_end = idx + 1
-              current_width += char_width
-            end
-          end
-
-          # Add the last segment
-          if current_end > segment_start
-            segments << {
-              text: chars[segment_start...current_end].join,
-              start: segment_start,
-              end: current_end
-            }
-          end
-          
-          segments.empty? ? [{ text: "", start: 0, end: 0 }] : segments
+          super(line, max_width)
         end
 
         # Calculate display width of a single character
         # @param char [String] Single character
         # @return [Integer] Display width (1 or 2)
         def char_display_width(char)
-          code = char.ord
-          # East Asian Wide and Fullwidth characters take 2 columns
-          if (code >= 0x1100 && code <= 0x115F) ||
-             (code >= 0x2329 && code <= 0x232A) ||
-             (code >= 0x2E80 && code <= 0x303E) ||
-             (code >= 0x3040 && code <= 0xA4CF) ||
-             (code >= 0xAC00 && code <= 0xD7A3) ||
-             (code >= 0xF900 && code <= 0xFAFF) ||
-             (code >= 0xFE10 && code <= 0xFE19) ||
-             (code >= 0xFE30 && code <= 0xFE6F) ||
-             (code >= 0xFF00 && code <= 0xFF60) ||
-             (code >= 0xFFE0 && code <= 0xFFE6) ||
-             (code >= 0x1F300 && code <= 0x1F9FF) ||
-             (code >= 0x20000 && code <= 0x2FFFD) ||
-             (code >= 0x30000 && code <= 0x3FFFD)
-            2
-          else
-            1
-          end
+          super(char)
         end
 
         # Strip ANSI escape codes from a string
@@ -714,7 +752,7 @@ module Clacky
           if text.start_with?('/')
             # Check if it's a command (single slash followed by English letters only)
             # Paths like /xxx/xxxx should not be treated as commands
-            if text =~ /^\/([a-zA-Z]+)$/
+            if text =~ /^\/([a-zA-Z-]+)$/
               case text
               when '/clear'
                 clear
@@ -724,8 +762,8 @@ module Clacky
               when '/exit', '/quit'
                 return { action: :exit }
               else
-                set_tips("Unknown command: #{text} (Available: /clear, /help, /exit)", type: :warning)
-                return { action: nil }
+                # Let other commands (like skills) pass through to agent
+                # Fall through to submit
               end
             end
             # If it's not a command pattern (e.g., /xxx/xxxx), treat as normal input
@@ -979,26 +1017,10 @@ module Clacky
         # @param segment_end [Integer] End position of segment in line (char index)
         # @return [String] Rendered segment with cursor if applicable
         def render_line_segment_with_cursor(line, segment_start, segment_end)
-          chars = line.chars
-          segment_chars = chars[segment_start...segment_end]
-          
-          # Check if cursor is in this segment
-          if @cursor_position >= segment_start && @cursor_position < segment_end
-            # Cursor is in this segment
-            cursor_pos_in_segment = @cursor_position - segment_start
-            before_cursor = segment_chars[0...cursor_pos_in_segment].join
-            cursor_char = segment_chars[cursor_pos_in_segment] || " "
-            after_cursor = segment_chars[(cursor_pos_in_segment + 1)..-1]&.join || ""
-            
-            "#{@pastel.white(before_cursor)}#{@pastel.on_white(@pastel.black(cursor_char))}#{@pastel.white(after_cursor)}"
-          elsif @cursor_position == segment_end && segment_end == line.length
-            # Cursor is at the very end of the line, show it in last segment
-            segment_text = segment_chars.join
-            "#{@pastel.white(segment_text)}#{@pastel.on_white(@pastel.black(' '))}"
-          else
-            # Cursor is not in this segment, just format normally
-            theme.format_text(segment_chars.join, :user)
-          end
+          # Delegate to LineEditor's shared implementation
+          rendered = super(line, segment_start, segment_end)
+          # Apply theme colors for InputArea
+          theme.format_text(rendered, :user)
         end
 
         # Render a separator line (ensures it doesn't exceed screen width)