wip: desktop work

6 files changed, 333 insertions, 241 deletions

diff --git a/packages/ui/script/colors.txt b/packages/ui/script/colors.txt
index 15f8bb3d1..b022e8a11 100644
--- a/packages/ui/script/colors.txt
+++ b/packages/ui/script/colors.txt
@@ -1,214 +1,224 @@
-  --background-base: #f8f7f7;
-  --background-weak: var(--smoke-light-3);
-  --background-strong: var(--smoke-light-1);
-  --background-stronger: #fcfcfc;
-  --base: var(--smoke-light-alpha-2);
-  --surface-base: var(--smoke-light-alpha-2);
-  --base2: var(--smoke-light-alpha-2);
-  --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-3);
-  --surface-inset-base-hover: var(--smoke-light-alpha-3);
-  --surface-inset-strong: #1f000017;
-  --surface-inset-strong-hover: #1f000017;
-  --surface-raised-base: var(--smoke-light-alpha-1);
-  --surface-float-base: var(--smoke-dark-1);
-  --surface-float-base-hover: var(--smoke-dark-2);
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
-  --surface-raised-strong: var(--smoke-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--smoke-light-alpha-3);
-  --surface-weaker: var(--smoke-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-skip-base: var(--smoke-light-3);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: var(--mint-light-3);
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --text-base: var(--smoke-light-11);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --text-weak: var(--smoke-light-9);
-  --text-weaker: var(--smoke-light-8);
-  --text-strong: var(--smoke-light-12);
-  --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-1);
-  --text-on-success-base: var(--smoke-dark-alpha-11);
-  --text-on-warning-base: var(--smoke-dark-alpha-11);
-  --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-11);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--smoke-dark-alpha-9);
-  --text-on-info-strong: var(--smoke-dark-alpha-12);
-  --text-on-warning-weak: var(--smoke-dark-alpha-9);
-  --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
-  --text-on-brand-weak: var(--smoke-light-alpha-9);
-  --text-on-brand-weaker: var(--smoke-light-alpha-8);
-  --text-on-brand-strong: var(--smoke-light-alpha-12);
-  --button-secondary-base: #fdfcfc;
-  --border-base: var(--smoke-light-alpha-7);
-  --border-hover: var(--smoke-light-alpha-8);
-  --border-active: var(--smoke-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--smoke-light-alpha-8);
-  --border-focus: var(--smoke-light-alpha-9);
-  --border-weak-base: var(--smoke-light-alpha-5);
-  --border-strong-base: var(--smoke-light-alpha-7);
-  --border-strong-hover: var(--smoke-light-alpha-8);
-  --border-strong-active: var(--smoke-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--smoke-light-alpha-6);
-  --border-strong-focus: var(--smoke-light-alpha-7);
-  --border-weak-hover: var(--smoke-light-alpha-6);
-  --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-6);
-  --border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--smoke-light-9);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-invert-base: #ffffff;
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: var(--smoke-light-12);
-  --icon-strong-active: var(--smoke-light-12);
-  --icon-strong-selected: var(--smoke-light-12);
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: var(--smoke-light-12);
-  --icon-brand-base: var(--smoke-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-light-11);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--smoke-light-alpha-11);
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-alpha-9);
-  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-9);
-  --icon-diff-delete-hover: var(--ember-light-10);
-  --icon-diff-delete-active: var(--ember-light-11);
-  --syntax-comment: #ffffff;
-  --syntax-string: #ffffff;
-  --syntax-keyword: #ffffff;
-  --syntax-function: #ffffff;
-  --syntax-number: #ffffff;
-  --syntax-operator: #ffffff;
-  --syntax-variable: #ffffff;
-  --syntax-type: #ffffff;
-  --syntax-constant: #ffffff;
-  --syntax-punctuation: #ffffff;
-  --syntax-success: #ffffff;
-  --syntax-warning: #ffffff;
-  --syntax-critical: #ffffff;
-  --syntax-info: #ffffff;
-  --markdown-heading: #ffffff;
-  --markdown-text: #ffffff;
-  --markdown-link: #ffffff;
-  --markdown-link-text: #ffffff;
-  --markdown-code: #ffffff;
-  --markdown-block-quote: #ffffff;
-  --markdown-emph: #ffffff;
-  --markdown-strong: #ffffff;
-  --markdown-horizontal-rule: #ffffff;
-  --markdown-list-item: #ffffff;
-  --markdown-list-enumeration: #ffffff;
-  --markdown-image: #ffffff;
-  --markdown-image-text: #ffffff;
-  --markdown-code-block: #ffffff;
-  --border-color: #ffffff;
+--background-base: #F8F7F7;
+--background-weak: var(--smoke-light-3);
+--background-strong: var(--smoke-light-1);
+--background-stronger: #FCFCFC;
+--base: var(--smoke-light-alpha-2);
+--surface-base: var(--smoke-light-alpha-2);
+--surface-base-hover: #0500000F;
+--surface-base-active: var(--smoke-light-alpha-3);
+--surface-base-interactive-active: var(--cobalt-light-alpha-3);
+--base2: var(--smoke-light-alpha-2);
+--base3: var(--smoke-light-alpha-2);
+--surface-inset-base: var(--smoke-light-alpha-2);
+--surface-inset-base-hover: var(--smoke-light-alpha-3);
+--surface-inset-strong: #1F000017;
+--surface-inset-strong-hover: #1F000017;
+--surface-raised-base: var(--smoke-light-alpha-1);
+--surface-float-base: var(--smoke-dark-1);
+--surface-float-base-hover: var(--smoke-dark-2);
+--surface-raised-base-hover: var(--smoke-light-alpha-2);
+--surface-raised-strong: var(--smoke-light-1);
+--surface-raised-strong-hover: var(--white);
+--surface-raised-stronger: var(--white);
+--surface-raised-stronger-hover: var(--white);
+--surface-weak: var(--smoke-light-alpha-3);
+--surface-weaker: var(--smoke-light-alpha-4);
+--surface-strong: #FFFFFF;
+--surface-raised-stronger-non-alpha: var(--white);
+--surface-brand-base: var(--yuzu-light-9);
+--surface-brand-hover: var(--yuzu-light-10);
+--surface-interactive-base: var(--cobalt-light-3);
+--surface-interactive-hover: var(--cobalt-light-4);
+--surface-interactive-weak: var(--cobalt-light-2);
+--surface-interactive-weak-hover: var(--cobalt-light-3);
+--surface-success-base: var(--apple-light-3);
+--surface-success-weak: var(--apple-light-2);
+--surface-success-strong: var(--apple-light-9);
+--surface-warning-base: var(--solaris-light-3);
+--surface-warning-weak: var(--solaris-light-2);
+--surface-warning-strong: var(--solaris-light-9);
+--surface-critical-base: var(--ember-light-3);
+--surface-critical-weak: var(--ember-light-2);
+--surface-critical-strong: var(--ember-light-9);
+--surface-info-base: var(--lilac-light-3);
+--surface-info-weak: var(--lilac-light-2);
+--surface-info-strong: var(--lilac-light-9);
+--surface-diff-hidden-base: var(--blue-light-3);
+--surface-diff-skip-base: var(--smoke-light-2);
+--surface-diff-unchanged-base: #FFFFFF00;
+--surface-diff-hidden-weak: var(--blue-light-2);
+--surface-diff-hidden-weaker: var(--blue-light-1);
+--surface-diff-hidden-strong: var(--blue-light-5);
+--surface-diff-hidden-stronger: var(--blue-light-9);
+--surface-diff-add-base: var(--mint-light-3);
+--surface-diff-add-weak: var(--mint-light-2);
+--surface-diff-add-weaker: var(--mint-light-1);
+--surface-diff-add-strong: var(--mint-light-5);
+--surface-diff-add-stronger: var(--mint-light-9);
+--surface-diff-delete-base: var(--ember-light-3);
+--surface-diff-delete-weak: var(--ember-light-2);
+--surface-diff-delete-weaker: var(--ember-light-1);
+--surface-diff-delete-strong: var(--ember-light-6);
+--surface-diff-delete-stronger: var(--ember-light-9);
+--text-base: var(--smoke-light-11);
+--input-base: var(--smoke-light-1);
+--input-hover: var(--smoke-light-2);
+--input-active: var(--cobalt-light-1);
+--input-selected: var(--cobalt-light-4);
+--input-focus: var(--cobalt-light-1);
+--input-disabled: var(--smoke-light-4);
+--text-weak: var(--smoke-light-9);
+--text-weaker: var(--smoke-light-8);
+--text-strong: var(--smoke-light-12);
+--text-interactive-base: var(--cobalt-light-9);
+--text-on-brand-base: var(--smoke-light-alpha-11);
+--text-on-interactive-base: var(--smoke-light-1);
+--text-on-interactive-weak: var(--smoke-dark-alpha-11);
+--text-on-success-base: var(--smoke-dark-alpha-11);
+--text-on-warning-base: var(--smoke-dark-alpha-11);
+--text-on-info-base: var(--smoke-dark-alpha-11);
+--text-diff-add-base: var(--mint-light-11);
+--text-diff-delete-base: var(--ember-light-11);
+--text-diff-delete-strong: var(--ember-light-12);
+--text-diff-add-strong: var(--mint-light-12);
+--text-on-info-weak: var(--smoke-dark-alpha-9);
+--text-on-info-strong: var(--smoke-dark-alpha-12);
+--text-on-warning-weak: var(--smoke-dark-alpha-9);
+--text-on-warning-strong: var(--smoke-dark-alpha-12);
+--text-on-success-weak: var(--smoke-dark-alpha-9);
+--text-on-success-strong: var(--smoke-dark-alpha-12);
+--text-on-brand-weak: var(--smoke-light-alpha-9);
+--text-on-brand-weaker: var(--smoke-light-alpha-8);
+--text-on-brand-strong: var(--smoke-light-alpha-12);
+--button-secondary-base: #FDFCFC;
+--button-secondary-base-hover: #FAF9F9;
+--border-base: var(--smoke-light-alpha-7);
+--border-hover: var(--smoke-light-alpha-8);
+--border-active: var(--smoke-light-alpha-9);
+--border-selected: var(--cobalt-light-alpha-9);
+--border-disabled: var(--smoke-light-alpha-8);
+--border-focus: var(--smoke-light-alpha-9);
+--border-weak-base: var(--smoke-light-alpha-5);
+--border-strong-base: var(--smoke-light-alpha-7);
+--border-strong-hover: var(--smoke-light-alpha-8);
+--border-strong-active: var(--smoke-light-alpha-7);
+--border-strong-selected: var(--cobalt-light-alpha-6);
+--border-strong-disabled: var(--smoke-light-alpha-6);
+--border-strong-focus: var(--smoke-light-alpha-7);
+--border-weak-hover: var(--smoke-light-alpha-6);
+--border-weak-active: var(--smoke-light-alpha-7);
+--border-weak-selected: var(--cobalt-light-alpha-5);
+--border-weak-disabled: var(--smoke-light-alpha-6);
+--border-weak-focus: var(--smoke-light-alpha-7);
+--border-interactive-base: var(--cobalt-light-7);
+--border-interactive-hover: var(--cobalt-light-8);
+--border-interactive-active: var(--cobalt-light-9);
+--border-interactive-selected: var(--cobalt-light-9);
+--border-interactive-disabled: var(--smoke-light-8);
+--border-interactive-focus: var(--cobalt-light-9);
+--border-success-base: var(--apple-light-6);
+--border-success-hover: var(--apple-light-7);
+--border-success-selected: var(--apple-light-9);
+--border-warning-base: var(--solaris-light-6);
+--border-warning-hover: var(--solaris-light-7);
+--border-warning-selected: var(--solaris-light-9);
+--border-critical-base: var(--ember-light-6);
+--border-critical-hover: var(--ember-light-7);
+--border-critical-selected: var(--ember-light-9);
+--border-info-base: var(--lilac-light-6);
+--border-info-hover: var(--lilac-light-7);
+--border-info-selected: var(--lilac-light-9);
+--icon-base: var(--smoke-light-9);
+--icon-hover: var(--smoke-light-11);
+--icon-active: var(--smoke-light-12);
+--icon-selected: var(--smoke-light-12);
+--icon-disabled: var(--smoke-light-8);
+--icon-focus: var(--smoke-light-12);
+--icon-weak-base: var(--smoke-light-7);
+--icon-invert-base: #FFFFFF;
+--icon-weak-hover: var(--smoke-light-8);
+--icon-weak-active: var(--smoke-light-9);
+--icon-weak-selected: var(--smoke-light-10);
+--icon-weak-disabled: var(--smoke-light-6);
+--icon-weak-focus: var(--smoke-light-9);
+--icon-strong-base: var(--smoke-light-12);
+--icon-strong-hover: var(--smoke-light-12);
+--icon-strong-active: var(--smoke-light-12);
+--icon-strong-selected: var(--smoke-light-12);
+--icon-strong-disabled: var(--smoke-light-8);
+--icon-strong-focus: var(--smoke-light-12);
+--icon-brand-base: var(--smoke-light-12);
+--icon-interactive-base: var(--cobalt-light-9);
+--icon-success-base: var(--apple-light-7);
+--icon-success-hover: var(--apple-light-8);
+--icon-success-active: var(--apple-light-11);
+--icon-warning-base: var(--amber-light-7);
+--icon-warning-hover: var(--amber-light-8);
+--icon-warning-active: var(--amber-light-11);
+--icon-critical-base: var(--ember-light-7);
+--icon-critical-hover: var(--ember-light-8);
+--icon-critical-active: var(--ember-light-11);
+--icon-info-base: var(--lilac-light-7);
+--icon-info-hover: var(--lilac-light-8);
+--icon-info-active: var(--lilac-light-11);
+--icon-on-brand-base: var(--smoke-light-alpha-11);
+--icon-on-brand-hover: var(--smoke-light-alpha-12);
+--icon-on-brand-selected: var(--smoke-light-alpha-12);
+--icon-on-interactive-base: var(--smoke-light-1);
+--icon-agent-plan-base: var(--purple-light-9);
+--icon-agent-docs-base: var(--amber-light-9);
+--icon-agent-ask-base: var(--cyan-light-9);
+--icon-agent-build-base: var(--cobalt-light-9);
+--icon-on-success-base: var(--apple-light-alpha-9);
+--icon-on-success-hover: var(--apple-light-alpha-10);
+--icon-on-success-selected: var(--apple-light-alpha-11);
+--icon-on-warning-base: var(--amber-lightalpha-9);
+--icon-on-warning-hover: var(--amber-lightalpha-10);
+--icon-on-warning-selected: var(--amber-lightalpha-11);
+--icon-on-critical-base: var(--ember-light-alpha-9);
+--icon-on-critical-hover: var(--ember-light-alpha-10);
+--icon-on-critical-selected: var(--ember-light-alpha-11);
+--icon-on-info-base: var(--lilac-light-9);
+--icon-on-info-hover: var(--lilac-light-alpha-10);
+--icon-on-info-selected: var(--lilac-light-alpha-11);
+--icon-diff-add-base: var(--mint-light-11);
+--icon-diff-add-hover: var(--mint-light-12);
+--icon-diff-add-active: var(--mint-light-12);
+--icon-diff-delete-base: var(--ember-light-9);
+--icon-diff-delete-hover: var(--ember-light-10);
+--icon-diff-delete-active: var(--ember-light-11);
+--syntax-comment: #8A8A8A;
+--syntax-string: #D68C27;
+--syntax-keyword: #3B7DD8;
+--syntax-function: #D1383D;
+--syntax-number: #3D9A57;
+--syntax-operator: #D68C27;
+--syntax-variable: #B0851F;
+--syntax-type: #318795;
+--syntax-constant: #953170;
+--syntax-punctuation: #1A1A1A;
+--syntax-success: var(--apple-dark-10);
+--syntax-warning: var(--amber-light-10);
+--syntax-critical: var(--ember-dark-9);
+--syntax-info: var(--lilac-dark-11);
+--markdown-heading: #D68C27;
+--markdown-text: #1A1A1A;
+--markdown-link: #3B7DD8;
+--markdown-link-text: #318795;
+--markdown-code: #3D9A57;
+--markdown-block-quote: #B0851F;
+--markdown-emph: #B0851F;
+--markdown-strong: #D68C27;
+--markdown-horizontal-rule: #8A8A8A;
+--markdown-list-item: #3B7DD8;
+--markdown-list-enumeration: #318795;
+--markdown-image: #3B7DD8;
+--markdown-image-text: #318795;
+--markdown-code-block: #1A1A1A;
+--border-color: #FFFFFF;
+--border-weaker-base: var(--smoke-light-alpha-3);
+--border-weaker-hover: var(--smoke-light-alpha-4);
+--border-weaker-active: var(--smoke-light-alpha-6);
+--border-weaker-selected: var(--cobalt-light-alpha-4);
+--border-weaker-disabled: var(--smoke-light-alpha-2);
+--border-weaker-focus: var(--smoke-light-alpha-6);
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 441d0083f..34699fc20 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -1,23 +1,55 @@
 [data-component="collapsible"] {
+  width: 100%;
   display: flex;
   flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition: background-color 0.15s ease;
+  border-radius: 8px;
+  overflow: clip;
 
-  [data-slot="trigger"] {
-    cursor: pointer;
+  [data-slot="collapsible-trigger"] {
+    width: 100%;
+    display: flex;
+    height: 40px;
+    padding: 6px 8px 6px 12px;
+    align-items: center;
+    align-self: stretch;
+    cursor: default;
     user-select: none;
+    color: var(--text-base);
 
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    /* &:hover { */
+    /*   background-color: var(--surface-base); */
+    /* } */
     &:focus-visible {
-      outline: 2px solid var(--border-focus);
-      outline-offset: 2px;
+      outline: none;
     }
-
     &[data-disabled] {
       cursor: not-allowed;
-      opacity: 0.5;
+    }
+
+    [data-slot="collapsible-arrow"] {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      /* [data-slot="collapsible-arrow-icon"] { */
+      /* } */
     }
   }
 
-  [data-slot="content"] {
+  [data-slot="collapsible-content"] {
     overflow: hidden;
     /* animation: slideUp 250ms ease-out; */
 
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index f926192e8..d2e4a139b 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -1,5 +1,6 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
 import { ComponentProps, ParentProps, splitProps } from "solid-js"
+import { Icon } from "./icon"
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -21,14 +22,23 @@ function CollapsibleRoot(props: CollapsibleProps) {
 }
 
 function CollapsibleTrigger(props: ComponentProps<typeof Kobalte.Trigger>) {
-  return <Kobalte.Trigger data-slot="trigger" {...props} />
+  return <Kobalte.Trigger data-slot="collapsible-trigger" {...props} />
 }
 
 function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
-  return <Kobalte.Content data-slot="content" {...props} />
+  return <Kobalte.Content data-slot="collapsible-content" {...props} />
+}
+
+function CollapsibleArrow(props?: ComponentProps<"div">) {
+  return (
+    <div data-slot="collapsible-arrow" {...(props || {})}>
+      <Icon data-slot="collapsible-arrow-icon" name="chevron-grabber-vertical" size="small" />
+    </div>
+  )
 }
 
 export const Collapsible = Object.assign(CollapsibleRoot, {
+  Arrow: CollapsibleArrow,
   Trigger: CollapsibleTrigger,
   Content: CollapsibleContent,
 })
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 0011a9676..5736146e5 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -139,6 +139,16 @@ const newIcons = {
   folder: `<path d="M2.08301 2.91675V16.2501H17.9163V5.41675H9.99967L8.33301 2.91675H2.08301Z" stroke="currentColor" stroke-linecap="round"/>`,
   "pencil-line": `<path d="M9.58301 17.9166H17.9163M17.9163 5.83325L14.1663 2.08325L2.08301 14.1666V17.9166H5.83301L17.9163 5.83325Z" stroke="currentColor" stroke-linecap="square"/>`,
   "chevron-grabber-vertical": `<path d="M6.66675 12.4998L10.0001 15.8332L13.3334 12.4998M6.66675 7.49984L10.0001 4.1665L13.3334 7.49984" stroke="currentColor" stroke-linecap="square"/>`,
+  mcp: `<g><path d="M0.972656 9.37176L9.5214 1.60019C10.7018 0.527151 12.6155 0.527151 13.7957 1.60019C14.9761 2.67321 14.9761 4.41295 13.7957 5.48599L7.3397 11.3552" stroke="currentColor" stroke-linecap="round"/><path d="M7.42871 11.2747L13.7957 5.48643C14.9761 4.41338 16.8898 4.41338 18.0702 5.48643L18.1147 5.52688C19.2951 6.59993 19.2951 8.33966 18.1147 9.4127L10.3831 16.4414C9.98966 16.7991 9.98966 17.379 10.3831 17.7366L11.9707 19.1799" stroke="currentColor" stroke-linecap="round"/><path d="M11.6587 3.54346L5.33619 9.29119C4.15584 10.3642 4.15584 12.1039 5.33619 13.177C6.51649 14.25 8.43019 14.25 9.61054 13.177L15.9331 7.42923" stroke="currentColor" stroke-linecap="round"/></g>`,
+  glasses: `<path d="M0.416626 7.91667H1.66663M19.5833 7.91667H18.3333M11.866 7.57987C11.3165 7.26398 10.6793 7.08333 9.99996 7.08333C9.32061 7.08333 8.68344 7.26398 8.13389 7.57987M8.74996 10C8.74996 12.0711 7.07103 13.75 4.99996 13.75C2.92889 13.75 1.24996 12.0711 1.24996 10C1.24996 7.92893 2.92889 6.25 4.99996 6.25C7.07103 6.25 8.74996 7.92893 8.74996 10ZM18.75 10C18.75 12.0711 17.071 13.75 15 13.75C12.9289 13.75 11.25 12.0711 11.25 10C11.25 7.92893 12.9289 6.25 15 6.25C17.071 6.25 18.75 7.92893 18.75 10Z" stroke="currentColor" stroke-linecap="square"/>`,
+  "bullet-list": `<path d="M9.58329 13.7497H17.0833M9.58329 6.24967H17.0833M6.24996 6.24967C6.24996 7.17015 5.50377 7.91634 4.58329 7.91634C3.66282 7.91634 2.91663 7.17015 2.91663 6.24967C2.91663 5.3292 3.66282 4.58301 4.58329 4.58301C5.50377 4.58301 6.24996 5.3292 6.24996 6.24967ZM6.24996 13.7497C6.24996 14.6701 5.50377 15.4163 4.58329 15.4163C3.66282 15.4163 2.91663 14.6701 2.91663 13.7497C2.91663 12.8292 3.66282 12.083 4.58329 12.083C5.50377 12.083 6.24996 12.8292 6.24996 13.7497Z" stroke="currentColor" stroke-linecap="square"/>`,
+  "magnifying-glass-menu": `<path d="M2.08325 10.0002H4.58325M2.08325 5.41683H5.41659M2.08325 14.5835H5.41659M16.4583 13.9585L18.7499 16.2502M17.9166 10.0002C17.9166 12.9917 15.4915 15.4168 12.4999 15.4168C9.50838 15.4168 7.08325 12.9917 7.08325 10.0002C7.08325 7.00862 9.50838 4.5835 12.4999 4.5835C15.4915 4.5835 17.9166 7.00862 17.9166 10.0002Z" stroke="currentColor" stroke-linecap="square"/>`,
+  "window-cursor": `<path d="M17.9166 10.4167V3.75H2.08325V17.0833H10.4166M17.9166 13.5897L11.6666 11.6667L13.5897 17.9167L15.032 15.0321L17.9166 13.5897Z" stroke="currentColor" stroke-width="1.07143" stroke-linecap="square"/><path d="M5.00024 6.125C5.29925 6.12518 5.54126 6.36795 5.54126 6.66699C5.54108 6.96589 5.29914 7.20783 5.00024 7.20801C4.7012 7.20801 4.45843 6.966 4.45825 6.66699C4.45825 6.36784 4.70109 6.125 5.00024 6.125ZM7.91626 6.125C8.21541 6.125 8.45825 6.36784 8.45825 6.66699C8.45808 6.966 8.21531 7.20801 7.91626 7.20801C7.61736 7.20783 7.37542 6.96589 7.37524 6.66699C7.37524 6.36795 7.61726 6.12518 7.91626 6.125ZM10.8333 6.125C11.1324 6.125 11.3752 6.36784 11.3752 6.66699C11.3751 6.966 11.1323 7.20801 10.8333 7.20801C10.5342 7.20801 10.2914 6.966 10.2913 6.66699C10.2913 6.36784 10.5341 6.125 10.8333 6.125Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" stroke-linecap="square"/>`,
+  task: `<path d="M9.99992 2.0835V17.9168M7.08325 3.75016H2.08325V16.2502H7.08325M12.9166 16.2502H17.9166V3.75016H12.9166" stroke="currentColor" stroke-linecap="square"/>`,
+  checklist: `<path d="M9.58342 13.7498H17.0834M9.58342 6.24984H17.0834M2.91675 6.6665L4.58341 7.9165L7.08341 4.1665M2.91675 14.1665L4.58341 15.4165L7.08341 11.6665" stroke="currentColor" stroke-linecap="square"/>`,
+  console: `<path d="M3.75 5.4165L8.33333 9.99984L3.75 14.5832M10.4167 14.5832H16.25" stroke="currentColor" stroke-linecap="square"/>`,
+  "code-lines": `<path d="M2.08325 3.75H11.2499M14.5833 3.75H17.9166M2.08325 10L7.08325 10M10.4166 10L17.9166 10M2.08325 16.25L8.74992 16.25M12.0833 16.25L17.9166 16.25" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
+  "square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index 2bf3fd772..e2f6788ab 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -9,6 +9,9 @@
   --color-background-stronger: var(--background-stronger);
   --color-base: var(--base);
   --color-surface-base: var(--surface-base);
+  --color-surface-base-hover: var(--surface-base-hover);
+  --color-surface-base-active: var(--surface-base-active);
+  --color-surface-base-interactive-active: var(--surface-base-interactive-active);
   --color-base2: var(--base2);
   --color-base3: var(--base3);
   --color-surface-inset-base: var(--surface-inset-base);
@@ -45,9 +48,9 @@
   --color-surface-info-base: var(--surface-info-base);
   --color-surface-info-weak: var(--surface-info-weak);
   --color-surface-info-strong: var(--surface-info-strong);
+  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
   --color-surface-diff-skip-base: var(--surface-diff-skip-base);
   --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
-  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
   --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
   --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
   --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
@@ -72,8 +75,10 @@
   --color-text-weak: var(--text-weak);
   --color-text-weaker: var(--text-weaker);
   --color-text-strong: var(--text-strong);
+  --color-text-interactive-base: var(--text-interactive-base);
   --color-text-on-brand-base: var(--text-on-brand-base);
   --color-text-on-interactive-base: var(--text-on-interactive-base);
+  --color-text-on-interactive-weak: var(--text-on-interactive-weak);
   --color-text-on-success-base: var(--text-on-success-base);
   --color-text-on-warning-base: var(--text-on-warning-base);
   --color-text-on-info-base: var(--text-on-info-base);
@@ -91,6 +96,7 @@
   --color-text-on-brand-weaker: var(--text-on-brand-weaker);
   --color-text-on-brand-strong: var(--text-on-brand-strong);
   --color-button-secondary-base: var(--button-secondary-base);
+  --color-button-secondary-base-hover: var(--button-secondary-base-hover);
   --color-border-base: var(--border-base);
   --color-border-hover: var(--border-hover);
   --color-border-active: var(--border-active);
@@ -164,8 +170,6 @@
   --color-icon-on-brand-hover: var(--icon-on-brand-hover);
   --color-icon-on-brand-selected: var(--icon-on-brand-selected);
   --color-icon-on-interactive-base: var(--icon-on-interactive-base);
-  --color-icon-on-interactive-hover: var(--icon-on-interactive-hover);
-  --color-icon-on-interactive-selected: var(--icon-on-interactive-selected);
   --color-icon-agent-plan-base: var(--icon-agent-plan-base);
   --color-icon-agent-docs-base: var(--icon-agent-docs-base);
   --color-icon-agent-ask-base: var(--icon-agent-ask-base);
@@ -217,4 +221,10 @@
   --color-markdown-image-text: var(--markdown-image-text);
   --color-markdown-code-block: var(--markdown-code-block);
   --color-border-color: var(--border-color);
+  --color-border-weaker-base: var(--border-weaker-base);
+  --color-border-weaker-hover: var(--border-weaker-hover);
+  --color-border-weaker-active: var(--border-weaker-active);
+  --color-border-weaker-selected: var(--border-weaker-selected);
+  --color-border-weaker-disabled: var(--border-weaker-disabled);
+  --color-border-weaker-focus: var(--border-weaker-focus);
 }
\ No newline at end of file
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 5358f380d..0c22bae5a 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -66,11 +66,14 @@
   --background-weak: var(--smoke-light-3);
   --background-strong: var(--smoke-light-1);
   --background-stronger: #fcfcfc;
-  --surface-base: var(--smoke-light-alpha-2);
   --base: var(--smoke-light-alpha-2);
+  --surface-base: var(--smoke-light-alpha-2);
+  --surface-base-hover: #0500000f;
+  --surface-base-active: var(--smoke-light-alpha-3);
+  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
   --base2: var(--smoke-light-alpha-2);
   --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-3);
+  --surface-inset-base: var(--smoke-light-alpha-2);
   --surface-inset-base-hover: var(--smoke-light-alpha-3);
   --surface-inset-strong: #1f000017;
   --surface-inset-strong-hover: #1f000017;
@@ -105,7 +108,7 @@
   --surface-info-weak: var(--lilac-light-2);
   --surface-info-strong: var(--lilac-light-9);
   --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-skip-base: var(--smoke-light-3);
+  --surface-diff-skip-base: var(--smoke-light-2);
   --surface-diff-unchanged-base: #ffffff00;
   --surface-diff-hidden-weak: var(--blue-light-2);
   --surface-diff-hidden-weaker: var(--blue-light-1);
@@ -131,6 +134,7 @@
   --text-weak: var(--smoke-light-9);
   --text-weaker: var(--smoke-light-8);
   --text-strong: var(--smoke-light-12);
+  --text-interactive-base: var(--cobalt-light-9);
   --text-on-brand-base: var(--smoke-light-alpha-11);
   --text-on-interactive-base: var(--smoke-light-1);
   --text-on-interactive-weak: var(--smoke-dark-alpha-11);
@@ -151,7 +155,7 @@
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
   --button-secondary-base: #fdfcfc;
-  --button-secondary-base-hover: var(--smoke-light-2);
+  --button-secondary-base-hover: #faf9f9;
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -167,7 +171,7 @@
   --border-strong-focus: var(--smoke-light-alpha-7);
   --border-weak-hover: var(--smoke-light-alpha-6);
   --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-4);
+  --border-weak-selected: var(--cobalt-light-alpha-5);
   --border-weak-disabled: var(--smoke-light-alpha-6);
   --border-weak-focus: var(--smoke-light-alpha-7);
   --border-interactive-base: var(--cobalt-light-7);
@@ -228,7 +232,7 @@
   --icon-agent-plan-base: var(--purple-light-9);
   --icon-agent-docs-base: var(--amber-light-9);
   --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
+  --icon-agent-build-base: var(--cobalt-light-9);
   --icon-on-success-base: var(--apple-light-alpha-9);
   --icon-on-success-hover: var(--apple-light-alpha-10);
   --icon-on-success-selected: var(--apple-light-alpha-11);
@@ -276,6 +280,12 @@
   --markdown-image-text: #318795;
   --markdown-code-block: #1a1a1a;
   --border-color: #ffffff;
+  --border-weaker-base: var(--smoke-light-alpha-3);
+  --border-weaker-hover: var(--smoke-light-alpha-4);
+  --border-weaker-active: var(--smoke-light-alpha-6);
+  --border-weaker-selected: var(--cobalt-light-alpha-4);
+  --border-weaker-disabled: var(--smoke-light-alpha-2);
+  --border-weaker-focus: var(--smoke-light-alpha-6);
 
   @media (prefers-color-scheme: dark) {
     /* OC-1-Dark */
@@ -284,8 +294,11 @@
     --background-weak: #201d1d;
     --background-strong: #151313;
     --background-stronger: #201c1c;
-    --surface-base: var(--smoke-dark-alpha-3);
     --base: var(--smoke-dark-alpha-2);
+    --surface-base: var(--smoke-dark-alpha-2);
+    --surface-base-hover: #e0b7b716;
+    --surface-base-active: var(--smoke-dark-alpha-3);
+    --surface-base-interactive-active: var(--cobalt-dark-alpha-2);
     --base2: var(--smoke-dark-alpha-2);
     --base3: var(--smoke-dark-alpha-2);
     --surface-inset-base: #0e0b0b7f;
@@ -300,8 +313,8 @@
     --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
     --surface-raised-stronger: var(--smoke-dark-alpha-6);
     --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
-    --surface-weak: var(--smoke-dark-alpha-5);
-    --surface-weaker: var(--smoke-dark-alpha-6);
+    --surface-weak: var(--smoke-dark-alpha-4);
+    --surface-weaker: var(--smoke-dark-alpha-5);
     --surface-strong: var(--smoke-dark-alpha-7);
     --surface-raised-stronger-non-alpha: var(--smoke-dark-4);
     --surface-brand-base: var(--yuzu-light-9);
@@ -323,7 +336,7 @@
     --surface-info-weak: var(--lilac-light-2);
     --surface-info-strong: var(--lilac-light-9);
     --surface-diff-hidden-base: var(--blue-dark-2);
-    --surface-diff-skip-base: var(--smoke-dark-alpha-2);
+    --surface-diff-skip-base: var(--smoke-dark-alpha-1);
     --surface-diff-unchanged-base: var(--smoke-dark-1);
     --surface-diff-hidden-weak: var(--blue-dark-1);
     --surface-diff-hidden-weaker: var(--blue-dark-3);
@@ -349,6 +362,7 @@
     --text-weak: var(--smoke-dark-alpha-9);
     --text-weaker: var(--smoke-dark-alpha-8);
     --text-strong: var(--smoke-dark-alpha-12);
+    --text-interactive-base: var(--cobalt-dark-11);
     --text-on-brand-base: var(--smoke-dark-alpha-11);
     --text-on-interactive-base: var(--smoke-dark-12);
     --text-on-interactive-weak: var(--smoke-dark-alpha-11);
@@ -368,12 +382,12 @@
     --text-on-brand-weak: var(--smoke-dark-alpha-9);
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
-    --button-secondary-base: var(--smoke-dark-6);
-    --button-secondary-base-hover: var(--smoke-dark-5);
+    --button-secondary-base: var(--smoke-dark-4);
+    --button-secondary-base-hover: #2a2727;
     --border-base: var(--smoke-dark-alpha-7);
     --border-hover: var(--smoke-dark-alpha-8);
     --border-active: var(--smoke-dark-alpha-9);
-    --border-selected: var(--cobalt-dark-alpha-9);
+    --border-selected: var(--cobalt-dark-alpha-11);
     --border-disabled: var(--smoke-dark-alpha-8);
     --border-focus: var(--smoke-dark-alpha-9);
     --border-weak-base: var(--smoke-dark-alpha-6);
@@ -385,7 +399,7 @@
     --border-strong-focus: var(--smoke-dark-alpha-8);
     --border-weak-hover: var(--smoke-dark-alpha-7);
     --border-weak-active: var(--smoke-dark-alpha-8);
-    --border-weak-selected: var(--cobalt-dark-alpha-3);
+    --border-weak-selected: var(--cobalt-dark-alpha-6);
     --border-weak-disabled: var(--smoke-dark-alpha-6);
     --border-weak-focus: var(--smoke-dark-alpha-8);
     --border-interactive-base: var(--cobalt-light-7);
@@ -446,7 +460,7 @@
     --icon-agent-plan-base: var(--purple-dark-9);
     --icon-agent-docs-base: var(--amber-dark-9);
     --icon-agent-ask-base: var(--cyan-dark-9);
-    --icon-agent-build-base: var(--blue-dark-9);
+    --icon-agent-build-base: var(--cobalt-dark-11);
     --icon-on-success-base: var(--apple-dark-alpha-9);
     --icon-on-success-hover: var(--apple-dark-alpha-10);
     --icon-on-success-selected: var(--apple-dark-alpha-11);
@@ -494,5 +508,11 @@
     --markdown-image-text: #56b6c2;
     --markdown-code-block: #eeeeee;
     --border-color: #ffffff;
+    --border-weaker-base: var(--smoke-dark-alpha-3);
+    --border-weaker-hover: var(--smoke-dark-alpha-4);
+    --border-weaker-active: var(--smoke-dark-alpha-6);
+    --border-weaker-selected: var(--cobalt-dark-alpha-3);
+    --border-weaker-disabled: var(--smoke-dark-alpha-2);
+    --border-weaker-focus: var(--smoke-dark-alpha-6);
   }
 }