@openviking/react 0.1.3 → 0.1.5

package/dist/components/file-browser-entries/style.css

@@ -1,7 +1,11 @@
-.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-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
   --ov-ui-primary-default: #5252ff;
   --ov-ui-primary-hover-default: #7075ff;
   --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
   --ov-ui-primary-light-default: #f5f7ff;
   --ov-ui-connect-glow-warm-default: #ff952b0a;
   --ov-ui-connect-glow-pink-default: #fb4fbc0f;
@@ -19,18 +23,21 @@
   --ov-ui-bg-3-default: #f7f8fd;
   --ov-ui-bg-4-default: #f6f7fa;
   --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-code-bg-default: #fbfbfc;
   --ov-ui-status-success-default: #1f9d55;
   --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
   --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-overlay-default: #0006;
   --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 {
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .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__popover, .dark .ov-viking-bot__reference-picker--mention, .dark .ov-viking-bot__interaction {
   --ov-ui-primary-default: #5f5fff;
   --ov-ui-primary-hover-default: #7075ff;
   --ov-ui-primary-active-default: #4242ba;
@@ -56,9 +63,14 @@
   --ov-ui-warning-default: #e0a04a;
   --ov-ui-warning-light-default: #3a2f14;
   --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-overlay-default: #000000a3;
   --ov-ui-tooltip-text-default: #f0f1f3;
 }
 
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
 .ov-agent-connect {
   --ov-ui-connect-card-default: #fbfbfc;
   --ov-ui-connect-tabs-default: #f7f7f9;
@@ -84,6 +96,827 @@
   display: block;
 }
 
+.ov-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
+  --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-code-bg-default: #fbfbfc;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
+  --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-overlay-default: #0006;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .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__popover, .dark .ov-viking-bot__reference-picker--mention, .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-overlay-default: #000000a3;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
+.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-drawer {
+  z-index: var(--ov-ui-drawer-z-index, 1001);
+  position: fixed;
+  inset: 0;
+}
+
+.ov-drawer__mask {
+  background: var(--ov-ui-color-overlay, var(--ov-ui-overlay-default));
+  opacity: 1;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.ov-drawer__panel {
+  width: var(--ov-ui-drawer-width, 250px);
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  max-width: 100%;
+  height: 100%;
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  box-shadow: -4px 0 16px
+    color-mix(in srgb,
+      var(--ov-ui-color-shadow, var(--ov-ui-shadow-default)) 12%,
+      transparent);
+  position: absolute;
+  inset: 0 0 0 auto;
+  overflow: hidden;
+  transform: translateX(0);
+}
+
+.ov-drawer__focus-lock, .ov-drawer__body {
+  height: 100%;
+}
+
+.ov-drawer__body {
+  overscroll-behavior: contain;
+  overflow: auto;
+}
+
+.ov-drawer__close {
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+.ov-drawer__close:hover {
+  background: var(--ov-ui-color-fill-hover, var(--ov-ui-fill-hover-default));
+}
+
+.ov-drawer__close:focus-visible {
+  outline: 2px solid var(--ov-ui-color-focus, var(--ov-ui-focus-default));
+  outline-offset: -2px;
+}
+
+.ov-drawer__mask.ov-drawer--enter, .ov-drawer__mask.ov-drawer--exit {
+  opacity: 0;
+}
+
+.ov-drawer__panel.ov-drawer--enter, .ov-drawer__panel.ov-drawer--exit {
+  transform: translateX(100%);
+}
+
+.ov-drawer__mask.ov-drawer--enter-active {
+  opacity: 1;
+}
+
+.ov-drawer__panel.ov-drawer--enter-active {
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ov-drawer__mask.ov-drawer--enter-active, .ov-drawer__mask.ov-drawer--exit {
+    transition: opacity .3s cubic-bezier(.34, .69, .1, 1);
+  }
+
+  .ov-drawer__panel.ov-drawer--enter-active, .ov-drawer__panel.ov-drawer--exit {
+    transition: transform .3s cubic-bezier(.34, .69, .1, 1);
+  }
+}
+
+
+
+.ov-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
+  --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-code-bg-default: #fbfbfc;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
+  --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-overlay-default: #0006;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .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__popover, .dark .ov-viking-bot__reference-picker--mention, .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-overlay-default: #000000a3;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
+.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-agent-connect__code-block {
+  border: 1px solid var(--ov-ui-agent-connect-border);
+  background: var(--ov-ui-agent-connect-bg);
+  white-space: normal;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.ov-agent-connect__code-block:last-child {
+  margin-bottom: 0;
+}
+
+.ov-agent-connect__code-header {
+  border-bottom: 1px solid var(--ov-ui-agent-connect-border);
+  color: var(--ov-ui-agent-connect-muted);
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  display: flex;
+}
+
+.ov-agent-connect__code-actions {
+  align-items: center;
+  gap: 12px;
+  display: flex;
+}
+
+.ov-agent-connect__code-actions button {
+  width: 24px;
+  height: 24px;
+  color: var(--ov-ui-agent-connect-secondary);
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.ov-agent-connect__code-actions button:hover {
+  color: var(--ov-ui-agent-connect-primary);
+}
+
+.ov-agent-connect__code-actions button:disabled {
+  opacity: .6;
+  cursor: wait;
+}
+
+.ov-agent-connect__code-actions svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ov-agent-connect .ov-agent-connect__code-block pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: none;
+  border-radius: 0;
+  margin: 0;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-agent-connect__code-block code {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.ov-agent-connect__code-block > .ov-agent-connect__feedback:not(:empty) {
+  padding: 0 12px 8px;
+  display: block;
+}
+
+.ov-agent-connect__code-feedback {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.ov-agent-connect {
+  --ov-ui-agent-connect-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  --ov-ui-agent-connect-secondary: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default));
+  --ov-ui-agent-connect-muted: var(--ov-ui-color-connect-muted, var(--ov-ui-connect-muted-default));
+  --ov-ui-agent-connect-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  --ov-ui-agent-connect-card: var(--ov-ui-color-connect-card, var(--ov-ui-connect-card-default));
+  --ov-ui-agent-connect-tabs: var(--ov-ui-color-connect-tabs, var(--ov-ui-connect-tabs-default));
+  --ov-ui-agent-connect-selected: var(--ov-ui-color-connect-selected, var(--ov-ui-connect-selected-default));
+  --ov-ui-agent-connect-border: var(--ov-ui-color-connect-border, var(--ov-ui-connect-border-default));
+  --ov-ui-agent-connect-primary: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  box-sizing: border-box;
+  background: var(--ov-ui-agent-connect-bg);
+  width: 1000px;
+  max-width: 100%;
+  color: var(--ov-ui-agent-connect-text);
+  letter-spacing: .003em;
+  -webkit-font-smoothing: antialiased;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  overflow-x: auto;
+}
+
+.ov-agent-connect__canvas {
+  isolation: isolate;
+  width: 1000px;
+  min-height: 949px;
+  box-shadow: inset 0 0 0 .5px
+    var(--ov-ui-color-connect-outline, var(--ov-ui-connect-outline-default));
+  position: relative;
+  overflow: hidden;
+}
+
+.ov-agent-connect__canvas:before {
+  z-index: -1;
+  background: radial-gradient(ellipse 466.5px 159.5px at 379.5px -6.5px,
+      var(--ov-ui-color-connect-glow-warm, var(--ov-ui-connect-glow-warm-default)),
+      transparent),
+    radial-gradient(ellipse 286.5px 159.5px at 725.5px 4.5px,
+      var(--ov-ui-color-connect-glow-pink, var(--ov-ui-connect-glow-pink-default)),
+      transparent),
+    radial-gradient(ellipse 230.5px 212px at -63.5px 869px,
+      var(--ov-ui-color-connect-glow-warm, var(--ov-ui-connect-glow-warm-default)),
+      transparent),
+    radial-gradient(ellipse 173.5px 159.5px at 236.5px 947.5px,
+      var(--ov-ui-color-connect-glow-pink-soft, var(--ov-ui-connect-glow-pink-soft-default)),
+      transparent);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.ov-agent-connect *, .ov-agent-connect :before, .ov-agent-connect :after {
+  box-sizing: border-box;
+}
+
+.ov-agent-connect :where(button) {
+  font: inherit;
+  cursor: pointer;
+}
+
+.ov-agent-connect button:focus-visible, .ov-agent-connect a:focus-visible {
+  outline: 2px solid var(--ov-ui-color-focus, var(--ov-ui-focus-default));
+  outline-offset: 2px;
+}
+
+.ov-agent-connect__header {
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 24px 0;
+  display: flex;
+}
+
+.ov-agent-connect__title {
+  color: inherit;
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.ov-agent-connect__tabs {
+  background: var(--ov-ui-agent-connect-tabs);
+  border-radius: 34px;
+  height: 36px;
+  padding: 2px;
+  display: flex;
+}
+
+.ov-agent-connect__tab {
+  color: var(--ov-ui-agent-connect-secondary);
+  white-space: nowrap;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 35px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 16px;
+  display: flex;
+}
+
+.ov-agent-connect__tab[aria-selected="true"] {
+  border-color: var(--ov-ui-agent-connect-border);
+  background: var(--ov-ui-agent-connect-bg);
+  color: var(--ov-ui-agent-connect-text);
+  font-weight: 500;
+}
+
+.ov-agent-connect__layout {
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 40px;
+  padding: 0 60px 24px 40px;
+  display: grid;
+}
+
+.ov-agent-connect__list {
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 24px 0;
+  list-style: none;
+  display: flex;
+}
+
+.ov-agent-connect__item {
+  width: 100%;
+  height: 36px;
+  color: var(--ov-ui-agent-connect-secondary);
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  display: flex;
+}
+
+.ov-agent-connect__item:hover {
+  background: var(--ov-ui-agent-connect-tabs);
+}
+
+.ov-agent-connect__item[aria-pressed="true"] {
+  background: var(--ov-ui-agent-connect-selected);
+  color: var(--ov-ui-agent-connect-text);
+  font-weight: 500;
+}
+
+.ov-agent-connect__item-icon {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.ov-agent-connect__item-name {
+  white-space: nowrap;
+}
+
+.ov-agent-connect__detail {
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+  padding-top: 24px;
+  display: flex;
+}
+
+.ov-agent-connect__identity {
+  align-items: flex-start;
+  gap: 12px;
+  display: flex;
+}
+
+.ov-agent-connect__detail-icon {
+  flex: 0 0 56px;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  display: flex;
+}
+
+.ov-agent-connect__detail-icon--frame {
+  border: 1px solid var(--ov-ui-agent-connect-border);
+  border-radius: 12px;
+}
+
+.ov-agent-connect__detail-icon--frame > svg {
+  width: 48px;
+  height: 48px;
+}
+
+.ov-agent-connect__summary {
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-agent-connect__detail-title {
+  color: inherit;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 26px;
+}
+
+.ov-agent-connect__description {
+  min-height: 40px;
+  color: var(--ov-ui-agent-connect-muted);
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-agent-connect__tags {
+  gap: 8px;
+  margin-top: 4px;
+  display: flex;
+}
+
+.ov-agent-connect__tag {
+  background: var(--ov-ui-agent-connect-selected);
+  color: var(--ov-ui-agent-connect-secondary);
+  border-radius: 4px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-agent-connect__instructions {
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+}
+
+.ov-agent-connect__instructions-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 34px;
+  display: flex;
+}
+
+.ov-agent-connect__instructions-title {
+  color: inherit;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.ov-agent-connect__copy {
+  background: var(--ov-ui-agent-connect-primary);
+  height: 34px;
+  color: var(--ov-ui-color-on-primary, var(--ov-ui-on-primary-default));
+  border: 0;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 16px;
+  font-size: 13px;
+  line-height: 22px;
+  display: inline-flex;
+}
+
+.ov-agent-connect__copy svg {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.ov-agent-connect__copy:hover {
+  background: var(--ov-ui-color-primary-hover, var(--ov-ui-primary-hover-default));
+}
+
+.ov-agent-connect__copy:active {
+  background: var(--ov-ui-color-primary-active, var(--ov-ui-primary-active-default));
+}
+
+.ov-agent-connect__copy:disabled {
+  opacity: .6;
+  cursor: wait;
+}
+
+.ov-agent-connect__body {
+  box-shadow: inset 0 0 0 1px var(--ov-ui-agent-connect-border);
+  background: var(--ov-ui-agent-connect-card);
+  color: var(--ov-ui-agent-connect-secondary);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  border-radius: 12px;
+  padding: 12px 16px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-agent-connect__feedback {
+  color: var(--ov-ui-agent-connect-muted);
+  font-size: 12px;
+}
+
+.ov-agent-connect__feedback:empty {
+  display: none;
+}
+
+.ov-agent-connect__feedback--error {
+  color: var(--ov-ui-color-status-error, var(--ov-ui-status-error-default));
+}
+
+.ov-agent-connect__footer {
+  color: var(--ov-ui-agent-connect-muted);
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-agent-connect__agreement {
+  color: inherit;
+  text-decoration: underline dotted;
+  text-decoration-color: var(--ov-ui-color-connect-notice, var(--ov-ui-connect-notice-default));
+  text-underline-offset: 3px;
+}
+
+.ov-agent-connect__markdown {
+  white-space: normal;
+}
+
+.ov-agent-connect__markdown :where(p, pre, h5, table, ul, ol, blockquote, details) {
+  margin: 0 0 12px;
+}
+
+.ov-agent-connect__markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.ov-agent-connect__markdown p {
+  white-space: pre-wrap;
+}
+
+.ov-agent-connect__markdown :where(ul, ol) {
+  padding-left: 24px;
+}
+
+.ov-agent-connect__markdown ul {
+  list-style-type: disc;
+}
+
+.ov-agent-connect__markdown ol {
+  list-style-type: decimal;
+}
+
+.ov-agent-connect__markdown blockquote {
+  border-left: 2px solid var(--ov-ui-agent-connect-border);
+  margin-left: 0;
+  padding-left: 12px;
+}
+
+.ov-agent-connect__markdown summary {
+  cursor: pointer;
+}
+
+.ov-agent-connect__markdown summary:focus-visible {
+  outline: 2px solid var(--ov-ui-agent-connect-primary);
+  outline-offset: 2px;
+}
+
+.ov-agent-connect__markdown h5 {
+  color: var(--ov-ui-agent-connect-text);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.ov-agent-connect__markdown pre {
+  background: var(--ov-ui-agent-connect-bg);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  border-radius: 6px;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-agent-connect__markdown code {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.ov-agent-connect__markdown a {
+  color: var(--ov-ui-agent-connect-primary);
+  overflow-wrap: anywhere;
+}
+
+.ov-agent-connect__markdown table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.ov-agent-connect__markdown :where(td, th) {
+  border: 1px solid var(--ov-ui-agent-connect-border);
+  text-align: left;
+  padding: 6px;
+}
+
+.ov-agent-connect__guides {
+  gap: 8px;
+  display: flex;
+}
+
+.ov-agent-connect__guide {
+  border: 1px solid var(--ov-ui-agent-connect-border);
+  background: var(--ov-ui-agent-connect-bg);
+  color: var(--ov-ui-agent-connect-secondary);
+  border-radius: 6px;
+  padding: 4px 12px;
+}
+
+.ov-agent-connect__guide[aria-pressed="true"] {
+  background: var(--ov-ui-agent-connect-selected);
+  color: var(--ov-ui-agent-connect-text);
+  font-weight: 500;
+}
+
+.ov-agent-connect__guides--cli {
+  border-bottom: 1px solid var(--ov-ui-agent-connect-border);
+  gap: 0;
+}
+
+.ov-agent-connect__guides--cli .ov-agent-connect__guide {
+  color: var(--ov-ui-agent-connect-muted);
+  background: none;
+  border: 0;
+  border-bottom: 2px solid #0000;
+  border-radius: 0;
+  margin-bottom: -1px;
+  margin-right: 24px;
+  padding: 0 4px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  transition: color .15s, border-color .15s;
+}
+
+.ov-agent-connect__guides--cli .ov-agent-connect__guide[aria-pressed="true"] {
+  border-bottom-color: var(--ov-ui-agent-connect-primary);
+  color: var(--ov-ui-agent-connect-text);
+  font-weight: 600;
+}
+
+
+
 .ov-file-browser-entries {
   --ov-file-browser-entries-height: 32px;
   box-sizing: border-box;
@@ -123,6 +956,22 @@
   overflow: hidden;
 }
 
+.ov-file-browser-entries__import-slot {
+  flex: 1 0 0;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
+.ov-file-browser-entries__import-slot > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.ov-file-browser-entries__import-slot .ov-file-browser-entries__entry {
+  width: 100%;
+}
+
 .ov-file-browser-entries__entry:hover:not(:disabled) {
   background: color-mix(in srgb,
     var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff)) 10%,
@@ -151,5 +1000,20 @@
   overflow: hidden;
 }
 
+.ov-file-browser-entries__drawer {
+  --ov-ui-drawer-width: 1000px;
+}
+
+.ov-file-browser-entries__drawer .ov-agent-connect {
+  height: 100%;
+}
+
+.ov-file-browser-entries__drawer .ov-agent-connect__canvas {
+  width: 100%;
+  min-width: 720px;
+  min-height: 100%;
+  box-shadow: none;
+}
+