rufio 0.80.0 → 0.82.0

data/lib/rufio/terminal_ui.rb

@@ -6,9 +6,9 @@ require_relative 'text_utils'
 module Rufio
   class TerminalUI
     # Layout constants
-    HEADER_HEIGHT = 2              # Header占有行数（2段目のモードタブを含む）
+    HEADER_HEIGHT = 1              # Header占有行数（モードタブ+パス+バージョン 1行に統合）
     FOOTER_HEIGHT = 1              # Footer占有行数（ブックマーク一覧 + ステータス情報）
-    HEADER_FOOTER_MARGIN = 3       # Header(2行) + Footer(1行)分のマージン
+    HEADER_FOOTER_MARGIN = 2       # Header(1行) + Footer(1行)分のマージン
 
     # Panel layout ratios
     LEFT_PANEL_RATIO = 0.5         # 左パネルの幅比率
@@ -19,6 +19,7 @@ module Rufio
     DEFAULT_SCREEN_HEIGHT = 24     # デフォルト画面高さ
     HEADER_PADDING = 2             # ヘッダーのパディング
     FILTER_TEXT_RESERVED = 15      # フィルタテキスト表示の予約幅
+    TAB_SEPARATOR = ">"              # タブ間セパレータ
 
     # File display constants
     ICON_SIZE_PADDING = 12         # アイコン、選択マーク、サイズ情報分
@@ -29,8 +30,11 @@ module Rufio
     MEGABYTE = KILOBYTE * 1024
     GIGABYTE = MEGABYTE * 1024
 
+    # Bookmark highlight duration (seconds)
+    BOOKMARK_HIGHLIGHT_DURATION = 0.5
+
     # Line offsets
-    CONTENT_START_LINE = 2         # コンテンツ開始行（ヘッダー2行: Y=0, Y=1）
+    CONTENT_START_LINE = 1         # コンテンツ開始行（フッタ1行: Y=0）
 
     def initialize(test_mode: false)
       console = IO.console
@@ -71,19 +75,23 @@ module Rufio
       # 非同期ハイライト完了フラグ（Thread → メインループへの通知）
       @highlight_updated = false
 
-      # Footer cache (bookmark list)
-      @cached_bookmarks = nil
-      @cached_bookmark_time = nil
-      @bookmark_cache_ttl = 1.0  # 1秒間キャッシュ
-
-      # Command execution lamp (footer indicator)
-      @completion_lamp_message = nil
-      @completion_lamp_time = nil
 
       # Tab mode manager
       @tab_mode_manager = TabModeManager.new
+
+      # UIRenderer（描画ロジックを担当）
+      ui_opts = ConfigLoader.ui_options
+      @ui_renderer = UIRenderer.new(
+        screen_width: @screen_width,
+        screen_height: @screen_height,
+        test_mode: @test_mode,
+        left_panel_ratio: ui_opts[:panel_ratio],
+        preview_enabled: ui_opts[:preview_enabled]
+      )
     end
 
+    attr_reader :ui_renderer
+
     def start(directory_listing, keybind_handler, file_preview, background_executor = nil)
       @directory_listing = directory_listing
       @keybind_handler = keybind_handler
@@ -92,6 +100,12 @@ module Rufio
       @keybind_handler.set_directory_listing(@directory_listing)
       @keybind_handler.set_terminal_ui(self)
 
+      # UIRenderer に依存を注入
+      @ui_renderer.keybind_handler = @keybind_handler
+      @ui_renderer.directory_listing = @directory_listing
+      @ui_renderer.file_preview = @file_preview
+      @ui_renderer.background_executor = @background_executor
+
       # command_mode_ui にも terminal_ui を設定
       @command_mode_ui.set_terminal_ui(self)
 
@@ -158,6 +172,8 @@ module Rufio
 
     private
 
+    # ブックマークハイライトが期限切れかどうか
+    # @return [Boolean] true=期限切れ or ハイライト中でない, false=ハイライト中
     def setup_terminal
       # terminal setup
       system('tput smcup')  # alternate screen
@@ -214,7 +230,7 @@ module Rufio
       notification_message = nil
       notification_time = nil
       previous_notification = nil
-      previous_lamp_message = @completion_lamp_message
+      previous_lamp_message = @ui_renderer.completion_lamp_message
 
       # FPS計測用
       frame_times = []
@@ -262,9 +278,9 @@ module Rufio
             # 通知メッセージとして表示
             notification_message = completion_msg
             notification_time = start
-            # フッターのランプ表示用にも設定
-            @completion_lamp_message = completion_msg
-            @completion_lamp_time = start
+            # フッターのランプ表示用にも設定（UIRenderer が管理）
+            @ui_renderer.completion_lamp_message = completion_msg
+            @ui_renderer.completion_lamp_time = start
             @background_executor.instance_variable_set(:@completion_message, nil)  # メッセージをクリア
             needs_redraw = true
           end
@@ -282,14 +298,15 @@ module Rufio
 
         # 完了ランプの表示状態をチェック（0.5秒ごと）
         if (start - last_lamp_check) > 0.5
-          current_lamp = @completion_lamp_message
+          current_lamp = @ui_renderer.completion_lamp_message
           if current_lamp != previous_lamp_message
             previous_lamp_message = current_lamp
             needs_redraw = true
           end
           # 完了ランプのタイムアウトチェック
-          if @completion_lamp_message && @completion_lamp_time && (start - @completion_lamp_time) >= 3.0
-            @completion_lamp_message = nil
+          if @ui_renderer.completion_lamp_message && @ui_renderer.completion_lamp_time &&
+             (start - @ui_renderer.completion_lamp_time) >= 3.0
+            @ui_renderer.completion_lamp_message = nil
             needs_redraw = true
           end
           last_lamp_check = start
@@ -309,6 +326,12 @@ module Rufio
           needs_redraw = true
         end
 
+        # ブックマークハイライトのタイムアウトチェック（500ms 後に自動消去）
+        if @ui_renderer.bookmark_highlight_expired?
+          @ui_renderer.clear_highlighted_bookmark
+          needs_redraw = true
+        end
+
         # DRAW & RENDER phase - 変更があった場合のみ描画
         if needs_redraw
           # Screenバッファに描画（clearは呼ばない。必要な部分だけ更新）
