karafka-web 0.11.0.rc2 → 0.11.0.rc3

data/lib/karafka/web/ui/helpers/time_helper.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Karafka
+  module Web
+    module Ui
+      module Helpers
+        # Helper with time-related methods
+        module TimeHelper
+          # @param time [Float] UTC time float
+          # @return [String] relative time tag for timeago.js
+          def relative_time(time)
+            stamp = Time.at(time).getutc.iso8601(3)
+            %(<time class="ltr" dir="ltr" title="#{stamp}" datetime="#{stamp}">#{time}</time>)
+          end
+
+          # @param time [Time] time object we want to present with detailed ms label
+          # @return [String] span tag with raw timestamp as a title and time as a value
+          def time_with_label(time)
+            stamp = (time.to_f * 1000).to_i
+
+            %(<span title="#{stamp}">#{time}</span>)
+          end
+
+          # Converts raw second count into human readable form like "12.2 minutes". etc based on
+          # number of seconds
+          #
+          # @param seconds [Numeric] number of seconds
+          # @return [String] human readable time
+          def human_readable_time(seconds)
+            case seconds
+            when 0..59
+              "#{seconds.round(2)} seconds"
+            when 60..3_599
+              minutes = seconds / 60.0
+              "#{minutes.round(2)} minutes"
+            when 3_600..86_399
+              hours = seconds / 3_600.0
+              "#{hours.round(2)} hours"
+            else
+              days = seconds / 86_400.0
+              "#{days.round(2)} days"
+            end
+          end
+
+          # @param state [String] poll state
+          # @param state_ch [Integer] time until next change of the poll state
+          #   (from paused to active)
+          # @return [String] span tag with label and title with change time if present
+          def poll_state_with_change_time_label(state, state_ch)
+            year_in_seconds = 131_556_926
+            state_ch_in_seconds = state_ch / 1_000.0
+
+            # If state is active, there is no date of change
+            if state == 'active'
+              %(
+                <span class="badge #{kafka_state_badge(state)}">#{state}</span>
+              )
+            elsif state_ch_in_seconds > year_in_seconds
+              %(
+                <span
+                  class="badge #{kafka_state_badge(state)}"
+                  title="until manual resume"
+                >
+                  #{state}
+                </span>
+              )
+            else
+              %(
+                <span
+                  class="badge #{kafka_state_badge(state)} time-title"
+                  title="#{Time.now + state_ch_in_seconds}"
+                >
+                  #{state}
+                </span>
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/karafka/web/ui/helpers/topics_helper.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Karafka
+  module Web
+    module Ui
+      module Helpers
+        # Helper module for formatting Kafka topic and partition information
+        # in various contexts within the Karafka Web UI.
+        #
+        # This module provides consistent formatting for topic-partition assignments
+        # across different display contexts like inline text, labels, and identifiers.
+        #
+        # @see https://karafka.io/docs/Development-Naming-Conventions
+        module TopicsHelper
+          # Default limit for displaying partitions before truncation
+          DEFAULT_LIMIT = 5
+
+          # Formats topic and partitions for inline text display in views.
+          #
+          # This method is optimized for compact display in assignments, logs, and
+          # other inline contexts where space is limited.
+          #
+          # @param topic [String] the Kafka topic name
+          # @param partitions [Array<Integer>, Integer] partition number(s) to format
+          # @param limit [Integer] maximum number of partitions to display before truncation
+          # @return [String] formatted topic-partition string
+          #
+          # @example Single partition
+          #   topics_assignment_text("user-events", 0)
+          #   # => "user-events-[0]"
+          #
+          # @example Multiple consecutive partitions
+          #   topics_assignment_text("user-events", [0, 1, 2, 3])
+          #   # => "user-events-[0-3]"
+          #
+          # @example Multiple non-consecutive partitions
+          #   topics_assignment_text("user-events", [0, 2, 4])
+          #   # => "user-events-[0,2,4]"
+          #
+          # @example Truncated partitions list
+          #   topics_assignment_text("user-events", [0, 1, 2, 3, 4, 5, 6], limit: 3)
+          #   # => "user-events-[0,1,2...]"
+          #
+          # @example Empty partitions
+          #   topics_assignment_text("user-events", [])
+          #   # => "user-events"
+          def topics_assignment_text(topic, partitions, limit: DEFAULT_LIMIT)
+            partitions = Array(partitions)
+
+            if partitions.empty?
+              topic
+            elsif partitions.size == 1
+              "#{topic}-[#{partitions.first}]"
+            else
+              sorted_partitions = partitions.map(&:to_i).sort
+              # Check for consecutive first (best representation)
+              if topics_consecutive?(sorted_partitions) && sorted_partitions.size > 2
+                "#{topic}-[#{sorted_partitions.first}-#{sorted_partitions.last}]"
+              # Apply limit if specified and partitions exceed it
+              elsif limit && sorted_partitions.size > limit
+                displayed_partitions = sorted_partitions.first(limit)
+                "#{topic}-[#{displayed_partitions.join(',')}...]"
+              else
+                "#{topic}-[#{sorted_partitions.join(',')}]"
+              end
+            end
+          end
+
+          # Formats topic and partitions for human-readable labels and headers.
+          #
+          # This method provides more descriptive formatting suitable for page titles,
+          # section headers, and other contexts where additional context is helpful.
+          #
+          # @param topic [String] the Kafka topic name
+          # @param partitions [Array<Integer>, Integer] partition number(s) to format
+          # @param limit [Integer] maximum number of partitions to display before truncation
+          # @return [String] formatted topic-partition label with additional context
+          #
+          # @example Consecutive partitions with count
+          #   topics_assignment_label("user-events", [0, 1, 2, 3])
+          #   # => "user-events-[0-3] (4 partitions total)"
+          #
+          # @example Truncated with remaining count
+          #   topics_assignment_label("user-events", [0, 1, 2, 3, 4, 5], limit: 3)
+          #   # => "user-events-[0,1,2] (+3 more)"
+          #
+          # @example Non-consecutive partitions
+          #   topics_assignment_label("user-events", [0, 2, 4])
+          #   # => "user-events-[0,2,4]"
+          def topics_assignment_label(topic, partitions, limit: DEFAULT_LIMIT)
+            partitions = Array(partitions)
+
+            sorted_partitions = partitions.map(&:to_i).sort
+            if topics_consecutive?(sorted_partitions)
+              "#{topic}-[#{sorted_partitions.first}-#{sorted_partitions.last}] " \
+                "(#{partitions.size} partitions total)"
+            elsif sorted_partitions.size > limit
+              displayed = sorted_partitions.first(limit)
+              remaining = sorted_partitions.size - limit
+              "#{topic}-[#{displayed.join(',')}] (+#{remaining} more)"
+            else
+              "#{topic}-[#{sorted_partitions.join(',')}]"
+            end
+          end
+
+          # Creates a specific identifier for topic-partition combinations.
+          #
+          # This method generates consistent identifiers used in metrics collection,
+          # cache keys, and other contexts requiring unique topic-partition identification.
+          #
+          # @param topic [String] the Kafka topic name
+          # @param partition [Integer] the partition number
+          # @return [String] formatted topic-partition identifier
+          #
+          # @example Basic identifier
+          #   topics_partition_identifier("user-events", 0)
+          #   # => "user-events-0"
+          #
+          # @example Used for cache keys
+          #   cache_key = topics_partition_identifier("orders", 3)
+          #   Rails.cache.fetch(cache_key) { expensive_operation }
+          def topics_partition_identifier(topic, partition)
+            "#{topic}-#{partition}"
+          end
+
+          private
+
+          # Checks if an array of sorted integers contains consecutive numbers.
+          #
+          # This helper method determines whether partition numbers form a continuous
+          # sequence, which allows for more compact display formatting.
+          #
+          # @param sorted_array [Array<Integer>] array of sorted integers to check
+          # @return [Boolean] true if all numbers are consecutive, false otherwise
+          #
+          # @example Consecutive numbers
+          #   topics_consecutive?([1, 2, 3, 4])  # => true
+          #
+          # @example Non-consecutive numbers
+          #   topics_consecutive?([1, 3, 5, 7])  # => false
+          #
+          # @example Single element (not consecutive)
+          #   topics_consecutive?([1])  # => false
+          #
+          # @example Empty array (not consecutive)
+          #   topics_consecutive?([])  # => false
+          def topics_consecutive?(sorted_array)
+            return false if sorted_array.size < 2
+
+            sorted_array.each_cons(2).all? { |a, b| b == a + 1 }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/karafka/web/ui/models/message.rb

@@ -10,13 +10,21 @@ module Karafka
           extend Lib::Paginations::Paginators
 
           class << self
-            # Looks for a message from a given topic partition
+            # Looks for a message from a given topic partition. When no offsets provided, will
+            # raise if there is no data under the given offset. If watermarks were provided, it
+            # will check if this is a system entry and in such cases will return nil.
+            # Will always raise if request is out of range.
             #
             # @param topic_id [String]
             # @param partition_id [Integer]
             # @param offset [Integer]
+            # @param watermark_offsets [WatermarkOffsets, false] watermark offsets for this topic
+            #   partition or false if not provided
+            # @return [Karafka::Messages::Message, nil] found message or nil in case watermark
+            #   offsets were provided and we encountered a message matching watermarks
             # @raise [::Karafka::Web::Errors::Ui::NotFoundError] when not found
-            def find(topic_id, partition_id, offset)
+            # @note If no watermark offsets provided will always raise if no message with data
+            def find(topic_id, partition_id, offset, watermark_offsets: false)
               message = Lib::Admin.read_topic(
                 topic_id,
                 partition_id,
@@ -26,6 +34,16 @@ module Karafka
 
               return message if message
 
+              # Not found can also occur for system entries and compacted messages.
+              # Since we want to know about this in some cases we handle this case and check if the
+              # requested offset is within the range and if so, it means it has been cleaned or
+              # is a system entry. In such cases we do display user an info message.
+              return nil if watermark_offsets &&
+                            offset >= watermark_offsets.low &&
+                            offset < watermark_offsets.high
+
+              # If beyond the watermark offsets, we raise 404 as user should not reach such
+              # non-existent messages as we cannot reason about them
               raise(
                 ::Karafka::Web::Errors::Ui::NotFoundError,
                 [topic_id, partition_id, offset].join(', ')

data/lib/karafka/web/ui/public/stylesheets/application.min.css

@@ -11,7 +11,7 @@
 .air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: #f0f0f0;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99}
 .air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s}
 
-/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -388,7 +388,7 @@
       background-color: var(--tt-bg);
       width: max-content;
       pointer-events: none;
-      z-index: 1;
+      z-index: 2;
       --tw-content: attr(data-tip);
       content: var(--tw-content);
     }
@@ -1450,11 +1450,11 @@
       z-index: 1;
       position: absolute;
       white-space: nowrap;
-      top: var(--inidicator-t, 0);
-      bottom: var(--inidicator-b, auto);
-      left: var(--inidicator-s, auto);
-      right: var(--inidicator-e, 0);
-      translate: var(--inidicator-x, 50%) var(--indicator-y, -50%);
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
     }
   }
   .table {
@@ -2108,6 +2108,7 @@
       border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
     }
     position: relative;
+    display: inline-block;
     flex-shrink: 0;
     cursor: pointer;
     appearance: none;
@@ -2181,6 +2182,7 @@
   }
   .radio {
     position: relative;
+    display: inline-block;
     flex-shrink: 0;
     cursor: pointer;
     appearance: none;
@@ -3057,31 +3059,6 @@
     --badge-fg: var(--color-base-content);
     --size: calc(var(--size-selector, 0.25rem) * 6);
     height: var(--size);
-    &.badge-outline {
-      --badge-fg: var(--badge-color);
-      --badge-bg: #0000;
-      background-image: none;
-      border-color: currentColor;
-    }
-    &.badge-dash {
-      --badge-fg: var(--badge-color);
-      --badge-bg: #0000;
-      background-image: none;
-      border-color: currentColor;
-      border-style: dashed;
-    }
-    &.badge-soft {
-      color: var(--badge-color, var(--color-base-content));
-      background-color: var(--badge-color, var(--color-base-content));
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
-      }
-      border-color: var(--badge-color, var(--color-base-content));
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
-      }
-      background-image: none;
-    }
   }
   .tabs {
     display: flex;
@@ -3445,6 +3422,7 @@
     display: grid;
     column-gap: calc(0.25rem * 3);
     padding-block: calc(0.25rem * 1);
+    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
   }
   .branding-label {
     @media (width >= 64rem) {
@@ -4769,9 +4747,6 @@ tr:not(:first-child) th[colspan]:not([colspan="1"]) {
   :root {
     --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
   }
-  .chat {
-    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
-  }
 }
 @layer base {
   :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {

data/lib/karafka/web/ui/routes/errors.rb

@@ -11,7 +11,11 @@ module Karafka
               controller = build(Controllers::ErrorsController)
 
               r.get Integer do |offset|
-                controller.show(offset)
+                if params.current_offset != -1
+                  r.redirect root_path('errors', params.current_offset)
+                else
+                  controller.show(offset)
+                end
               end
 
               r.get do

data/lib/karafka/web/ui/views/consumers/_assignments_badges.erb

@@ -11,14 +11,9 @@
     <% partitions_list = partitions.join(', ') %>
     <span
       class="badge badge-secondary"
-      title="Consumer group: <%= consumer_group.id %>, partitions: <%= partitions_list%>"
+      title="Consumer group: <%= consumer_group.id %>, assignments: <%= topics_assignment_label(topic_name, partitions, limit: 25) %>"
     >
-      <%= topic_name %>:
-      <% if partitions.size > 10 %>
-        <%= "#{partitions.sort.first(10).join(',')}..." %>
-      <% else %>
-        <%= partitions.sort.join(',') %>
-      <% end %>
+      <%= topics_assignment_text(topic_name, partitions) %>
     </span>
   <% end %>
 <% end %>

data/lib/karafka/web/ui/views/errors/_breadcrumbs.erb

@@ -4,15 +4,10 @@
   </a>
 </li>
 
-<% if @error_message %>
+<% if @offset %>
   <li>
-    <a href="<%= root_path('errors', @offset) %>">
-      <%=
-        type = @error_message.payload[:type]
-        error_class = @error_message.payload[:error_class]
-
-        "#{type}: #{error_class}"
-      %>
+    <a href="<%= root_path('errors', @partition_id, @offset) %>">
+      <%= "Offset #{@offset}" %>
     </a>
   </li>
 <% end %>

data/lib/karafka/web/ui/views/errors/_error.erb

@@ -7,7 +7,12 @@
     <td>
       <span class="badge badge-secondary">
         <% if error[:details].key?(:topic) %>
-          <%= error[:details][:topic] %>: <%= error[:details][:partition] %>
+          <%=
+            topic = error[:details][:topic]
+            partition = error[:details][:partition]
+
+            topics_partition_identifier(topic, partition)
+          %>
         <% else %>
           <%= error[:type] %>
         <% end %>

data/lib/karafka/web/ui/views/errors/show.erb

@@ -1,39 +1,45 @@
-<%
-  type = @error_message.payload[:type]
-  error_class = @error_message.payload[:error_class]
+<% if @error_message %>
+  <%
+    type = @error_message.payload[:type]
+    error_class = @error_message.payload[:error_class]
 
-  view_title "#{type}: #{error_class}"
-%>
+    view_title "#{type}: #{error_class}"
+  %>
 
-<div class="col-span-12 mb-3">
-  <h2 class="h2">
-    Metadata
-  </h2>
+  <div class="col-span-12 mb-3">
+    <h2 class="h2">
+      Metadata
+    </h2>
 
-  <div class="data-table-wrapper">
-    <table class="data-table">
-      <tbody>
-        <% @error_message.payload.each do |k, v| %>
-          <% next if k == :backtrace %>
-          <%==
-            partial(
-              'errors/detail',
-              locals: {
-                k: k,
-                v: v
-              }
-            )
-          %>
-        <% end %>
-      </tbody>
-    </table>
+    <div class="data-table-wrapper">
+      <table class="data-table">
+        <tbody>
+          <% @error_message.payload.each do |k, v| %>
+            <% next if k == :backtrace %>
+            <%==
+              partial(
+                'errors/detail',
+                locals: {
+                  k: k,
+                  v: v
+                }
+              )
+            %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
   </div>
-</div>
 
-<div class="col-span-12 mb-3">
-  <h2 class="h2">
-    Backtrace
-  </h2>
+  <div class="col-span-12 mb-6">
+    <h2 class="h2">
+      Backtrace
+    </h2>
 
-  <pre class="mb-5 p-0 border border-gray-300 text-sm"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
-</div>
+    <pre class="mb-5 p-0 border border-gray-300 text-sm"><code class="wrapped json p-0 m-0"><%= @error_message.payload[:backtrace] %></code></pre>
+  </div>
+<% else %>
+  <% view_title "Offset #{@offset}" %>
+
+  <%== partial 'shared/compacted_message_info' %>
+<% end %>

data/lib/karafka/web/ui/views/jobs/_job.erb

@@ -6,8 +6,7 @@
   </td>
   <td>
     <span class="badge badge-secondary" title="Consumer group: <%= job.consumer_group %>">
-      <%= job.topic %>:
-      <%= job.partition %>
+      <%= topics_partition_identifier(job.topic, job.partition) %>
     </span>
   </td>
   <td>

data/lib/karafka/web/ui/views/shared/_compacted_message_info.erb

@@ -0,0 +1,16 @@
+<div class="col-span-12 mb-6">
+  <% alert_box_info('Empty Offset - No Data') do %>
+    <p>
+      This offset does not contain any consumable message data. This is normal Kafka behavior that occurs when:
+    </p>
+    <ul class="list-disc ml-6 mt-2">
+      <li>The message has been removed through log compaction</li>
+      <li>This offset contains internal Kafka system records (transaction markers, control records)</li>
+      <li>The message is a tombstone record (deletion marker with null value)</li>
+      <li>The topic uses cleanup policies that have processed this offset</li>
+    </ul>
+    <p class="mt-2">
+      Try navigating to nearby offsets or verify the topic's log compaction settings if you expected message data here.
+    </p>
+  <% end %>
+</div>

data/lib/karafka/web/version.rb

@@ -3,6 +3,6 @@
 module Karafka
   module Web
     # Current gem version
-    VERSION = '0.11.0.rc2'
+    VERSION = '0.11.0.rc3'
   end
 end