openclacky 0.6.2 → 0.6.3

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)

data/lib/clacky/ui2/layout_manager.rb

@@ -14,6 +14,7 @@ module Clacky
         @todo_area = todo_area
         @render_mutex = Mutex.new
         @output_row = 0  # Track current output row position
+        @last_fixed_area_height = 0  # Track previous fixed area height to detect shrinkage
 
         calculate_layout
         setup_resize_handler
@@ -91,11 +92,19 @@ module Clacky
       def position_inline_input_cursor(inline_input)
         return unless inline_input
 
-        # Calculate the actual terminal cursor position considering multi-byte characters
-        # InlineInput is on the last output line (@output_row - 1)
-        cursor_row = @output_row - 1
-        cursor_col = inline_input.cursor_col  # This already considers display width
-        
+        # Use the shared method from LineEditor to calculate cursor position with wrap
+        prompt = inline_input.prompt
+        width = screen.width
+        wrap_row, wrap_col = inline_input.cursor_position_with_wrap(prompt, width)
+
+        # Get the number of lines InlineInput occupies (considering wrapping)
+        line_count = inline_input.line_count(width)
+
+        # InlineInput starts at @output_row - line_count
+        # Cursor is at wrap_row within that
+        cursor_row = @output_row - line_count + wrap_row
+        cursor_col = wrap_col
+
         # Move terminal cursor to the correct position
         screen.move_cursor(cursor_row, cursor_col)
         screen.flush
@@ -184,11 +193,11 @@ module Clacky
 
         @render_mutex.synchronize do
           lines = content.split("\n", -1)  # -1 to keep trailing empty strings
-          
+
           lines.each_with_index do |line, index|
             # Wrap long lines to prevent display issues
             wrapped_lines = wrap_long_line(line)
-            
+
             wrapped_lines.each do |wrapped_line|
               write_output_line(wrapped_line)
             end
@@ -200,40 +209,72 @@ module Clacky
         end
       end
 
-      # Update the last line in output area (for progress indicator)
-      # @param content [String] Content to update
-      def update_last_line(content)
+      # Update the last N lines in output area (for inline input updates)
+      # @param content [String] Content to update (may contain newlines for wrapped lines)
+      # @param old_line_count [Integer] Number of lines currently occupied (for clearing)
+      def update_last_line(content, old_line_count = 1)
         @render_mutex.synchronize do
           return if @output_row == 0  # No output yet
-          
-          # Last written line is at @output_row - 1
-          last_row = @output_row - 1
-          screen.move_cursor(last_row, 0)
-          screen.clear_line
-          print content
-          
-          # Hide terminal cursor to avoid showing two cursors
-          # InlineInput uses visual cursor (white background) which is better for multi-byte chars
-          screen.hide_cursor
+
+          # Calculate start row (last N lines)
+          start_row = @output_row - old_line_count
+          start_row = 0 if start_row < 0
+
+          # Clear all lines that will be updated
+          (start_row...@output_row).each do |row|
+            screen.move_cursor(row, 0)
+            screen.clear_line
+          end
+
+          # Re-render the content
+          lines = content.split("\n", -1)
+          current_row = start_row
+
+          lines.each_with_index do |line, idx|
+            screen.move_cursor(current_row, 0)
+            print line
+            current_row += 1
+          end
+
+          # Update output_row to new line count
+          @output_row = start_row + lines.length
+
+          # Clear any remaining old lines if new content has fewer lines
+          # This handles the case where content shrinks (e.g., delete from 2 lines to 1 line)
+          old_end_row = @output_row + (old_line_count - lines.length)
+          if old_end_row > @output_row && old_end_row <= start_row + old_line_count
+            # Clear the extra old lines
+            (@output_row...old_end_row).each do |row|
+              screen.move_cursor(row, 0)
+              screen.clear_line
+            end
+          end
+
+          # Re-render fixed areas to restore cursor position in input area
+          render_fixed_areas
           screen.flush
-          
-          # Don't re-render fixed areas - we're just updating existing content
         end
       end
 
-      # Remove the last line from output area
-      def remove_last_line
+      # Remove the last N lines from output area
+      # @param line_count [Integer] Number of lines to remove (default: 1)
+      def remove_last_line(line_count = 1)
         @render_mutex.synchronize do
           return if @output_row == 0  # No output to remove