@@ -345,941 +368,19 @@ module Rufio
         sleep sleep_time if sleep_time > 0
       end
     end
+    public
 
-    def draw_screen
-      # 処理時間測定開始
-      start_time = Time.now
-
-      # move cursor to top of screen (don't clear)
-      print "\e[H"
-
-      # ジョブモードの場合は専用の画面を描画
-      if @in_job_mode
-        draw_job_mode_screen
-        return
-      end
-
-      # header (1 line)
-      draw_header
-
-      # main content (left: directory list, right: preview)
-      entries = get_display_entries
-      selected_entry = entries[@keybind_handler.current_index]
-
-      # calculate height with header and footer margin
-      content_height = @screen_height - HEADER_FOOTER_MARGIN
-      left_width = (@screen_width * LEFT_PANEL_RATIO).to_i
-      right_width = @screen_width - left_width
-
-      # adjust so right panel doesn't overflow into left panel
-      right_width = @screen_width - left_width if left_width + right_width > @screen_width
-
-      draw_directory_list(entries, left_width, content_height)
-      draw_file_preview(selected_entry, right_width, content_height, left_width)
-
-      # footer (統合されたステータス情報を含む)
-      render_time = Time.now - start_time
-      draw_footer(render_time)
-
-      # コマンドモードがアクティブな場合はコマンド入力ウィンドウを表示
-      if @command_mode_active
-        # フローティングウィンドウで表示
-        @command_mode_ui.show_input_prompt(@command_input)
-      else
-        # move cursor to invisible position
-        print "\e[#{@screen_height};#{@screen_width}H"
-      end
-
-      # 通知を描画（右上にオーバーレイ）
-      draw_notifications
-    end
-
-    # Phase 3: Screenバッファに描画する新しいメソッド
+    # UIRenderer に全描画処理を委譲
     def draw_screen_to_buffer(screen, notification_message = nil, fps = nil)
