@ktnpm_devops/react-component 0.1.0 → 0.2.0

package/dist/style.css

@@ -1,10 +1,36 @@
+.krc-root-la9-1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--surface-secondary);
+  padding: var(--spacing-md);
+}
+
+.krc-logo-b73UT {
+  margin-bottom: var(--spacing-lg);
+}
+
+.krc-card-1ev-q {
+  width: 100%;
+  background: var(--surface-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-lg);
+}
+
+.krc-footer-E0B15 {
+  margin-top: var(--spacing-lg);
+  color: var(--text-primary);
+}
 .krc-root-GPZXT {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.125rem;
-  background: linear-gradient(135deg, var(--accent-color), var(--orbit-color-purple-light));
-  color: #ffffff;
+  background: var(--avatar-gradient);
+  color: var(--accent-color-contrast);
   font-weight: 600;
 }
 
@@ -77,7 +103,7 @@
 
 .krc-root-Kdtyn:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 var(--border-width-md) rgba(255, 107, 90, 0.35), 0 0 0 var(--focus-ring-spread) rgba(255, 107, 90, 0.18);
+  box-shadow: var(--focus-ring-shadow);
 }
 
 .krc-root-Kdtyn:disabled {
@@ -130,11 +156,11 @@
 
 .krc-danger-gL4NM {
   background: var(--danger-color);
-  color: #ffffff;
+  color: var(--accent-color-contrast);
 }
 
 .krc-danger-gL4NM:hover:not(:disabled) {
-  background: #991b1b;
+  background: var(--danger-color-strong, #991b1b);
 }
 
 .krc-sm-zP51s {
@@ -270,6 +296,44 @@
   border-right: var(--border-width-md) solid var(--text-secondary);
   border-bottom: var(--border-width-md) solid var(--text-secondary);
 }
+.krc-root-pS02L {
+  display: flex;
+  height: 100%;
+  background: var(--surface-color);
+}
+
+.krc-sidebar-n1HeR {
+  flex-shrink: 0;
+  background: var(--surface-secondary);
+  border-right: var(--border-width) solid var(--border-color);
+}
+
+.krc-conversationList-E8ODD {
+  flex-shrink: 0;
+  width: 20rem;
+  overflow-y: auto;
+  background: var(--surface-secondary);
+  border-right: var(--border-width) solid var(--border-color);
+}
+
+.krc-mainArea-E0cNf {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.krc-messages-S9aU- {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.krc-input-HAMJ3 {
+  flex-shrink: 0;
+  border-top: var(--border-width) solid var(--border-color);
+  padding: var(--spacing-md);
+}
 .krc-root-LQf3S {
   position: fixed;
   z-index: 10;
@@ -318,538 +382,1363 @@
 .krc-item-Y5RvK:hover:not(.krc-disabled-wnQRZ) .krc-icon-q-Jmu {
   color: var(--text-primary);
 }
-.krc-root-7cxYt {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.krc-chip-tgAQw {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--surface-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: border-color 0.2s ease;
-}
-
-.krc-chip-tgAQw:hover {
-  border-color: var(--accent-color);
-}
-
-.krc-chip-tgAQw.krc-active-hboGd {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-  font-weight: 600;
-}
-
-.krc-summary-E-FXy {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-.krc-popover-IJFWK {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  z-index: 10;
-  min-width: 18.75rem;
+.krc-root-rUudF {
+  display: flex;
+  flex-direction: column;
   background: var(--surface-color);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--spacing-md);
+  overflow: hidden;
 }
 
-.krc-popoverHeader-mdeD8 {
-  margin-bottom: var(--spacing-sm);
+.krc-header-zjbPA {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.krc-popoverHeader-mdeD8 h4 {
+.krc-title-ScYja {
   margin: 0;
   font-size: var(--font-size-md);
+  font-weight: 600;
   color: var(--text-primary);
 }
 
-.krc-fields-h5R5w {
+.krc-timeRangeGroup-FP1TP {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-2xs);
 }
 
-.krc-field-u9yvp {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  font-size: var(--font-size-sm);
+.krc-timeRangeButton-9XCxb {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-base);
   color: var(--text-secondary);
-}
-
-.krc-field-u9yvp input {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--surface-secondary);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-}
-
-.krc-field-u9yvp input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-}
-
-.krc-error-jsFkv {
-  margin-top: var(--spacing-sm);
-  color: var(--danger-color);
-  font-size: var(--font-size-sm);
-}
-
-.krc-actions-prbFX {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-xs);
-  margin-top: var(--spacing-md);
-}
-
-.krc-btnGhost-x8cbA {
-  padding: var(--spacing-xs) var(--spacing-sm);
   background: transparent;
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
   cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.krc-btnGhost-x8cbA:hover {
+.krc-timeRangeButton-9XCxb:hover {
   color: var(--text-primary);
-  border-color: var(--text-secondary);
+  background: var(--surface-secondary);
 }
 
-.krc-btnPrimary-T0w2q {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--accent-color);
-  border: none;
-  border-radius: var(--radius-sm);
-  color: #fff;
-  font-size: var(--font-size-sm);
-  cursor: pointer;
+.krc-timeRangeButton-9XCxb:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
 }
 
-.krc-btnPrimary-T0w2q:hover {
-  opacity: 0.85;
-}
-.krc-root-bWynN {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  border-radius: var(--radius-md);
-  border: var(--border-width) solid var(--border-color);
-  background: var(--surface-color);
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+.krc-timeRangeButtonActive-Y-KCh {
+  color: var(--accent-color-contrast);
+  background: var(--accent-color);
+  border-color: var(--accent-color);
 }
 
-.krc-root-bWynN::placeholder {
-  color: var(--text-tertiary);
+.krc-timeRangeButtonActive-Y-KCh:hover {
+  color: var(--accent-color-contrast);
+  background: var(--accent-color-strong);
+  border-color: var(--accent-color-strong);
 }
 
-.krc-root-bWynN:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+.krc-chartContainer-6rb4Z {
+  flex: 1;
+  min-height: 18.75rem;
+  padding: var(--spacing-sm);
 }
 
-.krc-root-bWynN:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.krc-overlay-4gFc3 {
-  position: fixed;
-  inset: 0;
-  background: rgba(17, 24, 39, 0.55);
-  backdrop-filter: blur(var(--backdrop-blur));
+.krc-loading-EWhol,
+.krc-error-erDaP,
+.krc-empty---cYi {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-lg);
-  z-index: 99999;
+  min-height: 18.75rem;
+  font-size: var(--font-size-sm);
 }
 
-.krc-root-eKDda {
-  width: min(40rem, 100%);
-  max-height: 90vh;
-  overflow: hidden;
-  border-radius: var(--radius-lg);
-  border: var(--border-width) solid var(--border-color);
+.krc-loading-EWhol {
+  color: var(--text-secondary);
+}
+
+.krc-error-erDaP {
+  color: var(--danger-color);
+}
+
+.krc-empty---cYi {
+  color: var(--text-secondary);
+}
+.krc-root-GYECa {
   background: var(--surface-color);
-  box-shadow: var(--shadow-elevated);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-subtle);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
-.krc-header-YrzLd {
-  padding: var(--spacing-lg);
-  border-bottom: var(--border-width) solid var(--border-color);
+.krc-header-7V-0i {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.krc-title-9rzEH {
+.krc-title-SiRcV {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-md);
   font-weight: 600;
   color: var(--text-primary);
 }
 
-.krc-closeBtn-vGJ7P {
-  display: inline-flex;
+.krc-headerActions-HY6nM {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 1.25rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.2s ease, color 0.2s ease;
+  gap: var(--spacing-xs);
 }
 
-.krc-closeBtn-vGJ7P:hover {
-  background: var(--accent-color-soft);
-  color: var(--accent-color);
+.krc-splitContainer-ovkIf {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 25rem;
 }
 
-.krc-body-g43Cd {
-  padding: var(--spacing-lg);
+.krc-tablePanel-gbWQx {
+  flex: 3;
   overflow-y: auto;
-  flex: 1;
-  min-height: 0;
+  border-right: var(--border-width) solid var(--border-color);
 }
 
-.krc-footer-JRwi5 {
-  padding: var(--spacing-lg);
-  border-top: var(--border-width) solid var(--border-color);
-  background: var(--surface-alt);
+.krc-chartPanel-eBJ9W {
+  flex: 2;
   display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
+  flex-direction: column;
+  min-width: 0;
 }
-.krc-root-WYIsp {
-  position: relative;
-  display: inline-block;
+
+.krc-table-40WZx {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 100%;
 }
 
-.krc-trigger-UedSS {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--surface-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
+.krc-table-40WZx thead {
+  background: var(--surface-alt);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.krc-table-40WZx th {
+  text-align: left;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  padding: 0.625rem 0.75rem;
+  white-space: nowrap;
+}
+
+.krc-table-40WZx td {
+  padding: 0.5rem 0.75rem;
+  border-top: var(--border-width) solid var(--border-color);
   color: var(--text-primary);
-  font-size: var(--font-size-sm);
+  font-size: 0.8125rem;
+}
+
+.krc-tableRow-yQlEa {
   cursor: pointer;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  transition: background-color 0.15s ease;
 }
 
-.krc-trigger-UedSS:hover {
-  border-color: var(--accent-color);
+.krc-tableRow-yQlEa:hover {
+  background: var(--surface-alt);
 }
 
-.krc-trigger-UedSS.krc-active-cH8Tl {
-  border-color: var(--accent-color);
-  background: var(--surface-secondary);
+.krc-tableRowSelected-vIEfO {
+  background: var(--accent-color-soft);
 }
 
-.krc-triggerContent-Kkhoi {
+.krc-tableRowSelected-vIEfO:hover {
+  background: var(--accent-color-soft);
+}
+
+.krc-pagination-nyCxO {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-top: var(--border-width) solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.krc-chevron-NoNsI {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-  transition: transform 0.2s ease;
+.krc-paginationButton-k-cQB {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  font-weight: 500;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--surface-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.krc-active-cH8Tl .krc-chevron-NoNsI {
-  transform: rotate(180deg);
+.krc-paginationButton-k-cQB:hover:not(:disabled) {
+  background: var(--surface-alt);
 }
 
-.krc-label-RPlXR {
+.krc-paginationButton-k-cQB:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-paginationButton-k-cQB:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-paginationInfo-ouuPw {
+  font-size: 0.8125rem;
   color: var(--text-secondary);
-  white-space: nowrap;
 }
 
-.krc-valueGroup-xfNcx {
+.krc-placeholder-YDeIw {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  justify-content: center;
+  flex: 1;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-.krc-value-aKdIW {
-  font-weight: 600;
-  color: var(--text-primary);
-  white-space: nowrap;
+.krc-loading-UoiCd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-lg);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-.krc-badge-yVq9o {
-  display: inline-flex;
+.krc-error-Subfi {
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 var(--spacing-xs);
-  background: var(--accent-color);
-  color: #fff;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-lg);
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-retryButton-k8HPu {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  font-weight: 500;
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-sm);
-  font-size: var(--font-size-xs);
-  font-weight: 600;
+  background: var(--surface-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
 
-.krc-clear-11V9Q {
+.krc-retryButton-k8HPu:hover {
+  background: var(--surface-alt);
+}
+
+.krc-retryButton-k8HPu:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-empty-OoPZo {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-2xs);
-  border-radius: var(--radius-sm);
+  padding: var(--spacing-lg);
   color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  font-size: var(--font-size-sm);
+}
+.krc-root-7cxYt {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
-.krc-clear-11V9Q:hover {
+.krc-chip-tgAQw {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
   color: var(--text-primary);
-  background: var(--surface-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: border-color 0.2s ease;
 }
 
-.krc-panel-xf2f8 {
+.krc-chip-tgAQw:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-chip-tgAQw.krc-active-hboGd {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.krc-summary-E-FXy {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.krc-popover-IJFWK {
   position: absolute;
   top: calc(100% + 0.25rem);
   left: 0;
   z-index: 10;
-  min-width: 17.5rem;
-  max-width: 22.5rem;
+  min-width: 18.75rem;
   background: var(--surface-color);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
-  overflow: hidden;
+  padding: var(--spacing-md);
 }
 
-.krc-header--VMR- {
-  padding: var(--spacing-sm);
-  border-bottom: var(--border-width) solid var(--border-color);
+.krc-popoverHeader-mdeD8 {
+  margin-bottom: var(--spacing-sm);
 }
 
-.krc-search-4gQgB {
-  width: 100%;
+.krc-popoverHeader-mdeD8 h4 {
+  margin: 0;
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+}
+
+.krc-fields-h5R5w {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.krc-field-u9yvp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.krc-field-u9yvp input {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--surface-secondary);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-sm);
   color: var(--text-primary);
   font-size: var(--font-size-sm);
-  outline: none;
-  transition: border-color 0.15s ease;
 }
 
-.krc-search-4gQgB:focus {
+.krc-field-u9yvp input:focus {
+  outline: none;
   border-color: var(--accent-color);
 }
 
-.krc-search-4gQgB::placeholder {
-  color: var(--text-secondary);
+.krc-error-jsFkv {
+  margin-top: var(--spacing-sm);
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
 }
 
-.krc-headerActions-orxXD {
+.krc-actions-prbFX {
   display: flex;
+  justify-content: flex-end;
   gap: var(--spacing-xs);
-  margin-top: var(--spacing-xs);
+  margin-top: var(--spacing-md);
 }
 
-.krc-chip--n-9m {
+.krc-btnGhost-x8cbA {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.krc-btnGhost-x8cbA:hover {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.krc-btnPrimary-T0w2q {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--accent-color);
-  color: #fff;
   border: none;
   border-radius: var(--radius-sm);
+  color: #fff;
   font-size: var(--font-size-sm);
   cursor: pointer;
-  transition: opacity 0.15s ease;
 }
 
-.krc-chip--n-9m:hover:not(:disabled) {
+.krc-btnPrimary-T0w2q:hover {
   opacity: 0.85;
 }
+.krc-root-rzEDE {
+  display: flex;
+  height: 100%;
+  background: var(--surface-color);
+}
 
-.krc-chip--n-9m:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.krc-sidebar-ediN2 {
+  flex-shrink: 0;
+  width: 16rem;
+  background: var(--surface-secondary);
+  border-right: var(--border-width) solid var(--border-color);
+  overflow-y: auto;
+  transition: width 0.2s ease;
 }
 
-.krc-chipGhost-oayjh {
-  background: transparent;
-  color: var(--text-secondary);
-  border: var(--border-width) solid var(--border-color);
+.krc-sidebarCollapsed--qs43 {
+  width: 4rem;
 }
 
-.krc-chipGhost-oayjh:hover:not(:disabled) {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-  opacity: 1;
+.krc-main-E8utR {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.krc-list-NRoxf {
+.krc-filterBar-O8ajX {
+  flex-shrink: 0;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: var(--surface-color);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-content-lY5l- {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-lg);
+}
+.krc-root-bWynN {
+  width: 100%;
+  padding: 0.65rem 0.85rem;
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.krc-root-bWynN::placeholder {
+  color: var(--text-tertiary);
+}
+
+.krc-root-bWynN:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+}
+
+.krc-root-bWynN:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.krc-root-W2sel {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.krc-tableContainer-Ed3uk {
+  overflow: auto;
+}
+
+.krc-table-7p0H- {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+}
+
+.krc-th-fNmfv {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border-bottom: var(--border-width) solid var(--border-color);
+  color: var(--text-secondary);
+  font-weight: 600;
+  text-align: left;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.krc-sortable-Ve0MQ {
+  cursor: pointer;
+}
+
+.krc-sortable-Ve0MQ:hover {
+  color: var(--text-primary);
+}
+
+.krc-thContent-BRDIL {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-sortIndicator-PtGYj {
+  font-size: 0.625rem;
+  line-height: 1;
+}
+
+.krc-resizeHandle--St-g {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 0.25rem;
+  cursor: col-resize;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.krc-resizeHandle--St-g:hover {
+  background: var(--accent-color);
+}
+
+.krc-th-fNmfv {
+  position: relative;
+}
+
+.krc-td-ZVsrU {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-bottom: var(--border-width) solid var(--border-color);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.krc-row-JivMH:hover {
+  background: var(--surface-secondary);
+}
+
+.krc-rowClickable-lTgQW {
+  cursor: pointer;
+}
+
+.krc-rowSelected-Sv0qs {
+  background: var(--surface-secondary);
+}
+
+.krc-skeletonRow-uD1y7 .krc-td-ZVsrU,
+.krc-skeletonRow-uD1y7 td {
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.krc-skeleton-eeYso {
+  height: 0.875rem;
+  width: 75%;
+  background: var(--surface-secondary);
+  border-radius: var(--radius-sm);
+  animation: krc-pulse-dQDwl 1.5s ease-in-out infinite;
+}
+
+@keyframes krc-pulse-dQDwl {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.krc-empty-xKpKS {
+  padding: var(--spacing-lg);
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-loadMore-njxDN {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.krc-loadMoreButton-C3Q-f {
+  padding: var(--spacing-xs) var(--spacing-md);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--surface-color);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.krc-loadMoreButton-C3Q-f:hover:not(:disabled) {
+  background: var(--surface-secondary);
+}
+
+.krc-loadMoreButton-C3Q-f:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-loadMoreButton-C3Q-f:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+.krc-overlay-4gFc3 {
+  position: fixed;
+  inset: 0;
+  background: rgba(17, 24, 39, 0.55);
+  backdrop-filter: blur(var(--backdrop-blur));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-lg);
+  z-index: 99999;
+}
+
+.krc-root-eKDda {
+  width: min(40rem, 100%);
+  max-height: 90vh;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  box-shadow: var(--shadow-elevated);
+  display: flex;
+  flex-direction: column;
+}
+
+.krc-header-YrzLd {
+  padding: var(--spacing-lg);
+  border-bottom: var(--border-width) solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+
+.krc-title-9rzEH {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.krc-closeBtn-vGJ7P {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.krc-closeBtn-vGJ7P:hover {
+  background: var(--accent-color-soft);
+  color: var(--accent-color);
+}
+
+.krc-body-g43Cd {
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.krc-footer-JRwi5 {
+  padding: var(--spacing-lg);
+  border-top: var(--border-width) solid var(--border-color);
+  background: var(--surface-alt);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+.krc-root-WYIsp {
+  position: relative;
+  display: inline-block;
+}
+
+.krc-trigger-UedSS {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.krc-trigger-UedSS:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-trigger-UedSS.krc-active-cH8Tl {
+  border-color: var(--accent-color);
+  background: var(--surface-secondary);
+}
+
+.krc-triggerContent-Kkhoi {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-chevron-NoNsI {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.krc-active-cH8Tl .krc-chevron-NoNsI {
+  transform: rotate(180deg);
+}
+
+.krc-label-RPlXR {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.krc-valueGroup-xfNcx {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-value-aKdIW {
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.krc-badge-yVq9o {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 var(--spacing-xs);
+  background: var(--accent-color);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.krc-clear-11V9Q {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.krc-clear-11V9Q:hover {
+  color: var(--text-primary);
+  background: var(--surface-secondary);
+}
+
+.krc-panel-xf2f8 {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 10;
+  min-width: 17.5rem;
+  max-width: 22.5rem;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.krc-header--VMR- {
+  padding: var(--spacing-sm);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-search-4gQgB {
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.krc-search-4gQgB:focus {
+  border-color: var(--accent-color);
+}
+
+.krc-search-4gQgB::placeholder {
+  color: var(--text-secondary);
+}
+
+.krc-headerActions-orxXD {
+  display: flex;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+}
+
+.krc-chip--n-9m {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--accent-color);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.krc-chip--n-9m:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.krc-chip--n-9m:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-chipGhost-oayjh {
+  background: transparent;
+  color: var(--text-secondary);
+  border: var(--border-width) solid var(--border-color);
+}
+
+.krc-chipGhost-oayjh:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+  opacity: 1;
+}
+
+.krc-list-NRoxf {
   max-height: 15rem;
   overflow-y: auto;
   padding: var(--spacing-xs) 0;
 }
 
-.krc-status-j7xbM {
-  padding: var(--spacing-sm);
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  text-align: center;
+.krc-status-j7xbM {
+  padding: var(--spacing-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.krc-statusError-u6rfB {
+  color: var(--danger-color);
+}
+
+.krc-option-ZAXum {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.krc-option-ZAXum:hover {
+  background: var(--surface-secondary);
+}
+
+.krc-optionLabel-MdDyI {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}
+
+.krc-optionCount-JSQl9 {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.krc-create-hO8Cq {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: none;
+  border: none;
+  color: var(--accent-color);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.krc-create-hO8Cq:hover {
+  background: var(--surface-secondary);
+}
+
+.krc-footer-2yk6S {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm);
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.krc-selection-aYDH- {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.krc-selectionDelta-S1dV7 {
+  margin-left: var(--spacing-xs);
+  color: var(--accent-color);
+}
+
+.krc-footerActions-77iCX {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+.krc-root-cQSdQ {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.krc-root-cQSdQ:hover:not(.krc-disabled-mXUpZ) {
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+.krc-root-cQSdQ:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-active-c6Qv6 {
+  background: var(--surface-secondary);
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.krc-collapsed-zZjr3 {
+  justify-content: center;
+  padding: var(--spacing-xs);
+}
+
+.krc-disabled-mXUpZ {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-icon-dmCQi {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-md);
+  height: var(--icon-md);
 }
 
-.krc-statusError-u6rfB {
-  color: var(--danger-color);
+.krc-label-ohVFC {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
 }
 
-.krc-option-ZAXum {
+.krc-badge-D8UnW {
+  flex-shrink: 0;
+  padding: 0.0625rem var(--spacing-xs);
+  border-radius: var(--radius-pill);
+  background: var(--accent-color);
+  color: var(--accent-color-contrast);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  line-height: 1.4;
+}
+.krc-root-WL0sD {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.krc-left-9KFDB,
+.krc-right-YmUbX {
+  overflow: auto;
+}
+
+.krc-divider-jNOSU {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  cursor: pointer;
-  transition: background-color 0.1s ease;
+  justify-content: center;
+  width: 0.5rem;
+  cursor: col-resize;
+  background: var(--surface-color);
+  border-left: var(--border-width) solid var(--border-color);
+  border-right: var(--border-width) solid var(--border-color);
+  transition: background-color 0.15s ease;
 }
 
-.krc-option-ZAXum:hover {
+.krc-divider-jNOSU:hover,
+.krc-divider-jNOSU:focus-visible {
   background: var(--surface-secondary);
 }
 
-.krc-optionLabel-MdDyI {
+.krc-divider-jNOSU:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-dividerHandle-SoNqx {
+  color: var(--text-secondary);
+}
+.krc-root-0iK-T {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-subtle);
+  overflow: hidden;
+}
+
+.krc-header-vLmNI {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  font-size: var(--font-size-sm);
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-title-J9FSG {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: 600;
   color: var(--text-primary);
 }
 
-.krc-optionCount-JSQl9 {
-  color: var(--text-secondary);
+.krc-headerActions-8Sd6i {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-toolbar-65kLR {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-toolbarLabel-kmRLQ {
   font-size: var(--font-size-xs);
+  color: var(--text-secondary);
 }
 
-.krc-create-hO8Cq {
-  display: block;
-  width: 100%;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: none;
-  border: none;
-  color: var(--accent-color);
-  font-size: var(--font-size-sm);
-  text-align: left;
+.krc-toolbarSelect-t7OKN {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  color: var(--text-primary);
+  background: var(--surface-alt);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 
-.krc-create-hO8Cq:hover {
-  background: var(--surface-secondary);
+.krc-chartContainer-1-iIe {
+  min-height: 25rem;
+  padding: var(--spacing-sm);
 }
 
-.krc-footer-2yk6S {
+.krc-loading-MRlom {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-sm);
-  border-top: var(--border-width) solid var(--border-color);
+  justify-content: center;
+  min-height: 25rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-.krc-selection-aYDH- {
+.krc-error-esslq {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  min-height: 25rem;
+  color: var(--danger-color);
   font-size: var(--font-size-sm);
-  color: var(--text-secondary);
 }
 
-.krc-selectionDelta-S1dV7 {
-  margin-left: var(--spacing-xs);
-  color: var(--accent-color);
+.krc-retryButton-js385 {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--accent-color-contrast);
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
 
-.krc-footerActions-77iCX {
+.krc-retryButton-js385:hover {
+  background: var(--accent-color-strong);
+}
+
+.krc-retryButton-js385:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-empty-qYFPa {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 25rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-warning-ll4Hc {
   display: flex;
+  align-items: center;
   gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-xs);
+  color: var(--warning-color);
+  background: var(--warning-color-soft);
+  border-bottom: var(--border-width) solid var(--border-color);
 }
-.krc-root-WL0sD {
+.krc-root-jba0x {
+  width: 100%;
+  padding: 0.65rem 0.85rem;
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.krc-root-jba0x:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+}
+
+.krc-root-jba0x:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.krc-root-jkFwM {
   display: flex;
+  height: 100%;
+  background: var(--surface-color);
+}
+
+.krc-sidebar-g7vxQ {
+  flex-shrink: 0;
+  background: var(--surface-secondary);
+  border-right: var(--border-width) solid var(--border-color);
+  overflow-y: auto;
+}
+
+.krc-sidebarCollapsed-Xiswa {
+  width: 0;
+  overflow: hidden;
+}
+
+.krc-main-B4HyG {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-lg);
+}
+
+.krc-content-72sFf {
   width: 100%;
+}
+
+.krc-title-pe-1P {
+  margin: 0 0 var(--spacing-md);
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.krc-root-uKAJr {
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  background: var(--surface-color);
+  border-right: var(--border-width) solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  transition: width 0.2s ease;
   overflow: hidden;
 }
 
-.krc-left-9KFDB,
-.krc-right-YmUbX {
-  overflow: auto;
+.krc-header-BWJPo {
+  flex-shrink: 0;
+  padding: var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
 }
 
-.krc-divider-jNOSU {
+.krc-body-LCUxY {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-sm);
+}
+
+.krc-footer-z4n8R {
   flex-shrink: 0;
+  padding: var(--spacing-md);
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.krc-toggle-9T9IZ {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.5rem;
-  cursor: col-resize;
-  background: var(--surface-color);
-  border-left: var(--border-width) solid var(--border-color);
-  border-right: var(--border-width) solid var(--border-color);
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: none;
+  border-top: var(--border-width) solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.krc-toggle-9T9IZ:hover {
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+.krc-toggle-9T9IZ:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+/* Sections */
+.krc-section-us0Me {
+  margin-bottom: var(--spacing-xs);
+}
+
+.krc-sectionTitle-On1X- {
+  display: block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.krc-sectionToggle-eriVJ {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
   transition: background-color 0.15s ease;
 }
 
-.krc-divider-jNOSU:hover,
-.krc-divider-jNOSU:focus-visible {
+.krc-sectionToggle-eriVJ:hover {
   background: var(--surface-secondary);
 }
 
-.krc-divider-jNOSU:focus-visible {
-  outline: var(--border-width-md) solid var(--accent-color);
-  outline-offset: -0.125rem;
+.krc-sectionToggle-eriVJ:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
 }
 
-.krc-dividerHandle-SoNqx {
-  color: var(--text-secondary);
+.krc-sectionChevron-cgn7M {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
 }
-.krc-root-jba0x {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  border-radius: var(--radius-md);
-  border: var(--border-width) solid var(--border-color);
-  background: var(--surface-color);
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+
+.krc-sectionChevronOpen-Ja5Y3 {
+  transform: rotate(0deg);
 }
 
-.krc-root-jba0x:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+.krc-sectionItems-iwvxo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--border-width);
+  padding-top: var(--spacing-xs);
 }
 
-.krc-root-jba0x:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+/* Collapsed state */
+.krc-collapsed-JRXBy .krc-body-LCUxY {
+  align-items: center;
+}
+
+.krc-collapsed-JRXBy .krc-sectionItems-iwvxo {
+  align-items: center;
 }
 .krc-root--s1oD {
   position: relative;
@@ -1009,6 +1898,154 @@
   color: var(--text-secondary);
   font-size: var(--font-size-xs);
 }
+.krc-root-U8B4Y {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-subtle);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.krc-header-dy6xQ {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+
+.krc-headerLeft-80jJu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+}
+
+.krc-title--e-Ci {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.krc-subtitle-63ixC {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.krc-headerRight-3Vuls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.krc-toolbar-h6ALf {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-chartTypeToggle-6DRWb {
+  display: inline-flex;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.krc-chartTypeToggle-6DRWb button {
+  appearance: none;
+  background: var(--surface-color);
+  border: none;
+  border-right: var(--border-width) solid var(--border-color);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.krc-chartTypeToggle-6DRWb button:last-child {
+  border-right: none;
+}
+
+.krc-chartTypeToggle-6DRWb button:hover {
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+.krc-chartTypeToggle-6DRWb button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-chartTypeToggle-6DRWb button.krc-active-Un9q0 {
+  background: var(--accent-color-soft);
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.krc-chartContainer-2Oz2N {
+  flex: 1;
+  min-height: 18.75rem;
+  padding: 0 var(--spacing-sm) var(--spacing-sm);
+}
+
+.krc-loading-hTkxl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 18.75rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-error--F7yO {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  min-height: 18.75rem;
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-retryButton-w0SS7 {
+  appearance: none;
+  background: var(--danger-color-soft);
+  border: var(--border-width) solid var(--danger-color);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  color: var(--danger-color);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.krc-retryButton-w0SS7:hover {
+  background: var(--danger-color);
+  color: var(--accent-color-contrast);
+}
+
+.krc-retryButton-w0SS7:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-empty-HWTS- {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 18.75rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
 .krc-container-cpDoQ {
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-lg);
@@ -1047,6 +2084,144 @@
 .krc-root-20TMP tbody tr:hover {
   background: var(--surface-alt);
 }
+.krc-root-xM3Jn {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  overflow: hidden;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.krc-header-Pg9ER {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-title-MRZQn {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.krc-headerRight-b0xzW {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.krc-toolbar--rsIi {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-select-79sIN {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.krc-select-79sIN:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-legendToggle--ofSS {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.krc-legendToggle--ofSS:hover {
+  border-color: var(--accent-color);
+  color: var(--text-primary);
+}
+
+.krc-legendToggleActive-14gdq {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.krc-chartContainer-tDTrg {
+  padding: var(--spacing-sm);
+  min-height: 18.75rem;
+}
+
+.krc-loading-WkgGt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 18.75rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-error-yzAKV {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  min-height: 18.75rem;
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-retryButton-wTkWq {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.krc-retryButton-wTkWq:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-retryButton-wTkWq:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-legendToggle--ofSS:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.krc-empty-1EZzg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 18.75rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
 .krc-root-FVKOX {
   width: 100%;
   padding: 0.65rem 0.85rem;