@openviking/react 0.1.1 → 0.1.3

package/dist/components/tui/style.css

@@ -1,16 +1,1554 @@
+.ov-agent-connect, .ov-divider, .ov-file-browser, .ov-file-browser-entries, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-agent-connect, .dark .ov-divider, .dark .ov-file-browser, .dark .ov-file-browser-entries, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
 .ov-tui {
+  --ov-ui-tui-gap: 16px;
+  --ov-ui-tui-text: var(--ov-ui-color-text-1, var(--ov-ui-text, var(--ov-ui-text-1-default)));
+  --ov-ui-tui-muted: var(--ov-ui-color-text-3, var(--ov-ui-text-muted, var(--ov-ui-text-3-default)));
+  --ov-ui-tui-surface: var(--ov-ui-color-bg-1, var(--ov-ui-surface, var(--ov-ui-bg-1-default)));
+  --ov-ui-tui-hover: var(--ov-ui-color-fill-hover, var(--ov-ui-hover, var(--ov-ui-fill-hover-default)));
+  --ov-ui-tui-focus: var(--ov-ui-color-focus, var(--ov-ui-focus-ring, var(--ov-ui-focus-default)));
+  --ov-ui-tui-bubble-bg: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  --ov-ui-tui-card-bg: var(--ov-ui-color-bg-4, var(--ov-ui-bg-4-default));
+  --ov-ui-tui-result-bg: var(--ov-ui-tui-surface);
+  --ov-ui-tui-card-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default));
+  --ov-ui-tui-skeleton: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  --ov-ui-tui-skeleton-bright: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  --ov-ui-tui-link: var(--ov-ui-color-primary, var(--ov-ui-primary, var(--ov-ui-primary-default)));
+  --ov-ui-tui-success: var(--ov-ui-color-status-success, var(--ov-ui-success, var(--ov-ui-status-success-default)));
+  --ov-ui-tui-error: var(--ov-ui-color-status-error, var(--ov-ui-status-error, var(--ov-ui-status-error-default)));
+  --ov-ui-tui-warning: var(--ov-ui-color-warning, var(--ov-ui-warning-default));
+  --ov-ui-tui-shadow: var(--ov-ui-color-shadow, var(--ov-ui-shadow-default));
   box-sizing: border-box;