-      # header (2 lines) - y=0, y=1（全モード共通）
-      draw_header_to_buffer(screen, 0)
-      draw_mode_tabs_to_buffer(screen, 1)
-
-      # calculate height with header and footer margin
-      content_height = @screen_height - HEADER_FOOTER_MARGIN
-
-      if @in_job_mode
-        # ジョブモード: ジョブ一覧を表示
-        draw_job_list_to_buffer(screen, content_height)
-        draw_job_footer_to_buffer(screen, @screen_height - 1)
-      else
-        # 通常モード: ファイル一覧とプレビューを表示
-        entries = get_display_entries
-        selected_entry = entries[@keybind_handler.current_index]
-
-        left_width = (@screen_width * LEFT_PANEL_RATIO).to_i
-        right_width = @screen_width - left_width
-
-        # adjust so right panel doesn't overflow into left panel
-        right_width = @screen_width - left_width if left_width + right_width > @screen_width
-
-        draw_directory_list_to_buffer(screen, entries, left_width, content_height)
-        draw_file_preview_to_buffer(screen, selected_entry, right_width, content_height, left_width)
-
-        # footer
-        draw_footer_to_buffer(screen, @screen_height - 1, fps)
-      end
-
-      # 通知メッセージがある場合は表示
-      if notification_message
-        notification_line = @screen_height - 1
-        message_display = " #{notification_message} "
-        if message_display.length > @screen_width
-          message_display = message_display[0...(@screen_width - 3)] + "..."
-        end
-        screen.put_string(0, notification_line, message_display.ljust(@screen_width), fg: "\e[7m")
-      end
-    end
-
-    # ジョブ一覧をバッファに描画
-    def draw_job_list_to_buffer(screen, height)
-      return unless @job_manager
-
-      jobs = @job_manager.jobs
-      selected_index = @job_mode_instance&.selected_index || 0
-
-      (0...height).each do |i|
-        line_num = i + CONTENT_START_LINE
-
-        if i < jobs.length
-          job = jobs[i]
-          draw_job_line_to_buffer(screen, job, i == selected_index, line_num)
-        else
-          # 空行
-          screen.put_string(0, line_num, ' ' * @screen_width)
-        end
-      end
-    end
-
-    # ジョブ行をバッファに描画
-    def draw_job_line_to_buffer(screen, job, is_selected, y)
-      icon = job.status_icon
-      name = job.name
-      path = "(#{job.path})"
-      duration = job.formatted_duration
-      duration_text = duration.empty? ? "" : "[#{duration}]"
-
-      status_text = case job.status
-                    when :running then "Running"
-                    when :completed then "Done"
-                    when :failed then "Failed"
-                    when :waiting then "Waiting"
-                    when :cancelled then "Cancelled"
-                    else ""
-                    end
-
-      # ステータスに応じた色
-      status_color = case job.status
-                     when :running then "\e[33m"    # Yellow
-                     when :completed then "\e[32m"  # Green
-                     when :failed then "\e[31m"     # Red
-                     else "\e[37m"                  # White
-                     end
-
-      # 行を構築
-      line_content = "#{icon} #{name} #{path}".ljust(40)
-      line_content += "#{duration_text.ljust(12)} #{status_text}"
-      line_content = line_content[0...@screen_width].ljust(@screen_width)
-
-      if is_selected
-        # 選択中: 反転表示
-        line_content.each_char.with_index do |char, x|
-          screen.put(x, y, char, fg: "\e[30m", bg: "\e[47m")
-        end
-      else
-        # 非選択: ステータス色
-        line_content.each_char.with_index do |char, x|
-          screen.put(x, y, char, fg: status_color)
-        end
-      end
-    end
-
-    # ジョブモード用フッターをバッファに描画
-    def draw_job_footer_to_buffer(screen, y)
-      job_count = @job_manager&.job_count || 0
-      help_text = "[Space] View Log | [x] Cancel | [Tab] Switch Mode | Jobs: #{job_count}"
-      footer_content = help_text.center(@screen_width)[0...@screen_width]
-
-      footer_content.each_char.with_index do |char, x|
-        screen.put(x, y, char, fg: "\e[30m", bg: "\e[47m")
-      end
-    end
-
-    def draw_screen_with_notification(notification_message)
-      # 通常の画面を描画
-      draw_screen
-
-      # 通知メッセージを画面下部に表示
-      notification_line = @screen_height - 1
-      print "\e[#{notification_line};1H"  # カーソルを画面下部に移動
-
-      # 通知メッセージを反転表示で目立たせる
-      message_display = " #{notification_message} "
-      if message_display.length > @screen_width
-        message_display = message_display[0...(@screen_width - 3)] + "..."
-      end
-
-      print "\e[7m#{message_display.ljust(@screen_width)}\e[0m"
-    end
-
-    # Phase 3: Screenバッファにヘッダーを描画
-    def draw_header_to_buffer(screen, y)
-      current_path = @directory_listing.current_path
-      header = "💎 rufio v#{VERSION} - #{current_path}"
-
-      # Add help mode indicator if in help mode
-      if @keybind_handler.help_mode?
-        header += " [Help Mode - Press ESC to exit]"
-      end
-
-      # Add filter indicator if in filter mode
-      if @keybind_handler.filter_active?
-        filter_text = " [Filter: #{@keybind_handler.filter_query}]"
-        header += filter_text
-      end
-
-      # abbreviate if path is too long
-      if header.length > @screen_width - HEADER_PADDING
-        if @keybind_handler.help_mode?
-          # prioritize showing help mode indicator
-          help_text = " [Help Mode - Press ESC to exit]"
-          base_length = @screen_width - help_text.length - FILTER_TEXT_RESERVED
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-base_length..-1]}#{help_text}"
-        elsif @keybind_handler.filter_active?
-          # prioritize showing filter when active
-          filter_text = " [Filter: #{@keybind_handler.filter_query}]"
-          base_length = @screen_width - filter_text.length - FILTER_TEXT_RESERVED
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-base_length..-1]}#{filter_text}"
-        else
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-(@screen_width - FILTER_TEXT_RESERVED)..-1]}"
-        end
-      end
-
-      screen.put_string(0, y, header.ljust(@screen_width), fg: "\e[7m")
-    end
-
-    # Phase 3: Screenバッファにモードタブを描画
-    def draw_mode_tabs_to_buffer(screen, y)
-      # タブモードマネージャの状態を同期
-      sync_tab_mode_with_keybind_handler
-
-      current_x = 0
-      modes = @tab_mode_manager.available_modes
-      labels = @tab_mode_manager.mode_labels
-      current_mode = @tab_mode_manager.current_mode
-
-      modes.each_with_index do |mode, index|
-        label = " #{labels[mode]} "
-
-        if mode == current_mode
-          # 現在のモード: シアン背景 + 黒文字 + 太字
-          label.each_char do |char|
-            screen.put(current_x, y, char, fg: "\e[30m\e[1m", bg: "\e[46m")
-            current_x += 1
-          end
-        else
-          # 非選択モード: グレー文字
-          label.each_char do |char|
-            screen.put(current_x, y, char, fg: "\e[90m")
-            current_x += 1
-          end
-        end
-
-        # 区切り線（最後のモード以外）
-        if index < modes.length - 1
-          screen.put(current_x, y, '│', fg: "\e[90m")
-          current_x += 1
-        end
-      end
-
-      # 残りをスペースで埋める
-      while current_x < @screen_width
-        screen.put(current_x, y, ' ')
-        current_x += 1
-      end
-    end
-
-    # キーバインドハンドラの状態とタブモードを同期
-    def sync_tab_mode_with_keybind_handler
-      return unless @keybind_handler
-
-      current_mode = if @keybind_handler.help_mode?
-                       :help
-                     elsif @keybind_handler.log_viewer_mode?
-                       :logs
-                     elsif @keybind_handler.in_job_mode?
-                       :jobs
-                     else
-                       :files
-                     end
-
-      @tab_mode_manager.switch_to(current_mode) if @tab_mode_manager.current_mode != current_mode
-    end
-
-    def draw_header
-      current_path = @directory_listing.current_path
-      header = "💎 rufio v#{VERSION} - #{current_path}"
-
-      # Add help mode indicator if in help mode
-      if @keybind_handler.help_mode?
-        header += " [Help Mode - Press ESC to exit]"
-      end
-
-      # Add filter indicator if in filter mode
-      if @keybind_handler.filter_active?
-        filter_text = " [Filter: #{@keybind_handler.filter_query}]"
-        header += filter_text
-      end
-
-      # abbreviate if path is too long
-      if header.length > @screen_width - HEADER_PADDING
-        if @keybind_handler.help_mode?
-          # prioritize showing help mode indicator
-          help_text = " [Help Mode - Press ESC to exit]"
-          base_length = @screen_width - help_text.length - FILTER_TEXT_RESERVED
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-base_length..-1]}#{help_text}"
-        elsif @keybind_handler.filter_active?
-          # prioritize showing filter when active
-          filter_text = " [Filter: #{@keybind_handler.filter_query}]"
-          base_length = @screen_width - filter_text.length - FILTER_TEXT_RESERVED
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-base_length..-1]}#{filter_text}"
-        else
-          header = "💎 rufio v#{VERSION} - ...#{current_path[-(@screen_width - FILTER_TEXT_RESERVED)..-1]}"
-        end
-      end
-
-      puts "\e[7m#{header.ljust(@screen_width)}\e[0m" # reverse display
-    end
-
-
-
-    # Phase 3: Screenバッファにディレクトリリストを描画
-    def draw_directory_list_to_buffer(screen, entries, width, height)
-      start_index = [@keybind_handler.current_index - height / 2, 0].max
-
-      (0...height).each do |i|
-        entry_index = start_index + i
-        line_num = i + CONTENT_START_LINE
-
-        if entry_index < entries.length
-          entry = entries[entry_index]
-          is_selected = entry_index == @keybind_handler.current_index
-
-          draw_entry_line_to_buffer(screen, entry, width, is_selected, 0, line_num)
-        else
-          # 空行
-          safe_width = [width - CURSOR_OFFSET, (@screen_width * LEFT_PANEL_RATIO).to_i - CURSOR_OFFSET].min
-          screen.put_string(0, line_num, ' ' * safe_width)
-        end
-      end
-    end
-
-    def draw_directory_list(entries, width, height)
-      start_index = [@keybind_handler.current_index - height / 2, 0].max
-      [start_index + height - 1, entries.length - 1].min
-
-      (0...height).each do |i|
-        entry_index = start_index + i
-        line_num = i + CONTENT_START_LINE
-
-        print "\e[#{line_num};1H" # set cursor position
-
-        if entry_index < entries.length
-          entry = entries[entry_index]
-          is_selected = entry_index == @keybind_handler.current_index
-
-          draw_entry_line(entry, width, is_selected)
-        else
-          # 左ペイン専用の安全な幅で空行を出力
-          safe_width = [width - CURSOR_OFFSET, (@screen_width * LEFT_PANEL_RATIO).to_i - CURSOR_OFFSET].min
-          print ' ' * safe_width
-        end
-      end
-    end
-
-    # Phase 3: Screenバッファにエントリ行を描画
-    def draw_entry_line_to_buffer(screen, entry, width, is_selected, x, y)
-      # アイコンと色の設定
-      icon, color = get_entry_display_info(entry)
-
-      # 左ペイン専用の安全な幅を計算
-      safe_width = [width - CURSOR_OFFSET, (@screen_width * LEFT_PANEL_RATIO).to_i - CURSOR_OFFSET].min
-
-      # 選択マークの追加
-      selection_mark = @keybind_handler.is_selected?(entry[:name]) ? "✓ " : "  "
-
-      # ファイル名（必要に応じて切り詰め）
-      name = entry[:name]
-      max_name_length = safe_width - ICON_SIZE_PADDING
-      name = name[0...max_name_length - 3] + '...' if max_name_length > 0 && name.length > max_name_length
-
-      # サイズ情報
-      size_info = format_size(entry[:size])
-
-      # 行の内容を構築
-      content_without_size = "#{selection_mark}#{icon} #{name}"
-      available_for_content = safe_width - size_info.length
-
-      line_content = if available_for_content > 0
-                       content_without_size.ljust(available_for_content) + size_info
-                     else
-                       content_without_size
-                     end
-
-      # 確実に safe_width を超えないよう切り詰め
-      line_content = line_content[0...safe_width]
-
-      # 色を決定
-      if is_selected
-        fg_color = ColorHelper.color_to_selected_ansi(ConfigLoader.colors[:selected])
-        screen.put_string(x, y, line_content, fg: fg_color)
-      elsif @keybind_handler.is_selected?(entry[:name])
-        # 選択されたアイテムは緑背景、黒文字
-        screen.put_string(x, y, line_content, fg: "\e[42m\e[30m")
-      else
-        screen.put_string(x, y, line_content, fg: color)
-      end
-    end
-
-    def draw_entry_line(entry, width, is_selected)
-      # アイコンと色の設定
-      icon, color = get_entry_display_info(entry)
-
-      # 左ペイン専用の安全な幅を計算（右ペインにはみ出さないよう）
-      safe_width = [width - CURSOR_OFFSET, (@screen_width * LEFT_PANEL_RATIO).to_i - CURSOR_OFFSET].min
-
-      # 選択マークの追加
-      selection_mark = @keybind_handler.is_selected?(entry[:name]) ? "✓ " : "  "
-
-      # ファイル名（必要に応じて切り詰め）
-      name = entry[:name]
-      max_name_length = safe_width - ICON_SIZE_PADDING
-      name = name[0...max_name_length - 3] + '...' if max_name_length > 0 && name.length > max_name_length
-
-      # サイズ情報
-      size_info = format_size(entry[:size])
-
-      # 行の内容を構築（安全な幅内で）
-      content_without_size = "#{selection_mark}#{icon} #{name}"
-      available_for_content = safe_width - size_info.length
-
-      line_content = if available_for_content > 0
-                       content_without_size.ljust(available_for_content) + size_info
-                     else
-                       content_without_size
-                     end
-
-      # 確実に safe_width を超えないよう切り詰め
-      line_content = line_content[0...safe_width]
-
-      if is_selected
-        selected_color = ColorHelper.color_to_selected_ansi(ConfigLoader.colors[:selected])
-        print "#{selected_color}#{line_content}#{ColorHelper.reset}"
-      else
-        # 選択されたアイテムは異なる色で表示
-        if @keybind_handler.is_selected?(entry[:name])
-          print "\e[42m\e[30m#{line_content}\e[0m"  # 緑背景、黒文字
-        else
-          print "#{color}#{line_content}#{ColorHelper.reset}"
-        end
-      end
-    end
-
-    def get_entry_display_info(entry)
-      colors = ConfigLoader.colors
-      
-      case entry[:type]
-      when 'directory'
-        color_code = ColorHelper.color_to_ansi(colors[:directory])
-        ['📁', color_code]
-      when 'executable'
-        color_code = ColorHelper.color_to_ansi(colors[:executable])
-        ['⚡', color_code]
-      else
-        case File.extname(entry[:name]).downcase
-        when '.rb'
-          ['💎', "\e[31m"]  # 赤
-        when '.js', '.ts'
-          ['📜', "\e[33m"]  # 黄
-        when '.txt', '.md'
-          color_code = ColorHelper.color_to_ansi(colors[:file])
-          ['📄', color_code]
-        else
-          color_code = ColorHelper.color_to_ansi(colors[:file])
-          ['📄', color_code]
-        end
-      end
-    end
-
-    def format_size(size)
-      return '      ' if size == 0
-
-      if size < KILOBYTE
-        "#{size}B".rjust(6)
-      elsif size < MEGABYTE
-        "#{(size / KILOBYTE.to_f).round(1)}K".rjust(6)
-      elsif size < GIGABYTE
-        "#{(size / MEGABYTE.to_f).round(1)}M".rjust(6)
-      else
-        "#{(size / GIGABYTE.to_f).round(1)}G".rjust(6)
-      end
-    end
-
-    # Phase 3: Screenバッファにファイルプレビューを描画
-    def draw_file_preview_to_buffer(screen, selected_entry, width, height, left_offset)
-      # 事前計算
-      cursor_position = left_offset + CURSOR_OFFSET
-      max_chars_from_cursor = @screen_width - cursor_position
-      safe_width = [max_chars_from_cursor - 2, width - 2, 0].max
-
-      # プレビューコンテンツをキャッシュから取得（毎フレームのファイルI/Oを回避）
-      preview_content = nil
-      wrapped_lines = nil
-      highlighted_wrapped_lines = nil
-
-      if selected_entry && selected_entry[:type] == 'file'
-        # キャッシュチェック: 選択ファイルが変わった場合のみプレビューを更新
-        if @last_preview_path != selected_entry[:path]
-          full_preview = @file_preview.preview_file(selected_entry[:path])
-          preview_content = extract_preview_lines(full_preview)
-          @preview_cache[selected_entry[:path]] = {
-            content: preview_content,
-            preview_data: full_preview,
-            highlighted: nil,       # nil = 未取得
-            wrapped: {},
-            highlighted_wrapped: {}
-          }
-          @last_preview_path = selected_entry[:path]
-        else
-          # キャッシュから取得
-          cache_entry = @preview_cache[selected_entry[:path]]
-          preview_content = cache_entry[:content] if cache_entry
-        end
-
-        # bat が利用可能な場合はシンタックスハイライトを取得（非同期）
-        if @syntax_highlighter&.available? && preview_content
-          cache_entry = @preview_cache[selected_entry[:path]]
-          if cache_entry
-            preview_data = cache_entry[:preview_data]
-            if preview_data && preview_data[:type] == 'code' && preview_data[:encoding] == 'UTF-8'
-              # ハイライト行を未取得なら非同期で bat を呼び出す
-              # nil = 未リクエスト、false = リクエスト済み（結果待ち）、Array = 取得済み
-              if cache_entry[:highlighted].nil?
-                # 即座に false をセットしてペンディング状態にする（重複リクエスト防止）
-                cache_entry[:highlighted] = false
-                file_path = selected_entry[:path]
-                @syntax_highlighter.highlight_async(file_path) do |lines|
-                  # バックグラウンドスレッドからキャッシュを更新
-                  if (ce = @preview_cache[file_path])
-                    ce[:highlighted] = lines
-                    ce[:highlighted_wrapped] = {}  # 折り返しキャッシュをクリア
-                  end
-                  @highlight_updated = true  # メインループに再描画を通知
-                end
-                # このフレームはプレーンテキストで表示（次フレームでハイライト表示）
-              end
-
-              highlighted = cache_entry[:highlighted]
-              if highlighted.is_a?(Array) && !highlighted.empty? && safe_width > 0
-                if cache_entry[:highlighted_wrapped][safe_width]
-                  highlighted_wrapped_lines = cache_entry[:highlighted_wrapped][safe_width]
-                else
-                  # 各ハイライト行をトークン化して折り返す
-                  hl_wrapped = highlighted.flat_map do |hl_line|
-                    tokens = AnsiLineParser.parse(hl_line)
-                    tokens.empty? ? [[]] : AnsiLineParser.wrap(tokens, safe_width - 1)
-                  end
-                  cache_entry[:highlighted_wrapped][safe_width] = hl_wrapped
-                  highlighted_wrapped_lines = hl_wrapped
-                end
-              end
-            end
-          end
-        end
-
-        # プレーンテキストの折り返し（ハイライトなしのフォールバック）
-        if preview_content && safe_width > 0 && highlighted_wrapped_lines.nil?
-          cache_entry = @preview_cache[selected_entry[:path]]
-          if cache_entry && cache_entry[:wrapped][safe_width]
-            wrapped_lines = cache_entry[:wrapped][safe_width]
-          else
-            wrapped_lines = TextUtils.wrap_preview_lines(preview_content, safe_width - 1)
-            cache_entry[:wrapped][safe_width] = wrapped_lines if cache_entry
-          end
-        end
-      end
-
-      content_x = cursor_position + 1
-
-      (0...height).each do |i|
-        line_num = i + CONTENT_START_LINE
-
-        # 区切り線
-        screen.put(cursor_position, line_num, '│')
-
-        next if safe_width <= 0
-
-        if selected_entry && i == 0
-          # プレビューヘッダー
-          header = " #{selected_entry[:name]} "
-          header += "[PREVIEW MODE]" if @keybind_handler&.preview_focused?
-          header = TextUtils.truncate_to_width(header, safe_width) if TextUtils.display_width(header) > safe_width
-          remaining_space = safe_width - TextUtils.display_width(header)
-          header += ' ' * remaining_space if remaining_space > 0
-          screen.put_string(content_x, line_num, header)
-
-        elsif i >= 2 && highlighted_wrapped_lines
-          # シンタックスハイライト付きコンテンツ
-          scroll_offset = @keybind_handler&.preview_scroll_offset || 0
-          display_line_index = i - 2 + scroll_offset
-
-          if display_line_index < highlighted_wrapped_lines.length
-            draw_highlighted_line_to_buffer(screen, content_x, line_num,
-                                            highlighted_wrapped_lines[display_line_index], safe_width)
-          else
-            screen.put_string(content_x, line_num, ' ' * safe_width)
-          end
-
-        elsif i >= 2 && wrapped_lines
-          # プレーンテキストコンテンツ
-          scroll_offset = @keybind_handler&.preview_scroll_offset || 0
-          display_line_index = i - 2 + scroll_offset
-
-          content_to_print = if display_line_index < wrapped_lines.length
-                               " #{wrapped_lines[display_line_index] || ''}"
-                             else
-                               ' '
-                             end
-          content_to_print = TextUtils.truncate_to_width(content_to_print, safe_width) if TextUtils.display_width(content_to_print) > safe_width
-          remaining_space = safe_width - TextUtils.display_width(content_to_print)
-          content_to_print += ' ' * remaining_space if remaining_space > 0
-          screen.put_string(content_x, line_num, content_to_print)
-
-        else
-          screen.put_string(content_x, line_num, ' ' * safe_width)
-        end
-      end
-    end
-
-    def draw_file_preview(selected_entry, width, height, left_offset)
-      # 事前計算（ループの外で一度だけ）
-      cursor_position = left_offset + CURSOR_OFFSET
-      max_chars_from_cursor = @screen_width - cursor_position
-      safe_width = [max_chars_from_cursor - 2, width - 2, 0].max
-
-      # プレビューコンテンツをキャッシュから取得（毎フレームのファイルI/Oを回避）
-      preview_content = nil
-      wrapped_lines = nil
-
-      if selected_entry && selected_entry[:type] == 'file'
-        # キャッシュチェック: 選択ファイルが変わった場合のみプレビューを更新
-        if @last_preview_path != selected_entry[:path]
-          preview_content = get_preview_content(selected_entry)
-          @preview_cache[selected_entry[:path]] = {
-            content: preview_content,
-            wrapped: {}  # 幅ごとにキャッシュ
-          }
-          @last_preview_path = selected_entry[:path]
-        else
-          # キャッシュから取得
-          cache_entry = @preview_cache[selected_entry[:path]]
-          preview_content = cache_entry[:content] if cache_entry
-        end
-
-        # 折り返し処理もキャッシュ
-        if preview_content && safe_width > 0
-          cache_entry = @preview_cache[selected_entry[:path]]
-          if cache_entry && cache_entry[:wrapped][safe_width]
-            wrapped_lines = cache_entry[:wrapped][safe_width]
-          else
-            wrapped_lines = TextUtils.wrap_preview_lines(preview_content, safe_width - 1)
-            cache_entry[:wrapped][safe_width] = wrapped_lines if cache_entry
-          end
-        end
-      end
-
-      (0...height).each do |i|
-        line_num = i + CONTENT_START_LINE
-
-        print "\e[#{line_num};#{cursor_position}H" # カーソル位置設定
-        print '│' # 区切り線
-
-        content_to_print = ''
-
-        if selected_entry && i == 0
-          # プレビューヘッダー
-          header = " #{selected_entry[:name]} "
-          # プレビューフォーカス中は表示を追加
-          if @keybind_handler&.preview_focused?
-            header += "[PREVIEW MODE]"
-          end
-          content_to_print = header
-        elsif wrapped_lines && i >= 2
-          # ファイルプレビュー（折り返し対応）
-          # スクロールオフセットを適用
-          scroll_offset = @keybind_handler&.preview_scroll_offset || 0
-          display_line_index = i - 2 + scroll_offset
-
-          if display_line_index < wrapped_lines.length
-            line = wrapped_lines[display_line_index] || ''
-            # スペースを先頭に追加
-            content_to_print = " #{line}"
-          else
-            content_to_print = ' '
-          end
-        else
-          content_to_print = ' '
-        end
-
-        # 絶対にsafe_widthを超えないよう強制的に切り詰める
-        if safe_width <= 0
-          # 表示スペースがない場合は何も出力しない
-          next
-        elsif TextUtils.display_width(content_to_print) > safe_width
-          # 表示幅ベースで切り詰める
-          content_to_print = TextUtils.truncate_to_width(content_to_print, safe_width)
-        end
-
-        # 出力（パディングなし、はみ出し防止のため）
-        print content_to_print
-
-        # 残りのスペースを埋める（ただし安全な範囲内のみ）
-        remaining_space = safe_width - TextUtils.display_width(content_to_print)
-        print ' ' * remaining_space if remaining_space > 0
-      end
-    end
-
-    def get_preview_content(entry)
-      return [] unless entry && entry[:type] == 'file'
-
-      preview = @file_preview.preview_file(entry[:path])
-      extract_preview_lines(preview)
-    rescue StandardError
-      ["(#{ConfigLoader.message('file.preview_error')})"]
-    end
-
-    # FilePreview の結果ハッシュからプレーンテキスト行を抽出する
-    def extract_preview_lines(preview)
-      case preview[:type]
-      when 'text', 'code'
-        preview[:lines]
-      when 'binary'
-        ["(#{ConfigLoader.message('file.binary_file')})", ConfigLoader.message('file.cannot_preview')]
-      when 'error'
-        ["#{ConfigLoader.message('file.error_prefix')}:", preview[:message]]
-      else
-        ["(#{ConfigLoader.message('file.cannot_preview')})"]
-      end
-    rescue StandardError
-      ["(#{ConfigLoader.message('file.preview_error')})"]
-    end
-
-    # ハイライト済みトークン列を1行分 Screen バッファに描画する
-    # 先頭に1スペースを追加し、残りをスペースで埋める
-    def draw_highlighted_line_to_buffer(screen, x, y, tokens, max_width)
-      current_x = x
-      max_x = x + max_width
-
-      # 先頭スペース
-      if current_x < max_x
-        screen.put(current_x, y, ' ')
-        current_x += 1
-      end
-
-      # トークンを描画
-      tokens&.each do |token|
-        break if current_x >= max_x
-        token[:text].each_char do |char|
-          char_w = TextUtils.char_width(char)
-          break if current_x + char_w > max_x
-          screen.put(current_x, y, char, fg: token[:fg])
-          current_x += char_w
-        end
-      end
-
-      # 残りをスペースで埋める
-      while current_x < max_x
-        screen.put(current_x, y, ' ')
-        current_x += 1
-      end
-    end
-
-
-    def get_display_entries
-      entries = if @keybind_handler.filter_active?
-                  # Get filtered entries from keybind_handler
-                  all_entries = @directory_listing.list_entries
-                  query = @keybind_handler.filter_query.downcase
-                  query.empty? ? all_entries : all_entries.select { |entry| entry[:name].downcase.include?(query) }
-                else
-                  @directory_listing.list_entries
-                end
-
-      # ヘルプモードとLogsモードでは..を非表示にする
-      if @keybind_handler.help_mode? || @keybind_handler.log_viewer_mode?
-        entries.reject { |entry| entry[:name] == '..' }
-      else
-        entries
-      end
-    end
-
-    # Phase 3: Screenバッファにフッターを描画
-    def draw_footer_to_buffer(screen, y, fps = nil)
-      if @keybind_handler.filter_active?
-        if @keybind_handler.instance_variable_get(:@filter_mode)
-          help_text = "Filter mode: Type to filter, ESC to clear, Enter to apply, Backspace to delete"
-        else
-          help_text = "Filtered view active - Space to edit filter, ESC to clear filter"
-        end
-        # フィルタモードでは通常のフッタを表示
-        footer_content = help_text.ljust(@screen_width)[0...@screen_width]
-        screen.put_string(0, y, footer_content, fg: "\e[7m")
-      else
-        # 通常モードではブックマーク一覧、ステータス情報、?:helpを1行に表示
-        # ブックマークをキャッシュ（毎フレームのファイルI/Oを回避）
-        current_time = Time.now
-        if @cached_bookmarks.nil? || @cached_bookmark_time.nil? || (current_time - @cached_bookmark_time) > @bookmark_cache_ttl
-          require_relative 'bookmark'
-          bookmark = Bookmark.new
-          @cached_bookmarks = bookmark.list
-          @cached_bookmark_time = current_time
-        end
-        bookmarks = @cached_bookmarks
-
-        # 起動ディレクトリを取得
-        start_dir = @directory_listing&.start_directory
-        start_dir_name = if start_dir
-                           File.basename(start_dir)
-                         else
-                           "start"
-                         end
-
-        # ブックマーク一覧を作成（0.起動dir を先頭に追加）
-        bookmark_parts = ["0.#{start_dir_name}"]
-        unless bookmarks.empty?
-          bookmark_parts.concat(bookmarks.take(9).map.with_index(1) { |bm, idx| "#{idx}.#{bm[:name]}" })
-        end
-        bookmark_text = bookmark_parts.join(" ")
-
-        # 右側の情報: ジョブ数 | コマンド実行ランプ | FPS（test modeの時のみ）| ?:help
-        right_parts = []
-
-        # ジョブ数を表示（ジョブがある場合のみ）
-        if @keybind_handler.has_jobs?
-          job_text = @keybind_handler.job_status_bar_text
-          right_parts << "[#{job_text}]" if job_text
-        end
-
-        # バックグラウンドコマンドの実行状態をランプで表示
-        if @background_executor
-          if @background_executor.running?
-            # 実行中ランプ（緑色の回転矢印）
-            command_name = @background_executor.current_command || "処理中"
-            right_parts << "\e[32m🔄\e[0m #{command_name}"
-          elsif @completion_lamp_message && @completion_lamp_time
-            # 完了ランプ（3秒間表示）
-            if (Time.now - @completion_lamp_time) < 3.0
-              right_parts << @completion_lamp_message
-            else
-              @completion_lamp_message = nil
-              @completion_lamp_time = nil
-            end
-          end
-        end
-
-        # FPS表示（test modeの時のみ）
-        if @test_mode && fps
-          right_parts << "#{fps.round(1)} FPS"
-        end
-
-        # ヘルプ表示
-        right_parts << "?:help"
-
-        right_info = right_parts.join(" | ")
-
-        # ブックマーク一覧を利用可能な幅に収める
-        available_width = @screen_width - right_info.length - 3
-        if bookmark_text.length > available_width && available_width > 3
-          bookmark_text = bookmark_text[0...available_width - 3] + "..."
-        elsif available_width <= 3
-          bookmark_text = ""
-        end
-
-        # フッタ全体を構築
-        padding = @screen_width - bookmark_text.length - right_info.length
-        footer_content = "#{bookmark_text}#{' ' * padding}#{right_info}"
-        footer_content = footer_content.ljust(@screen_width)[0...@screen_width]
-        screen.put_string(0, y, footer_content, fg: "\e[7m")
-      end
+      @ui_renderer.draw_screen_to_buffer(
+        screen, notification_message, fps,
+        in_job_mode: @in_job_mode,
+        job_manager: @job_manager,
+        job_mode_instance: @job_mode_instance
+      )
     end
 