-          
-          # Clear the last written line
-          last_row = @output_row - 1
-          screen.move_cursor(last_row, 0)
-          screen.clear_line
-          
-          # Move output row back
-          @output_row = last_row
-          
+
+          # Calculate start row for removal
+          start_row = @output_row - line_count
+          start_row = 0 if start_row < 0
+
+          # Clear all lines being removed
+          (start_row...@output_row).each do |row|
+            screen.move_cursor(row, 0)
+            screen.clear_line
+          end
+
+          # Update output_row
+          @output_row = start_row
+
           # Re-render fixed areas to ensure consistency
           render_fixed_areas
           screen.flush
@@ -416,11 +457,26 @@ module Clacky
         # The InlineInput is rendered inline with output
         return if input_area.paused?
 
+        current_fixed_height = fixed_area_height
         start_row = fixed_area_start_row
         gap_row = start_row
         todo_row = gap_row + 1
         input_row = todo_row + (@todo_area&.height || 0)
 
+        # If fixed area shrank, clear the extra lines at the top to remove residual content
+        if @last_fixed_area_height > current_fixed_height
+          height_diff = @last_fixed_area_height - current_fixed_height
+          old_start_row = screen.height - @last_fixed_area_height
+          # Clear the extra lines that are no longer part of fixed area
+          (old_start_row...(old_start_row + height_diff)).each do |row|
+            screen.move_cursor(row, 0)
+            screen.clear_line
+          end
+        end
+
+        # Update last height for next comparison
+        @last_fixed_area_height = current_fixed_height
+
         # Render gap line
         screen.move_cursor(gap_row, 0)
         screen.clear_line

data/lib/clacky/ui2/line_editor.rb

@@ -188,14 +188,154 @@ module Clacky
         # Strip ANSI codes from prompt to get actual display width
         visible_prompt = strip_ansi_codes(prompt)
         prompt_display_width = calculate_display_width(visible_prompt)
-        
+
         # Calculate display width of text before cursor
         chars = @line.chars
         text_before_cursor = chars[0...@cursor_position].join
         text_display_width = calculate_display_width(text_before_cursor)
-        
+
         prompt_display_width + text_display_width
       end
+
+      # Get cursor position considering line wrapping
+      # @param prompt [String] Prompt string before the line (may contain ANSI codes)
+      # @param width [Integer] Terminal width for wrapping
+      # @return [Array<Integer>] Row and column position (0-indexed)
+      def cursor_position_with_wrap(prompt = "", width = TTY::Screen.width)
+        return [0, cursor_column(prompt)] if width <= 0
+
+        prompt_width = calculate_display_width(strip_ansi_codes(prompt))
+        available_width = width - prompt_width
+
+        # Get wrapped segments for current line
+        wrapped_segments = wrap_line(@line, available_width)
+
+        # Find which segment contains cursor
+        cursor_segment_idx = 0
+        cursor_pos_in_segment = @cursor_position
+
+        wrapped_segments.each_with_index do |segment, idx|
+          if @cursor_position >= segment[:start] && @cursor_position < segment[:end]
+            cursor_segment_idx = idx
+            cursor_pos_in_segment = @cursor_position - segment[:start]
+            break
+          elsif @cursor_position >= segment[:end] && idx == wrapped_segments.size - 1
+            cursor_segment_idx = idx
+            cursor_pos_in_segment = segment[:end] - segment[:start]
+            break
+          end
+        end
+
+        # Calculate display width of text before cursor in this segment
+        chars = @line.chars
+        segment_start = wrapped_segments[cursor_segment_idx][:start]
+        text_in_segment_before_cursor = chars[segment_start...(segment_start + cursor_pos_in_segment)].join
+        display_width = calculate_display_width(text_in_segment_before_cursor)
+
+        col = prompt_width + display_width
+        row = cursor_segment_idx
+
+        [row, col]
+      end
+
+      # Wrap a line into multiple segments based on available width
+      # Considers display width of characters (multi-byte characters like Chinese)
+      # @param line [String] The line to wrap
+      # @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
+      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
+      end
+
+      # Render a segment of a line with cursor if cursor is in this segment
+      # @param line [String] Full line text
+      # @param segment_start [Integer] Start position of segment in line (char index)
+      # @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
+          @pastel.white(segment_chars.join)
+        end
+      end
     end
   end
 end