-  border-radius: var(--ov-ui-radius, 6px);
-  background: var(--ov-ui-placeholder, #f3f4f7);
-  width: 360px;
-  height: 560px;
-  color: var(--ov-ui-text-muted, #8f959e);
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  color: var(--ov-ui-tui-text);
+  font-family: var(--ov-ui-font-family, "PingFang SC",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif);
+  flex-direction: column;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  container-type: inline-size;
+}
+
+.ov-tui *, .ov-tui :before, .ov-tui :after {
+  box-sizing: border-box;
+}
+
+.ov-tui__body {
+  flex-direction: column;
+  flex: auto;
+  gap: 20px;
+  min-height: 0;
+  padding: 16px 0;
+  display: flex;
+  position: relative;
+  overflow-y: auto;
+}
+
+.ov-tui__empty {
+  min-height: 120px;
+  color: var(--ov-ui-tui-muted);
+  text-align: center;
+  flex: auto;
   justify-content: center;
   align-items: center;
+  padding: 24px 12px;
+  display: flex;
+}
+
+.ov-tui__muted {
+  color: var(--ov-ui-tui-muted);
+}
+
+.ov-tui__record {
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__bubble {
+  background: var(--ov-ui-tui-bubble-bg);
+  border-radius: 12px;
+  flex-direction: column;
+  align-self: flex-end;
+  align-items: stretch;
+  gap: 4px;
+  min-width: 0;
+  max-width: 90%;
+  padding: 10px 12px;
+  display: inline-flex;
+}
+
+.ov-tui__bubble-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  color: inherit;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  flex: none;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__bubble-time {
+  color: var(--ov-ui-tui-muted);
+  flex: none;
+  align-self: flex-end;
+  font-size: 12px;
+}
+
+.ov-tui__result {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-result-bg);
+  border-radius: 14px;
+  flex-direction: column;
+  gap: 12px;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 12px;
+  display: flex;
+}
+
+.ov-tui__record[data-status="error"] .ov-tui__result {
+  border-color: color-mix(in srgb,
+    var(--ov-ui-tui-error) 32%,
+    var(--ov-ui-tui-result-bg));
+  background: color-mix(in srgb,
+    var(--ov-ui-tui-error) 2%,
+    var(--ov-ui-tui-result-bg));
+}
+
+.ov-tui__result-head {
+  align-items: center;
+  gap: 10px;
+  display: flex;
+}
+
+.ov-tui__result-command, .ov-tui__card-title {
+  overflow-wrap: anywhere;
+  min-inline-size: 0;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.ov-tui__result-body {
+  overflow-wrap: anywhere;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.ov-tui__result-state {
+  block-size: 14px;
+  inline-size: 14px;
+  color: var(--ov-ui-tui-muted);
+  flex: none;
+  display: inline-block;
+  position: relative;
+}
+
+.ov-tui__result-state[data-status="success"] {
+  background: var(--ov-ui-tui-success);
+  border-radius: 50%;
+}
+
+.ov-tui__result-state[data-status="success"]:before {
+  content: "";
+  border: 1.8px solid #fff;
+  border-width: 0 1.8px 1.8px 0;
+  block-size: 7px;
+  inline-size: 4px;
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-start: 5px;
+  transform: rotate(45deg);
+}
+
+.ov-tui__result-state[data-status="error"] {
+  color: var(--ov-ui-tui-error);
+}
+
+.ov-tui__result-state[data-status="error"]:before, .ov-tui__result-state[data-status="error"]:after {
+  content: "";
+  background: currentColor;
+  border-radius: 1px;
+  block-size: 2px;
+  inline-size: 12px;
+  position: absolute;
+  inset-block-start: 6px;
+  inset-inline-start: 1px;
+  transform: rotate(45deg);
+}
+
+.ov-tui__result-state[data-status="error"]:after {
+  transform: rotate(-45deg);
+}
+
+.ov-tui__result-state[data-status="pending"] {
+  border: 1.8px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-block-start-color: currentColor;
+  border-radius: 50%;
+  animation: .9s linear infinite ov-tui-spin;
+}
+
+@keyframes ov-tui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ov-tui__copy {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  color: var(--ov-ui-tui-muted);
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border-radius: 6px;
+  flex: none;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.ov-tui__copy:hover {
+  color: inherit;
+  background: var(--ov-ui-tui-hover);
+}
+
+.ov-tui__copy:focus-visible, .ov-tui__link:focus-visible {
+  outline: 2px solid var(--ov-ui-tui-focus);
+  outline-offset: 1px;
+}
+
+.ov-tui__link {
+  color: var(--ov-ui-tui-link);
+  font: inherit;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  text-align: left;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-decoration: none;
+  display: inline;
+}
+
+.ov-tui__link:hover {
+  text-underline-offset: 3px;
+  text-decoration: underline;
+}
+
+.ov-tui__text {
+  min-width: 0;
+  position: relative;
+}
+
+.ov-tui__plain {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  margin: 0;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__copy--inline {
+  opacity: 0;
+  transition: opacity .12s;
+  position: absolute;
+  top: -2px;
+  right: 0;
+}
+
+.ov-tui__code-block:hover .ov-tui__copy--inline, .ov-tui__copy--inline:focus-visible {
+  opacity: 1;
+}
+
+.ov-tui__markdown {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.ov-tui__markdown > :first-child {
+  margin-top: 0;
+}
+
+.ov-tui__markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.ov-tui__markdown p, .ov-tui__markdown ul, .ov-tui__markdown ol {
+  margin: 0 0 8px;
+}
+
+.ov-tui__markdown ul {
+  flex-direction: column;
+  gap: 8px;
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.ov-tui__markdown ol {
+  margin: 8px 0;
+  padding-inline-start: 2em;
+  list-style: decimal;
+  display: block;
+}
+
+.ov-tui__markdown ol > li {
+  display: list-item;
+}
+
+.ov-tui__markdown ol > li + li {
+  margin-block-start: 8px;
+}
+
+.ov-tui__markdown li {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 8px;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.ov-tui__markdown li > p {
+  margin: 4px 0 0;
+}
+
+.ov-tui__markdown li > p:first-child {
+  margin-block-start: 0;
+}
+
+.ov-tui__markdown code {
+  background: var(--ov-ui-tui-card-bg);
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  border-radius: 4px;
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.ov-tui__code-block {
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 8px;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin-block: 6px;
+  padding: 12px;
+  position: relative;
+}
+
+.ov-tui__code-block > .ov-tui__copy--inline {
+  inset-block-start: 6px;
+  inset-inline-end: 6px;
+}
+
+.ov-tui__code-content {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-inline-size: 100%;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  overflow: auto;
+}
+
+.ov-tui__markdown a {
+  color: var(--ov-ui-tui-link);
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  text-decoration: none;
+}
+
+.ov-tui__markdown a:hover {
+  text-underline-offset: 3px;
+  text-decoration: underline;
+}
+
+.ov-tui__table-frame {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.ov-tui__markdown table, .ov-tui__table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+}
+
+.ov-tui__markdown th, .ov-tui__markdown td, .ov-tui__table th, .ov-tui__table td {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  overflow-wrap: anywhere;
+  text-align: left;
+  vertical-align: top;
+  padding: 6px 8px;
+}
+
+.ov-tui__markdown th, .ov-tui__table th {
+  color: var(--ov-ui-tui-muted);
+  font-weight: 600;
+}
+
+.ov-tui__search {
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__search-summary {
+  background: var(--ov-ui-tui-card-bg);
+  color: var(--ov-ui-tui-muted);
+  white-space: pre-line;
+  border-radius: 12px;
+  padding: 14px 16px;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.ov-tui__search-items, .ov-tui__tree-items {
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__search-item {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-result-bg);
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  border-radius: 14px;
+  align-items: stretch;
+  gap: 10px;
+  padding: 12px 14px;
+  display: flex;
+}
+
+.ov-tui__search-items {
+  gap: 10px;
+}
+
+.ov-tui__search-item {
+  position: relative;
+}
+
+.ov-tui__search-open {
+  inline-size: 100%;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+}
+
+.ov-tui__search-open:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.ov-tui__search-item :is(button, a:not(.ov-tui__search-open)) {
+  z-index: 1;
+  position: relative;
+}
+
+.ov-tui__search-item:has(.ov-tui__search-open:hover) {
+  border-color: var(--ov-ui-tui-link);
+  background: var(--ov-ui-tui-card-bg);
+}
+
+.ov-tui__search-item:has(.ov-tui__search-open:focus-visible) {
+  outline: 2px solid var(--ov-ui-tui-focus);
+  outline-offset: 1px;
+}
+
+.ov-tui__search-uri {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  display: flex;
+}
+
+.ov-tui__search-uri-prefix {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.ov-tui__search-uri-suffix {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: none;
+  max-inline-size: 70%;
+  overflow: hidden;
+}
+
+.ov-tui__search-uri-full {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ov-tui__search-metrics {
+  width: 58px;
+  flex-direction: column;
+  flex: none;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 6px;
+  min-block-size: 44px;
+  display: flex;
+}
+
+.ov-tui__search-score-wrap {
+  display: inline-flex;
+  position: relative;
+}
+
+.ov-tui__search-score {
+  color: inherit;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  cursor: help;
+  background: none;
+  border: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.ov-tui__score-details {
+  z-index: 1;
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-surface);
+  width: max-content;
+  max-width: 260px;
+  box-shadow: 0 6px 16px
+    color-mix(in srgb, var(--ov-ui-tui-shadow) 12%, transparent);
+  color: inherit;
+  border-radius: 8px;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 4px;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 400;
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.ov-tui__search-type {
+  background: var(--ov-ui-tui-bubble-bg);
+  max-width: 58px;
+  color: var(--ov-ui-tui-muted);
+  white-space: nowrap;
+  border-radius: 999px;
+  padding: 0 7px;
+  font-size: 11px;
+  line-height: 18px;
+  display: inline-flex;
+}
+
+.ov-tui__search-body {
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__search-main {
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__search-title {
+  min-width: 0;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  white-space: nowrap;
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.ov-tui__search-level {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  color: var(--ov-ui-tui-muted);
+  border-radius: 6px;
+  flex: none;
+  align-items: center;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 18px;
+  display: inline-flex;
+}
+
+.ov-tui__search-preview, .ov-tui__search-meta {
+  color: var(--ov-ui-tui-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.ov-tui__tree, .ov-tui__write, .ov-tui__status, .ov-tui__preview {
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-tui__tree-title {
+  overflow-wrap: anywhere;
+  min-width: 0;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  flex: 1;
+  font-size: 12px;
+}
+
+.ov-tui__tree-meta {
+  color: var(--ov-ui-tui-muted);
+  flex: none;
+  font-size: 12px;
+}
+
+.ov-tui__load-more {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-result-bg);
+  inline-size: 100%;
+  color: var(--ov-ui-tui-link);
+  font: inherit;
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__load-more:hover {
+  background: var(--ov-ui-tui-hover);
+}
+
+.ov-tui__write-lines {
+  flex-direction: column;
+  gap: 8px;
+  display: flex;
+}
+
+.ov-tui__write-line, .ov-tui__tree-item {
+  background: var(--ov-ui-tui-card-bg);
+  inline-size: 100%;
+  min-inline-size: 0;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__tree-item {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.ov-tui__status-rows {
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  display: flex;
+}
+
+.ov-tui__status-row {
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 10px;
+  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
+  align-items: start;
+  column-gap: 12px;
+  min-inline-size: 0;
+  padding: 8px 10px;
+  display: grid;
+}
+
+.ov-tui__status-row[data-variant="long-text"] {
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: 6px;
+}
+
+.ov-tui__status-label {
+  color: var(--ov-ui-tui-muted);
+  white-space: nowrap;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.ov-tui__status-value {
+  overflow-wrap: anywhere;
+  min-width: 0;
+  margin: 0;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__status-row[data-variant="long-text"] .ov-tui__status-value {
+  white-space: pre-wrap;
+  max-block-size: 168px;
+  padding-inline-end: 4px;
+  overflow: auto;
+}
+
+.ov-tui__status-row[data-variant="pre"] .ov-tui__status-value {
+  white-space: pre;
+  max-block-size: 168px;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  font-size: 12px;
+  line-height: 20px;
+  overflow: auto;
+}
+
+.ov-tui__result-meta {
+  color: var(--ov-ui-tui-muted);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__preview-uri {
+  max-inline-size: 100%;
+  margin-block-end: 10px;
+  font-size: 12px;
+  display: inline-block;
+}
+
+.ov-tui__preview-body {
+  background: var(--ov-ui-tui-card-bg);
+  overflow-wrap: anywhere;
+  border-radius: 12px;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 14px 16px;
+}
+
+.ov-tui__preview-content {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__no-result {
+  background: var(--ov-ui-tui-card-bg);
+  color: var(--ov-ui-tui-muted);
+  border-radius: 12px;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__tree .ov-tui__table-frame {
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 10px;
+}
+
+.ov-tui__table {
+  min-inline-size: 520px;
+  margin: 0;
+}
+
+.ov-tui__table :is(th, td) {
+  border: 0;
+  border-block-end: 1px solid var(--ov-ui-tui-card-border);
+  min-inline-size: 96px;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  padding: 8px 10px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-tui__table th {
+  white-space: nowrap;
   font-family: inherit;
   font-size: 12px;
+  font-weight: 500;
+}
+
+.ov-tui__table tbody tr:last-child td {
+  border-block-end: 0;
+}
+
+.ov-tui__help {
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+}
+
+.ov-tui__help-lead {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.ov-tui__help-footer {
+  color: var(--ov-ui-tui-muted);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__help-section {
+  flex-direction: column;
+  gap: 6px;
+  display: flex;
+}
+
+.ov-tui__help-section-label {
+  color: var(--ov-ui-tui-muted);
+  padding: 0 4px;
+  font-size: 12px;
+}
+
+.ov-tui__help-items {
+  flex-direction: column;
+  gap: 2px;
+  display: flex;
+}
+
+.ov-tui__help-item {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-card-bg);
+  min-block-size: 36px;
+  inline-size: 100%;
+  min-inline-size: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  border-radius: 8px;
+  grid-template-columns: minmax(13ch, 23ch) minmax(0, 1fr);
+  align-items: start;
+  gap: 20px;
+  padding: 8px;
+  display: grid;
+}
+
+.ov-tui__help-item:not(:disabled):hover {
+  background: var(--ov-ui-tui-hover);
+}
+
+.ov-tui__help-item:disabled {
+  opacity: .5;
+  cursor: default;
+}
+
+.ov-tui__help-name {
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  font-size: 12px;
+}
+
+.ov-tui__help-desc {
+  color: var(--ov-ui-tui-muted);
+  overflow-wrap: anywhere;
+  font-size: 12px;
+}
+
+.ov-tui__assist {
+  z-index: 1000;
+  min-width: 0;
+  max-width: calc(100vw - 24px);
+  max-height: var(--ov-ui-tui-assist-height, 420px);
+  color: inherit;
+  font: inherit;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: fixed;
+  inset: auto;
+  overflow: visible;
+}
+
+.ov-tui__assist[data-floating]:not(:popover-open) {
+  display: none;
+}
+
+.ov-tui__assist[data-inline] {
+  flex-direction: column;
+  flex: none;
+  max-width: 100%;
+  margin-bottom: 8px;
+  position: static;
+}
+
+@supports (position-area: block-start span-inline-end) {
+  .ov-tui__assist[data-placement="above"] {
+    margin-block-end: 8px;
+  }
+
+  .ov-tui__assist[data-placement="below"] {
+    margin-block-start: 8px;
+  }
+
+  .ov-tui__assist[data-floating] {
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}
+
+.ov-tui__assist-detail {
+  inset-inline-end: calc(100% + 2px);
+  width: var(--ov-ui-tui-assist-detail-width, 400px);
+  min-height: 0;
+  max-height: var(--ov-ui-tui-assist-height, 420px);
+  display: flex;
+  position: absolute;
+  bottom: 0;
+}
+
+.ov-tui__assist[data-placement="below"] .ov-tui__assist-detail {
+  top: 0;
+  bottom: auto;
+}
+
+.ov-tui__assist[data-side="right"] .ov-tui__assist-detail {
+  inset-inline: calc(100% + 2px) auto;
+}
+
+.ov-tui__assist[data-side="stack"], .ov-tui__assist[data-inline] {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ov-tui__assist[data-side="stack"] .ov-tui__assist-detail, .ov-tui__assist[data-details-only] .ov-tui__assist-detail, .ov-tui__assist[data-inline] .ov-tui__assist-detail {
+  width: 100%;
+  position: static;
+}
+
+.ov-tui__assist[data-side="stack"]:not([data-details-only]) .ov-tui__hint {
+  max-height: calc(var(--ov-ui-tui-assist-height, 420px) * .55);
+}
+
+.ov-tui__assist[data-side="stack"]:not([data-details-only]) .ov-tui__suggestions {
+  max-height: calc(var(--ov-ui-tui-assist-height, 420px) * .45);
+}
+
+.ov-tui__composer {
+  border: 0;
+  border-top: 1px solid var(--ov-ui-border, var(--ov-ui-tui-card-border));
+  flex-direction: column;
+  flex: none;
+  min-height: 120px;
+  margin: 0;
+  padding: 12px 16px 6px;
+  display: flex;
+  position: relative;
+}
+
+.ov-tui__composer[data-disabled] {
+  cursor: not-allowed;
+  opacity: .72;
+}
+
+.ov-tui__input-row {
+  cursor: text;
+  flex: 1;
+  min-width: 0;
+  min-height: 61px;
+  max-height: 78px;
+  display: grid;
+  position: relative;
+  overflow: hidden;
+}
+
+.ov-tui__input-row:after {
+  content: attr(data-value);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ov-tui__input-row:after, .ov-tui__input-mirror, .ov-tui__input {
+  resize: none;
+  width: 100%;
+  min-width: 0;
+  min-height: 26px;
+  max-height: 78px;
+  color: var(--ov-ui-text-secondary, inherit);
+  font: inherit;
+  letter-spacing: .048px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  grid-area: 1 / 1;
+  padding: 0;
+  font-size: 16px;
+  line-height: 26px;
+}
+
+.ov-tui__input-label, .ov-tui__input-hint-description {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.ov-tui__input::placeholder {
+  -webkit-text-fill-color: currentColor;
+  color: var(--ov-ui-tui-muted);
+}
+
+.ov-tui__input-mirror {
+  z-index: 1;
+  scrollbar-width: none;
+  pointer-events: none;
+  display: block;
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
+.ov-tui__input-mirror .ov-tui__link {
+  pointer-events: auto;
+  font: inherit;
+}
+
+.ov-tui__bubble-command, .ov-tui__input-command {
+  color: var(--ov-ui-tui-text);
+}
+
+.ov-tui__command-prefix {
+  color: var(--ov-ui-tui-muted);
+}
+
+.ov-tui__command-name {
+  text-shadow: .025em 0, -.025em 0;
+}
+
+.ov-tui__input-completion, .ov-tui__input-arguments {
+  color: var(--ov-ui-tui-muted);
+}
+
+.ov-tui__input {
+  color: #0000;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--ov-ui-tui-text);
+  scrollbar-width: none;
+  position: relative;
+}
+
+.ov-tui__input::-webkit-scrollbar {
+  display: none;
+}
+
+.ov-tui__input-mirror::-webkit-scrollbar {
+  display: none;
+}
+
+.ov-tui__input::selection {
+  background: color-mix(in srgb, var(--ov-ui-tui-link) 22%, transparent);
+}
+
+@media (forced-colors: active) {
+  .ov-tui__input {
+    color: canvastext;
+    -webkit-text-fill-color: CanvasText;
+    caret-color: canvastext;
+  }
+}
+
+.ov-tui__input:focus {
+  outline: none;
+}
+
+.ov-tui__input:read-only, .ov-tui__input:disabled {
+  cursor: default;
+}
+
+.ov-tui__shortcuts {
+  min-height: 40px;
+  color: var(--ov-ui-tui-muted);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-inline: 4px;
+  font-size: 12px;
   display: flex;
 }
 
+.ov-tui__shortcut {
+  white-space: nowrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  display: inline-flex;
+}
+
+.ov-tui__shortcut kbd {
+  background: var(--ov-ui-tui-hover);
+  width: 24px;
+  height: 24px;
+  color: inherit;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  border: 0;
+  border-radius: 7px;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+}
+
+@container (width <= 400px) {
+  .ov-tui__shortcuts {
+    gap: 8px;
+    margin-inline: 0;
+    font-size: 11px;
+  }
+
+  .ov-tui__shortcut {
+    gap: 2px;
+  }
+}
+
+.ov-tui__unavailable {
+  color: var(--ov-ui-tui-warning);
+  font-size: 12px;
+}
+
+.ov-tui__no-suggestions {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  background: var(--ov-ui-tui-surface);
+  color: var(--ov-ui-tui-muted);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.ov-tui__hint-empty {
+  color: var(--ov-ui-tui-muted);
+  font-size: 12px;
+}
+
+.ov-tui__suggestions, .ov-tui__hint, .ov-tui__no-suggestions {
+  border: 1px solid var(--ov-ui-border, var(--ov-ui-tui-card-border));
+  background: var(--ov-ui-tui-surface);
+  box-shadow: 0 16px 36px color-mix(in srgb, var(--ov-ui-tui-shadow) 10%, transparent),
+    0 6px 18px color-mix(in srgb, var(--ov-ui-tui-shadow) 6%, transparent);
+  border-radius: 12px;
+}
+
+.ov-tui__suggestions {
+  width: 100%;
+  min-height: 0;
+  max-height: min(360px, var(--ov-ui-tui-assist-height, 420px));
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 8px;
+  display: flex;
+  overflow-y: auto;
+}
+
+.ov-tui__suggestion-group {
+  flex-direction: column;
+  gap: 2px;
+  display: flex;
+}
+
+.ov-tui__suggestion-label {
+  color: var(--ov-ui-tui-muted);
+  padding: 0 8px 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.ov-tui__suggestion {
+  width: 100%;
+  min-width: 0;
+  min-height: 36px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 20px;
+  padding: 6px 8px;
+  display: flex;
+}
+
+.ov-tui__suggestion[aria-selected="true"], .ov-tui__suggestion:hover {
+  background: var(--ov-ui-tui-hover);
+}
+
+.ov-tui__suggestion[aria-selected="true"] .ov-tui__suggestion-name {
+  color: var(--ov-ui-tui-link);
+}
+
+.ov-tui__suggestion:focus-visible, .ov-tui__hint-example:focus-visible {
+  outline: 2px solid var(--ov-ui-tui-focus);
+  outline-offset: -2px;
+}
+
+.ov-tui__suggestion-name {
+  min-width: 0;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.ov-tui__suggestion-desc {
+  min-width: 0;
+  color: var(--ov-ui-tui-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 160px;
+  font-size: 12px;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.ov-tui__mark {
+  color: var(--ov-ui-tui-link);
+  background: none;
+  font-weight: 500;
+}
+
+.ov-tui__hint {
+  width: 100%;
+  min-height: 0;
+  max-height: var(--ov-ui-tui-assist-height, 420px);
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  display: flex;
+  overflow-y: auto;
+}
+
+.ov-tui__hint-head {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.ov-tui__hint-name {
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.ov-tui__hint-desc, .ov-tui__hint-label {
+  color: var(--ov-ui-tui-muted);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__hint-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.ov-tui__hint-usage {
+  border: 1px solid var(--ov-ui-border, var(--ov-ui-tui-card-border));
+  background: var(--ov-ui-tui-hover);
+  overflow-wrap: anywhere;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__hint-group {
+  flex-direction: column;
+  gap: 6px;
+  display: flex;
+}
+
+.ov-tui__hint-example {
+  background: var(--ov-ui-tui-hover);
+  color: inherit;
+  font-family: var(--ov-ui-font-mono, "Roboto Mono", monospace);
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  border: 0;
+  border-radius: 8px;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 20px;
+  display: flex;
+}
+
+.ov-tui__hint-example-index {
+  color: var(--ov-ui-tui-muted);
+  flex: none;
+}
+
+.ov-tui__hint-example:hover {
+  background: var(--ov-ui-tui-bubble-bg);
+}
+
+.ov-tui__hint-table-frame {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.ov-tui__hint-table {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  border-spacing: 0;
+  border-radius: 8px;
+  width: 100%;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-tui__hint-table th, .ov-tui__hint-table td {
+  border-inline-end: 1px solid var(--ov-ui-tui-card-border);
+  border-bottom: 1px solid var(--ov-ui-tui-card-border);
+  text-align: left;
+  overflow-wrap: anywhere;
+  padding: 8px 10px;
+  font-weight: 400;
+}
+
+.ov-tui__hint-table th {
+  color: var(--ov-ui-tui-muted);
+}
+
+.ov-tui__hint-table :is(th, td):nth-child(2) {
+  text-align: center;
+  white-space: nowrap;
+  min-width: 52px;
+}
+
+.ov-tui__hint-table :is(th, td):last-child {
+  text-align: center;
+  border-inline-end: 0;
+  min-width: 56px;
+}
+
+.ov-tui__hint-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.ov-tui__skeleton {
+  flex-direction: column;
+  gap: 8px;
+  display: flex;
+}
+
+.ov-tui__skeleton-summary {
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 10px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  display: flex;
+}
+
+.ov-tui__skeleton-line {
+  background: linear-gradient(90deg,
+    var(--ov-ui-tui-skeleton) 0%,
+    var(--ov-ui-tui-skeleton-bright) 50%,
+    var(--ov-ui-tui-skeleton) 100%);
+  background-size: 200% 100%;
+  border-radius: 999px;
+  height: 12px;
+  animation: 1.2s ease-in-out infinite ov-tui-shimmer;
+  display: block;
+}
+
+.ov-tui__skeleton-item {
+  border: 1px solid var(--ov-ui-tui-card-border);
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  display: flex;
+}
+
+.ov-tui__skeleton-icon {
+  background: var(--ov-ui-tui-skeleton);
+  border-radius: 8px;
+  flex: none;
+  width: 24px;
+  height: 24px;
+}
+
+.ov-tui__skeleton-lines {
+  flex-direction: column;
+  flex: 1;
+  gap: 6px;
+  display: flex;
+}
+
+.ov-tui__skeleton-row {
+  gap: 12px;
+  padding: 4px 0;
+  display: flex;
+}
+
+.ov-tui__skeleton-row .ov-tui__skeleton-line {
+  flex: 1;
+}
+
+.ov-tui__skeleton-block {
+  background: var(--ov-ui-tui-card-bg);
+  border-radius: 10px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  display: flex;
+}
+
+@keyframes ov-tui-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-tui__skeleton-line, .ov-tui__result-state[data-status="pending"] {
+    animation: none;
+  }
+}
+
+@container (width <= 480px) {
+  .ov-tui__search-item, .ov-tui__tree-item {
+    flex-direction: column;
+  }
+
+  .ov-tui__search-metrics {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
+
+  .ov-tui__help-item {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+}
+