-    def draw_footer(render_time = nil)
-      # フッタは最下行に表示
-      footer_line = @screen_height - FOOTER_HEIGHT + 1
-      print "\e[#{footer_line};1H"
-
-      if @keybind_handler.filter_active?
-        if @keybind_handler.instance_variable_get(:@filter_mode)
-          help_text = "Filter mode: Type to filter, ESC to clear, Enter to apply, Backspace to delete"
-        else
-          help_text = "Filtered view active - Space to edit filter, ESC to clear filter"
-        end
-        # フィルタモードでは通常のフッタを表示
-        footer_content = help_text.ljust(@screen_width)[0...@screen_width]
-        print "\e[7m#{footer_content}\e[0m"
-      else
-        # 通常モードではブックマーク一覧、ステータス情報、?:helpを1行に表示
-        # ブックマークをキャッシュ（毎フレームのファイルI/Oを回避）
-        current_time = Time.now
-        if @cached_bookmarks.nil? || @cached_bookmark_time.nil? || (current_time - @cached_bookmark_time) > @bookmark_cache_ttl
-          require_relative 'bookmark'
-          bookmark = Bookmark.new
-          @cached_bookmarks = bookmark.list
-          @cached_bookmark_time = current_time
-        end
-        bookmarks = @cached_bookmarks
-
-        # 起動ディレクトリを取得
-        start_dir = @directory_listing&.start_directory
-        start_dir_name = if start_dir
-                           File.basename(start_dir)
-                         else
-                           "start"
-                         end
-
-        # ブックマーク一覧を作成（0.起動dir を先頭に追加）
-        bookmark_parts = ["0.#{start_dir_name}"]
-        unless bookmarks.empty?
-          bookmark_parts.concat(bookmarks.take(9).map.with_index(1) { |bm, idx| "#{idx}.#{bm[:name]}" })
-        end
-        bookmark_text = bookmark_parts.join(" ")
-
-        # ステータス情報を作成
-        time_info = render_time ? "#{(render_time * 1000).round(1)}ms" : "-ms"
-
-        # 右側の情報: 処理時間 | ?:help
-        right_info = "#{time_info} | ?:help"
-
-        # ブックマーク一覧を利用可能な幅に収める
-        available_width = @screen_width - right_info.length - 3
-        if bookmark_text.length > available_width && available_width > 3
-          bookmark_text = bookmark_text[0...available_width - 3] + "..."
-        elsif available_width <= 3
-          bookmark_text = ""
-        end
-
-        # フッタ全体を構築
-        padding = @screen_width - bookmark_text.length - right_info.length
-        footer_content = "#{bookmark_text}#{' ' * padding}#{right_info}"
-        footer_content = footer_content.ljust(@screen_width)[0...@screen_width]
-        print "\e[7m#{footer_content}\e[0m"
-      end
-    end
+    private
 
     # ノンブロッキング入力処理（ゲームループ用）
     # IO.selectでタイムアウト付きで入力をチェック
@@ -1333,12 +434,27 @@ module Rufio
         end
       end
 
-      # Tabキーでモード切り替え
-      if input == "\t"
+      # TabキーはFilesモードの時のみブックマーク循環移動
+      if input == "\t" && @tab_mode_manager.current_mode == :files
         handle_tab_key
         return true
       end
 
+      # 数字キー（1-9）: Filesモード かつ フィルターモード外でブックマークジャンプ＋ハイライト
+      if input&.match?(/^[1-9]$/) && @tab_mode_manager.current_mode == :files && !@keybind_handler.filter_active?
+        handle_bookmark_key(input.to_i)
+        return true
+      end
+
+      # Jobsモード中のモード切替キーをインターセプト（L:Logs, ?:Help, J:Files復帰）
+      if @in_job_mode
+        case input
+        when 'L' then apply_mode_change(:logs); return true
+        when '?' then apply_mode_change(:help); return true
+        when 'J' then apply_mode_change(:files); return true
+        end
+      end
+
       # キーバインドハンドラーに処理を委譲
       result = @keybind_handler.handle_key(input) if input
 
@@ -1355,83 +471,39 @@ module Rufio
       # 入力があったことを返す
       true
     end
-
-    def handle_input
-      begin
-        input = STDIN.getch
-      rescue Errno::ENOTTY, Errno::ENODEV
-        # ターミナルでない環境（IDE等）では標準入力を使用
-        print "\nOperation: "
-        input = STDIN.gets
-        return 'q' if input.nil?
-        input = input.chomp.downcase
-        return input[0] if input.length > 0
-
-        return 'q'
-      end
-
-      # コマンドモードがアクティブな場合は、エスケープシーケンス処理をスキップ
-      # ESCキーをそのまま handle_command_input に渡す
-      if @command_mode_active
-        handle_command_input(input)
-        return
-      end
-
-      # 特殊キーの処理（コマンドモード外のみ）
-      if input == "\e"
-        # エスケープシーケンスの処理
-        next_char = begin
-          STDIN.read_nonblock(1)
-        rescue StandardError
-          nil
-        end
-        if next_char == '['
-          arrow_key = begin
-            STDIN.read_nonblock(1)
-          rescue StandardError
-            nil
-          end
-          input = case arrow_key
-                  when 'A'  # 上矢印
-                    'k'
-                  when 'B'  # 下矢印
-                    'j'
-                  when 'C'  # 右矢印
-                    'l'
-                  when 'D'  # 左矢印
-                    'h'
-                  else
-                    "\e" # ESCキー（そのまま保持）
-                  end
-        else
-          input = "\e" # ESCキー（そのまま保持）
-        end
-      end
-
-      # キーバインドハンドラーに処理を委譲
-      result = @keybind_handler.handle_key(input)
-
-      # 外部ターミナルアプリ（vim等）から戻った後は画面全体を再描画
-      if result == :needs_refresh
-        refresh_display
-      end
-
-      # 終了処理（qキーのみ、確認ダイアログの結果を確認）
-      if input == 'q' && result == true
-        @running = false
+    # Tabキー: 次のブックマークへ循環移動
+    def handle_tab_key
+      next_idx = @keybind_handler.goto_next_bookmark
+      if next_idx
+        # display_index: 0=start_dir, 1..9=bookmarks（next_idx は 0-based bookmarks 配列）
+        @ui_renderer.set_highlighted_bookmark(next_idx + 1)
+        # ブックマークキャッシュを即時クリア（移動先を反映させる）
+        @ui_renderer.clear_bookmark_cache
       end
     end
 
-    # Tabキーによるモード切り替え
-    def handle_tab_key
-      @tab_mode_manager.next_mode
-      apply_mode_change(@tab_mode_manager.current_mode)
+    # 数字キー（1-9）: 指定番号のブックマークへジャンプ＋ハイライト
+    def handle_bookmark_key(number)
+      result = @keybind_handler.goto_bookmark(number)
+      if result
+        # display_index = number（1.bookmark1, 2.bookmark2, ...）
+        @ui_renderer.set_highlighted_bookmark(number)
+        @ui_renderer.clear_bookmark_cache
+      end
     end
 
-    # Shift+Tabによる逆順モード切り替え
+    # Shift+Tab: Filesモードでは前のブックマークへ循環移動、それ以外はモード逆順切り替え
     def handle_shift_tab
-      @tab_mode_manager.previous_mode
-      apply_mode_change(@tab_mode_manager.current_mode)
+      if @tab_mode_manager.current_mode == :files
+        prev_idx = @keybind_handler.goto_prev_bookmark
+        if prev_idx
+          @ui_renderer.set_highlighted_bookmark(prev_idx + 1)
+          @ui_renderer.clear_bookmark_cache
+        end
+      else
+        @tab_mode_manager.previous_mode
+        apply_mode_change(@tab_mode_manager.current_mode)
+      end
     end
 
     # モード変更を適用