@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/components/icons/IconOmni.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	class="{classNames} hidden dark:inline"
+	width="1em"
+	height="1em"
+	viewBox="0 0 17 17"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.97736 12.1813C6.25011 12.516 6.57428 12.8946 6.98029 13.2741C5.89251 13.8066 4.44063 14.1305 2.34747 14.1306V12.7272C4.02144 12.7272 5.15855 12.5026 5.97736 12.1813ZM10.0789 6.00458C10.3483 6.3067 10.6247 6.56949 10.9725 6.79364C11.5911 7.19216 12.4914 7.49774 14.0526 7.49774V8.90204C12.4915 8.90204 11.5911 9.20765 10.9725 9.60614C10.6249 9.83013 10.3481 10.0924 10.0789 10.3942C9.78258 10.1597 9.52333 9.87047 9.21271 9.48798C9.18183 9.44996 9.14961 9.40984 9.11603 9.36786C9.42491 9.03403 9.77986 8.70638 10.2127 8.42743C10.3378 8.34683 10.4686 8.27118 10.6053 8.19989C10.4686 8.12858 10.3378 8.05297 10.2127 7.97235C9.77958 7.69322 9.42506 7.365 9.11603 7.03094C9.1494 6.98922 9.18201 6.9496 9.21271 6.9118C9.52349 6.52912 9.78237 6.2392 10.0789 6.00458ZM2.34747 2.26923C4.44032 2.26927 5.89256 2.59232 6.98029 3.12469C6.57429 3.50414 6.25012 3.8828 5.97736 4.21747C5.15858 3.89631 4.02115 3.67356 2.34747 3.67352V2.26923Z"
+		fill="url(#paint0_linear_3699_582)"
+	/>
+	<path
+		d="M14.052 3.67331C12.0512 3.67337 10.8161 3.98917 9.97647 4.41441C9.14382 4.83623 8.63688 5.39533 8.12318 6.02791C7.62178 6.64535 7.06413 7.40735 6.18741 7.97235C6.06225 8.053 5.93137 8.12889 5.79462 8.20022C5.93144 8.27158 6.06219 8.34739 6.18741 8.42808C7.06422 8.99314 7.62174 9.75505 8.12318 10.3725C8.6369 11.0051 9.14374 11.5642 9.97647 11.986C10.8161 12.4113 12.0512 12.7271 14.052 12.7271V14.1312C11.9098 14.1311 10.4387 13.7932 9.34279 13.2382C8.24007 12.6797 7.58149 11.9313 7.03377 11.2569C6.47365 10.5671 6.07238 10.0218 5.42786 9.60647C4.80925 9.20786 3.90875 8.90226 2.34735 8.90226V7.49818C3.90859 7.49818 4.80926 7.19251 5.42786 6.79397C6.07232 6.37865 6.47373 5.83323 7.03377 5.14358C7.58147 4.46911 8.24014 3.72078 9.34279 3.16224C10.4387 2.60722 11.9098 2.26929 14.052 2.26923V3.67331Z"
+		fill="url(#paint1_linear_3699_582)"
+	/>
+	<defs>
+		<linearGradient
+			id="paint0_linear_3699_582"
+			x1="10.2846"
+			y1="8.06294"
+			x2="-0.714687"
+			y2="8.06294"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="white" />
+			<stop offset="1" stop-color="white" stop-opacity="0" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_3699_582"
+			x1="1.34749"
+			y1="8.06326"
+			x2="14.273"
+			y2="8.06326"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="white" stop-opacity="0" />
+			<stop offset="1" stop-color="white" />
+		</linearGradient>
+	</defs>
+</svg>
+<svg
+	class="{classNames} inline dark:hidden"
+	width="1em"
+	height="1em"
+	viewBox="0 0 17 17"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.97723 12.3813C6.24999 12.716 6.57417 13.0946 6.98016 13.4741C5.89247 14.0066 4.44119 14.3305 2.34833 14.3306V12.9272C4.02198 12.9272 5.1585 12.7025 5.97723 12.3813ZM10.0788 6.20459C10.3481 6.50673 10.6245 6.76948 10.9724 6.99365C11.5909 7.39219 12.4912 7.69774 14.0524 7.69775V9.10205C12.4913 9.10207 11.5909 9.40765 10.9724 9.80615C10.6248 10.0302 10.348 10.2924 10.0788 10.5942C9.78249 10.3597 9.52319 10.0704 9.21259 9.68799C9.18171 9.64997 9.14949 9.60986 9.11591 9.56787C9.42481 9.23402 9.77972 8.9064 10.2126 8.62744C10.3377 8.54682 10.4685 8.47121 10.6052 8.3999C10.4685 8.32859 10.3377 8.25299 10.2126 8.17236C9.77943 7.89322 9.42495 7.56504 9.11591 7.23096C9.1493 7.18921 9.18187 7.14963 9.21259 7.11182C9.52337 6.72913 9.78226 6.43921 10.0788 6.20459ZM2.34833 2.46924C4.44088 2.46933 5.89252 2.7924 6.98016 3.32471C6.57418 3.70415 6.25 4.08282 5.97723 4.41748C5.15853 4.09637 4.0217 3.87361 2.34833 3.87354V2.46924Z"
+		fill="url(#paint0_linear_3699_575)"
+	/>
+	<path
+		d="M14.052 3.87332C12.0512 3.87338 10.8161 4.18918 9.97647 4.61442C9.14382 5.03624 8.63688 5.59534 8.12318 6.22792C7.62178 6.84536 7.06413 7.60736 6.18741 8.17236C6.06225 8.25301 5.93137 8.3289 5.79462 8.40023C5.93144 8.47159 6.06219 8.5474 6.18741 8.62809C7.06422 9.19316 7.62174 9.95506 8.12318 10.5725C8.6369 11.2051 9.14374 11.7642 9.97647 12.186C10.8161 12.6113 12.0512 12.9271 14.052 12.9271V14.3312C11.9098 14.3312 10.4387 13.9932 9.34279 13.4382C8.24007 12.8797 7.58149 12.1313 7.03377 11.4569C6.47365 10.7671 6.07238 10.2218 5.42786 9.80648C4.80925 9.40788 3.90875 9.10227 2.34735 9.10227V7.69819C3.90859 7.69819 4.80926 7.39252 5.42786 6.99398C6.07232 6.57866 6.47373 6.03324 7.03377 5.34359C7.58147 4.66913 8.24014 3.92079 9.34279 3.36225C10.4387 2.80724 11.9098 2.4693 14.052 2.46924V3.87332Z"
+		fill="url(#paint1_linear_3699_575)"
+	/>
+	<defs>
+		<linearGradient
+			id="paint0_linear_3699_575"
+			x1="10.2848"
+			y1="8.26295"
+			x2="-0.713577"
+			y2="8.26295"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop />
+			<stop offset="1" stop-opacity="0" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_3699_575"
+			x1="1.34749"
+			y1="8.26327"
+			x2="14.273"
+			y2="8.26327"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-opacity="0" />
+			<stop offset="1" />
+		</linearGradient>
+	</defs>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconPaperclip.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	fill="currentColor"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+	><path
+		d="M19.02 5.57a5.77 5.77 0 1 1 8.56 7.74L16.6 25.45l-.02.01v.01A7.87 7.87 0 0 1 4.92 14.9L12.95 6A1.18 1.18 0 0 1 14.7 7.6l-8.03 8.87a5.51 5.51 0 1 0 8.19 7.4l10.97-12.14a3.41 3.41 0 1 0-5.06-4.58l-9.32 10.3a1.27 1.27 0 1 0 1.88 1.7l6.28-6.94a1.18 1.18 0 0 1 1.75 1.59l-6.28 6.94a3.63 3.63 0 0 1-5.41-4.83l.02-.02 9.33-10.32Z"
+		fill="currentColor"
+	/></svg
+>

package/src/ruvocal/src/lib/components/icons/IconPro.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+
+	// I've no idea wht a fixed id doesnt work...
+	const gradientId = `gradient-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<svg
+	class="text-gray-500 {classNames}"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	><defs
+		><linearGradient
+			id={gradientId}
+			x1="3.371"
+			y1="3.43"
+			x2="8.141"
+			y2="8.9"
+			gradientUnits="userSpaceOnUse"
+			><stop stop-color="#FF0789" /><stop offset=".63" stop-color="#21DE75" /><stop
+				offset="1"
+				stop-color="#FF8D00"
+			/></linearGradient
+		></defs
+	><path
+		d="M6.481 1.26c0 1.55.67 2.58 1.5 3.24.86.68 1.9 1 2.58 1.07v.86a5.3 5.3 0 0 0-2.57 1.07 3.95 3.95 0 0 0-1.51 3.24h-.96c0-1.55-.67-2.58-1.5-3.24a5.3 5.3 0 0 0-2.58-1.07v-.86a5.3 5.3 0 0 0 2.57-1.07 3.95 3.95 0 0 0 1.51-3.24h.96Z"
+		fill="url(#{gradientId})"
+	/></svg
+>

package/src/ruvocal/src/lib/components/icons/IconShare.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 12 12"
+>
+	<path
+		d="M10.4646 6.85139C10.7605 6.85139 11 7.09093 11 7.38679V7.78965C11 8.35479 11.0013 8.82459 10.9581 9.20053C10.9136 9.58762 10.8165 9.94247 10.5745 10.2495C10.478 10.3719 10.3672 10.4826 10.2448 10.5791C9.93774 10.8212 9.58211 10.9183 9.19497 10.9628C8.81915 11.006 8.34979 11.0055 7.78496 11.0055H4.21503C3.6502 11.0055 3.18083 11.006 2.80502 10.9628C2.41788 10.9183 2.06224 10.8212 1.75515 10.5791C1.63274 10.4826 1.52198 10.3718 1.42554 10.2495C1.18354 9.94248 1.08635 9.58761 1.04186 9.20053C0.998661 8.82458 1 8.35479 1 7.78965V7.38679C1.00003 7.09093 1.23954 6.85139 1.53541 6.85139C1.83128 6.85139 2.07078 7.09093 2.07081 7.38679V7.78965C2.07081 8.38023 2.07202 8.77788 2.10656 9.07845C2.13978 9.36728 2.19822 9.49857 2.26701 9.58595C2.31143 9.64228 2.3625 9.69333 2.41873 9.73767C2.50614 9.80657 2.63774 9.86487 2.9271 9.89812C3.2276 9.93264 3.62467 9.93387 4.21503 9.93387H7.78496C8.37532 9.93387 8.77238 9.93264 9.07289 9.89812C9.36227 9.86487 9.49384 9.80658 9.58126 9.73767C9.63752 9.69329 9.68862 9.64222 9.73298 9.58595C9.80176 9.49856 9.86021 9.3673 9.89343 9.07845C9.92796 8.77788 9.92918 8.38023 9.92918 7.78965V7.38679C9.92921 7.09093 10.1687 6.85139 10.4646 6.85139ZM6.01046 1.00034C6.15239 1.0004 6.2885 1.05697 6.3889 1.15729L9.36849 4.13601C9.57767 4.34519 9.57759 4.68454 9.36849 4.89377C9.15925 5.10283 8.8199 5.10294 8.61073 4.89377L6.54586 2.8289V8.02945C6.54586 8.32526 6.30624 8.56559 6.01046 8.56572C5.71472 8.56555 5.47418 8.32523 5.47418 8.02945V2.8289L3.40931 4.89377C3.20011 5.10268 2.86157 5.10279 2.65243 4.89377C2.44341 4.68459 2.44341 4.34519 2.65243 4.13601L5.63114 1.15729C5.73154 1.0569 5.86848 1.00042 6.01046 1.00034Z"
+		fill="currentColor"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconSun.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	width="1em"
+	height="1em"
+	viewBox="0 0 49 49"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+>
+	<mask
+		id="a"
+		style="mask-type:alpha"
+		maskUnits="userSpaceOnUse"
+		x="2"
+		y="2"
+		width="45"
+		height="45"
+	>
+		<path
+			d="M24.501 39c.438 0 .784.143 1.071.43.288.287.43.633.428 1.068V44.5c0 .44-.144.787-.43 1.073-.285.285-.63.428-1.069.427H24.5c-.44 0-.786-.143-1.07-.428-.25-.25-.391-.548-.423-.913L23 44.5V40.5c0-.44.143-.786.429-1.07.286-.285.632-.429 1.072-.43Zm11.26-4.673c.43.013.787.157 1.093.435l2.147 2.096.005.006.006.005c.287.263.426.588.414 1.017a1.66 1.66 0 0 1-.433 1.112c-.305.305-.66.453-1.093.453-.433 0-.764-.147-1.032-.439l-.005-.006-.006-.005-2.093-2.144a1.537 1.537 0 0 1-.414-1.08c0-.426.136-.755.404-1.024l.117-.117c.245-.22.533-.32.89-.31Zm-22.537.023c.425 0 .755.137 1.023.404l.117.117c.22.246.322.534.312.891-.013.43-.157.787-.439 1.094L12.143 39l-.006.005-.005.006c-.264.288-.589.426-1.018.414a1.66 1.66 0 0 1-1.113-.433 1.476 1.476 0 0 1-.451-1.092c0-.434.147-.765.438-1.033l.006-.004.005-.006 2.146-2.096a1.537 1.537 0 0 1 1.079-.412ZM24.5 15c2.632 0 4.863.924 6.723 2.78 1.858 1.857 2.78 4.087 2.777 6.72-.004 2.633-.927 4.865-2.78 6.723-1.852 1.857-4.082 2.78-6.719 2.777H24.5c-2.634 0-4.866-.922-6.72-2.779-1.856-1.857-2.779-4.087-2.78-6.72-.001-2.634.921-4.865 2.78-6.721C19.636 15.923 21.867 15 24.5 15Zm-20 8h4c.44 0 .786.144 1.072.43.286.286.429.631.428 1.07-.001.439-.145.786-.43 1.074-.284.285-.629.428-1.068.426H4.5c-.44 0-.786-.143-1.07-.428-.285-.287-.429-.633-.43-1.073-.001-.438.142-.783.429-1.069.288-.287.634-.43 1.071-.43Zm36 0h4c.44 0 .786.144 1.072.43.286.286.429.631.428 1.07-.001.439-.145.786-.43 1.074-.284.285-.629.428-1.068.426H40.5c-.44 0-.786-.143-1.07-.428-.285-.287-.429-.633-.43-1.073-.001-.438.142-.783.429-1.069.288-.287.634-.43 1.071-.43ZM11.1 9.55c.433 0 .764.147 1.032.439l.005.006.006.004 2.092 2.144c.281.308.415.654.415 1.058 0 .405-.135.752-.419 1.061a1.216 1.216 0 0 1-.99.414 1.635 1.635 0 0 1-1.098-.44l-2.144-2.093-.005-.006-.006-.005-.101-.102c-.22-.245-.323-.54-.313-.915a1.66 1.66 0 0 1 .435-1.116c.305-.302.659-.449 1.09-.449Zm26.786.025c.445.012.808.157 1.112.431.305.306.452.66.452 1.094 0 .434-.147.765-.438 1.032l-.006.005-.005.006-2.145 2.093c-.308.28-.653.415-1.056.415-.406 0-.752-.136-.062-.42a1.216 1.216 0 0 1-.414-.99c.013-.428.157-.787.44-1.098l2.093-2.144.006-.004.005-.006c.264-.288.589-.426 1.018-.414ZM24.5 3c.438 0 .784.143 1.071.43.288.287.43.633.428 1.068V8.5c0 .44-.144.787-.43 1.073-.285.285-.63.428-1.069.427H24.5c-.44 0-.786-.143-1.07-.428-.25-.25-.391-.548-.423-.912L23 8.5v-4c0-.44.143-.786.429-1.07.286-.285.632-.429 1.072-.43Z"
+			fill="#E9E9E9"
+			stroke="#000"
+		/>
+	</mask>
+	<g mask="url(#a)">
+		<path
+			d="M24.5 34.5c-2.767 0-5.125-.975-7.074-2.926-1.95-1.95-2.925-4.308-2.926-7.074-.001-2.765.974-5.123 2.926-7.074 1.952-1.95 4.31-2.926 7.074-2.926 2.764 0 5.123.976 7.076 2.926 1.953 1.951 2.928 4.309 2.924 7.074-.004 2.766-.98 5.124-2.926 7.076-1.947 1.952-4.305 2.927-7.074 2.924Zm-20-8c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424-.001-.565.19-1.04.576-1.424.385-.384.86-.576 1.424-.576h4c.567 0 1.042.192 1.426.576.384.384.575.859.574 1.424-.001.566-.193 1.041-.576 1.426-.383.386-.857.577-1.424.574h-4Zm36 0c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424-.001-.565.19-1.04.576-1.424.385-.384.86-.576 1.424-.576h4c.567 0 1.042.192 1.426.576.384.384.575.859.574 1.424-.001.566-.193 1.041-.576 1.426-.383.386-.857.577-1.424.574h-4Zm-16-16c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424v-4c0-.566.192-1.041.576-1.424.384-.382.859-.574 1.424-.576a1.93 1.93 0 0 1 1.426.576c.385.386.577.86.574 1.424v4c0 .567-.192 1.042-.576 1.426-.384.384-.859.576-1.424.574Zm0 36c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424v-4c0-.566.192-1.041.576-1.424.384-.382.859-.574 1.424-.576a1.93 1.93 0 0 1 1.426.576c.385.386.577.86.574 1.424v4c0 .567-.192 1.042-.576 1.426-.384.384-.859.576-1.424.574ZM11.8 14.6l-2.15-2.1c-.4-.366-.592-.833-.576-1.4a2.16 2.16 0 0 1 .576-1.45c.4-.4.883-.6 1.45-.6s1.033.2 1.4.6l2.1 2.15c.367.4.55.867.55 1.4 0 .534-.183 1-.55 1.4-.367.4-.825.592-1.374.576A2.137 2.137 0 0 1 11.8 14.6Zm24.7 24.75-2.1-2.15c-.367-.4-.55-.874-.55-1.424 0-.549.183-1.008.55-1.376a1.71 1.71 0 0 1 1.376-.574 2.14 2.14 0 0 1 1.424.574l2.15 2.1c.4.367.592.834.576 1.4a2.16 2.16 0 0 1-.576 1.45c-.4.4-.883.6-1.45.6s-1.033-.2-1.4-.6ZM34.4 14.6a1.714 1.714 0 0 1-.576-1.374c.016-.549.208-1.024.576-1.426l2.1-2.15c.367-.4.833-.592 1.4-.576a2.16 2.16 0 0 1 1.45.576c.4.4.6.884.6 1.45 0 .567-.2 1.034-.6 1.4l-2.15 2.1c-.4.367-.867.55-1.4.55-.533 0-1-.183-1.4-.55ZM9.65 39.35c-.4-.4-.6-.883-.6-1.45 0-.566.2-1.033.6-1.4l2.15-2.1c.4-.366.875-.55 1.424-.55.55 0 1.008.184 1.376.55.4.367.592.826.576 1.376A2.124 2.124 0 0 1 14.6 37.2l-2.1 2.15c-.367.4-.833.592-1.4.576a2.16 2.16 0 0 1-1.45-.576Z"
+			fill="#fff"
+		/>
+		<path
+			d="M24.5 34.5c-2.767 0-5.125-.975-7.074-2.926-1.95-1.95-2.925-4.308-2.926-7.074-.001-2.765.974-5.123 2.926-7.074 1.952-1.95 4.31-2.926 7.074-2.926 2.764 0 5.123.976 7.076 2.926 1.953 1.951 2.928 4.309 2.924 7.074-.004 2.766-.98 5.124-2.926 7.076-1.947 1.952-4.305 2.927-7.074 2.924Zm-20-8c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424-.001-.565.19-1.04.576-1.424.385-.384.86-.576 1.424-.576h4c.567 0 1.042.192 1.426.576.384.384.575.859.574 1.424-.001.566-.193 1.041-.576 1.426-.383.386-.857.577-1.424.574h-4Zm36 0c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424-.001-.565.19-1.04.576-1.424.385-.384.86-.576 1.424-.576h4c.567 0 1.042.192 1.426.576.384.384.575.859.574 1.424-.001.566-.193 1.041-.576 1.426-.383.386-.857.577-1.424.574h-4Zm-16-16c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424v-4c0-.566.192-1.041.576-1.424.384-.382.859-.574 1.424-.576a1.93 1.93 0 0 1 1.426.576c.385.386.577.86.574 1.424v4c0 .567-.192 1.042-.576 1.426-.384.384-.859.576-1.424.574Zm0 36c-.567 0-1.041-.192-1.424-.576-.383-.384-.575-.858-.576-1.424v-4c0-.566.192-1.041.576-1.424.384-.382.859-.574 1.424-.576a1.93 1.93 0 0 1 1.426.576c.385.386.577.86.574 1.424v4c0 .567-.192 1.042-.576 1.426-.384.384-.859.576-1.424.574ZM11.8 14.6l-2.15-2.1c-.4-.366-.592-.833-.576-1.4a2.16 2.16 0 0 1 .576-1.45c.4-.4.883-.6 1.45-.6s1.033.2 1.4.6l2.1 2.15c.367.4.55.867.55 1.4 0 .534-.183 1-.55 1.4-.367.4-.825.592-1.374.576A2.137 2.137 0 0 1 11.8 14.6Zm24.7 24.75-2.1-2.15c-.367-.4-.55-.874-.55-1.424 0-.549.183-1.008.55-1.376a1.71 1.71 0 0 1 1.376-.574 2.14 2.14 0 0 1 1.424.574l2.15 2.1c.4.367.592.834.576 1.4a2.16 2.16 0 0 1-.576 1.45c-.4.4-.883.6-1.45.6s-1.033-.2-1.4-.6ZM34.4 14.6a1.714 1.714 0 0 1-.576-1.374c.016-.549.208-1.024.576-1.426l2.1-2.15c.367-.4.833-.592 1.4-.576a2.16 2.16 0 0 1 1.45.576c.4.4.6.884.6 1.45 0 .567-.2 1.034-.6 1.4l-2.15 2.1c-.4.367-.867.55-1.4.55-.533 0-1-.183-1.4-.55ZM9.65 39.35c-.4-.4-.6-.883-.6-1.45 0-.566.2-1.033.6-1.4l2.15-2.1c.4-.366.875-.55 1.424-.55.55 0 1.008.184 1.376.55.4.367.592.826.576 1.376A2.124 2.124 0 0 1 14.6 37.2l-2.1 2.15c-.367.4-.833.592-1.4.576a2.16 2.16 0 0 1-1.45-.576Z"
+			fill="url(#b)"
+		/>
+		<g filter="url(#c)">
+			<path
+				d="M24.306 41.34c0 .522.178.962.532 1.317.354.355.793.532 1.317.532.12 0 .234-.01.345-.028v1.34c0 .566-.192 1.042-.576 1.426-.384.383-.859.575-1.424.574-.567 0-1.041-.192-1.424-.576-.382-.384-.575-.859-.576-1.424v-4c0-.567.192-1.042.576-1.425.34-.338.75-.527 1.23-.567v2.83Zm10.63-7.343c.084.214.208.412.374.593l1.942 1.988c.339.37.771.555 1.295.555.402 0 .759-.111 1.07-.33.218.311.32.677.309 1.097a2.161 2.161 0 0 1-.575 1.45c-.4.4-.884.6-1.45.6-.567 0-1.034-.2-1.401-.6l-2.1-2.15c-.366-.4-.55-.875-.55-1.424 0-.549.184-1.008.55-1.376.16-.175.34-.308.536-.403Zm-23.14.546c-.369.339-.554.77-.554 1.295 0 .524.185.97.555 1.34.37.34.817.518 1.34.533.525.015.957-.163 1.296-.532l.56-.575a2.161 2.161 0 0 1-.392.596L12.5 39.35c-.367.4-.833.593-1.4.577a2.162 2.162 0 0 1-1.45-.577c-.4-.4-.6-.883-.6-1.45 0-.566.2-1.032.6-1.4l2.15-2.1a2.12 2.12 0 0 1 .49-.339l-.493.482ZM5.84 22.5a2.07 2.07 0 0 0-.028.344 1.8 1.8 0 0 0 .532 1.317c.354.355.793.532 1.317.532h2.831c-.04.481-.229.892-.567 1.233-.383.385-.857.576-1.424.574h-4c-.567 0-1.041-.192-1.424-.576-.382-.384-.575-.859-.576-1.424-.001-.566.19-1.04.576-1.425.385-.384.86-.575 1.424-.575h1.339Zm34.401.015a1.962 1.962 0 0 0-.076.562c.001.523.179.961.532 1.316.354.356.794.534 1.318.534h3.698c.28 0 .536-.052.768-.154a1.916 1.916 0 0 1-.556 1.153c-.383.385-.857.576-1.424.574h-4c-.566 0-1.041-.192-1.424-.576-.382-.384-.575-.859-.576-1.424-.001-.566.19-1.04.576-1.425a1.907 1.907 0 0 1 1.164-.56ZM11.1 9.052c.236 0 .455.036.656.105-.328.366-.5.805-.514 1.32-.015.523.163.955.533 1.294l1.988 1.942c.32.293.69.464 1.111.515-.076.13-.165.255-.273.373-.367.4-.825.593-1.374.577A2.138 2.138 0 0 1 11.8 14.6l-2.15-2.1c-.4-.367-.592-.834-.576-1.4.016-.567.208-1.05.576-1.45.4-.4.884-.6 1.45-.6Zm24.835 1.563c-.34.371-.518.811-.533 1.32-.014.507.163.931.533 1.27.37.339.801.508 1.294.508.494 0 .925-.169 1.295-.508l1.197-1.17c-.095.17-.217.326-.37.467l-2.15 2.1c-.4.366-.868.55-1.401.55s-1-.184-1.4-.55a1.714 1.714 0 0 1-.576-1.375c.016-.549.208-1.024.576-1.425l2.1-2.15c.25-.273.546-.447.889-.526l-1.454 1.49ZM24.5 2.501c.31 0 .592.058.848.174a1.805 1.805 0 0 0-.51.358c-.355.354-.532.793-.532 1.317V8.05c0 .523.178.962.532 1.317.308.31.681.484 1.119.524l-.033.037c-.384.383-.859.575-1.424.574-.567 0-1.041-.192-1.424-.576-.382-.384-.575-.859-.576-1.424v-4c0-.567.192-1.042.576-1.425.384-.382.859-.574 1.424-.575Z"
+				fill="#89969F"
+			/>
+		</g>
+		<g filter="url(#d)">
+			<path
+				d="M21.153 15.044a9.752 9.752 0 0 0-1.54 1.26c-1.805 1.803-2.706 3.984-2.705 6.541.002 2.557.903 4.738 2.705 6.542 1.803 1.804 3.984 2.705 6.542 2.705 2.561.003 4.742-.899 6.542-2.704.485-.486.902-1 1.256-1.54-.479 1.375-1.27 2.618-2.379 3.729-1.946 1.952-4.305 2.926-7.074 2.924-2.767 0-5.125-.976-7.074-2.926-1.95-1.95-2.925-4.31-2.926-7.075-.001-2.765.974-5.123 2.926-7.074 1.11-1.11 2.354-1.903 3.727-2.382Z"
+				fill="#30363A"
+			/>
+		</g>
+	</g>
+	<defs>
+		<filter
+			id="c"
+			x="-3.79"
+			y="-3.789"
+			width="56.56"
+			height="56.58"
+			filterUnits="userSpaceOnUse"
+			color-interpolation-filters="sRGB"
+		>
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+			<feGaussianBlur stdDeviation="1.021" result="effect1_foregroundBlur_3607_89" />
+		</filter>
+		<filter
+			id="d"
+			x="7.87"
+			y="8.414"
+			width="32.714"
+			height="32.717"
+			filterUnits="userSpaceOnUse"
+			color-interpolation-filters="sRGB"
+		>
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+			<feGaussianBlur stdDeviation="3.315" result="effect1_foregroundBlur_3607_89" />
+		</filter>
+		<radialGradient
+			id="b"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="matrix(-9 11 -11 -9 29.905 18.58)"
+		>
+			<stop stop-color="#fff" />
+			<stop offset="1" stop-color="#F8FAFC" />
+		</radialGradient>
+	</defs>
+</svg>

package/src/ruvocal/src/lib/components/icons/Logo.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	const publicConfig = usePublicConfig();
+
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	width="32"
+	height="32"
+	viewBox="0 0 32 32"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class="logo {classNames}"
+	aria-label="{publicConfig.PUBLIC_APP_NAME} logo"
+	role="img"
+>
+	<defs>
+		<linearGradient id="wave-grad-1" x1="0" y1="0" x2="1" y2="0">
+			<stop offset="0%" stop-color="#3b82f6" />
+			<stop offset="100%" stop-color="#06b6d4" />
+		</linearGradient>
+		<linearGradient id="wave-grad-2" x1="0" y1="0" x2="1" y2="0">
+			<stop offset="0%" stop-color="#818cf8" />
+			<stop offset="100%" stop-color="#a78bfa" />
+		</linearGradient>
+		<linearGradient id="wave-grad-3" x1="0" y1="0" x2="1" y2="0">
+			<stop offset="0%" stop-color="#06b6d4" />
+			<stop offset="100%" stop-color="#2dd4bf" />
+		</linearGradient>
+	</defs>
+
+	<!-- Flow waves -->
+	<path class="wave w1" d="M2 14 Q8 9, 16 14 Q24 19, 30 14" stroke="url(#wave-grad-1)" stroke-width="2" stroke-linecap="round" fill="none" />
+	<path class="wave w2" d="M2 18 Q8 13, 16 18 Q24 23, 30 18" stroke="url(#wave-grad-2)" stroke-width="1.5" stroke-linecap="round" fill="none" />
+	<path class="wave w3" d="M2 22 Q8 17, 16 22 Q24 27, 30 22" stroke="url(#wave-grad-3)" stroke-width="1" stroke-linecap="round" fill="none" />
+
+</svg>
+
+<style>
+	.wave {
+		transform-origin: center;
+	}
+	.w1 {
+		animation: wave-shift 3s ease-in-out infinite;
+	}
+	.w2 {
+		animation: wave-shift 3s ease-in-out infinite 0.5s;
+		opacity: 0.6;
+	}
+	.w3 {
+		animation: wave-shift 3s ease-in-out infinite 1s;
+		opacity: 0.4;
+	}
+
+	@keyframes wave-shift {
+		0%, 100% { transform: translateX(0); }
+		50% { transform: translateX(2px); }
+	}
+
+	:global(.dark) .w2 { opacity: 0.7; }
+	:global(.dark) .w3 { opacity: 0.5; }
+</style>

package/src/ruvocal/src/lib/components/icons/LogoHuggingFaceBorderless.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 95 88"
+>
+	<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />
+	<path
+		fill="#FF9D0B"
+		d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"
+	/>
+	<path
+		fill="#3A3B45"
+		d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32ZM46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+	/>
+	<mask id="a" width="27" height="16" x="33" y="41" maskUnits="userSpaceOnUse">
+		<path
+			fill="#fff"
+			d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+		/>
+	</mask>
+	<g mask="url(#a)">
+		<path
+			fill="#F94040"
+			d="M47.21 66.5a8.67 8.67 0 0 0 2.65-16.94c-.84-.26-1.73 2.6-2.65 2.6-.86 0-1.7-2.88-2.48-2.65a8.68 8.68 0 0 0 2.48 16.99Z"
+		/>
+	</g>
+	<path
+		fill="#FF9D0B"
+		d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/mcp/AddServerForm.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+	import type { KeyValuePair } from "$lib/types/Tool";
+	import {
+		validateMcpServerUrl,
+		validateHeader,
+		isSensitiveHeader,
+	} from "$lib/utils/mcpValidation";
+	import IconEye from "~icons/carbon/view";
+	import IconEyeOff from "~icons/carbon/view-off";
+	import IconTrash from "~icons/carbon/trash-can";
+	import IconAdd from "~icons/carbon/add";
+	import IconWarning from "~icons/carbon/warning";
+
+	interface Props {
+		onsubmit: (server: { name: string; url: string; headers?: KeyValuePair[] }) => void;
+		oncancel: () => void;
+		initialName?: string;
+		initialUrl?: string;
+		initialHeaders?: KeyValuePair[];
+		submitLabel?: string;
+	}
+
+	let {
+		onsubmit,
+		oncancel,
+		initialName = "",
+		initialUrl = "",
+		initialHeaders = [],
+		submitLabel = "Add Server",
+	}: Props = $props();
+
+	let name = $state(initialName);
+	let url = $state(initialUrl);
+	let headers = $state<KeyValuePair[]>(initialHeaders.length > 0 ? [...initialHeaders] : []);
+	let showHeaderValues = $state<Record<number, boolean>>({});
+	let error = $state<string | null>(null);
+
+	function addHeader() {
+		headers = [...headers, { key: "", value: "" }];
+	}
+
+	function removeHeader(index: number) {
+		headers = headers.filter((_, i) => i !== index);
+		delete showHeaderValues[index];
+	}
+
+	function toggleHeaderVisibility(index: number) {
+		showHeaderValues = {
+			...showHeaderValues,
+			[index]: !showHeaderValues[index],
+		};
+	}
+
+	function validate(): boolean {
+		if (!name.trim()) {
+			error = "Server name is required";
+			return false;
+		}
+
+		if (!url.trim()) {
+			error = "Server URL is required";
+			return false;
+		}
+
+		const urlValidation = validateMcpServerUrl(url);
+		if (!urlValidation) {
+			error = "Invalid URL.";
+			return false;
+		}
+
+		// Validate headers
+		for (let i = 0; i < headers.length; i++) {
+			const header = headers[i];
+			if (header.key.trim() || header.value.trim()) {
+				const headerError = validateHeader(header.key, header.value);
+				if (headerError) {
+					error = `Header ${i + 1}: ${headerError}`;
+					return false;
+				}
+			}
+		}
+
+		error = null;
+		return true;
+	}
+
+	function handleSubmit() {
+		if (!validate()) return;
+
+		// Filter out empty headers
+		const filteredHeaders = headers.filter((h) => h.key.trim() && h.value.trim());
+
+		onsubmit({
+			name: name.trim(),
+			url: url.trim(),
+			headers: filteredHeaders.length > 0 ? filteredHeaders : undefined,
+		});
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- Server Name -->
+	<div>
+		<label
+			for="server-name"
+			class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+		>
+			Server Name <span class="text-red-500">*</span>
+		</label>
+		<input
+			id="server-name"
+			type="text"
+			bind:value={name}
+			placeholder="My MCP Server"
+			class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+		/>
+	</div>
+
+	<!-- Server URL -->
+	<div>
+		<label for="server-url" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+			Server URL <span class="text-red-500">*</span>
+		</label>
+		<input
+			id="server-url"
+			type="url"
+			bind:value={url}
+			placeholder="https://example.com/mcp"
+			class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+		/>
+		<!-- <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+			Only HTTPS is supported (e.g., https://localhost:5101).
+		</p> -->
+	</div>
+
+	<!-- HTTP Headers -->
+	<details class="rounded-lg border border-gray-200 dark:border-gray-700">
+		<summary class="cursor-pointer px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+			HTTP Headers (Optional)
+		</summary>
+		<div class="space-y-2 border-t border-gray-200 p-4 dark:border-gray-700">
+			{#if headers.length === 0}
+				<p class="text-sm text-gray-500 dark:text-gray-400">No headers configured</p>
+			{:else}
+				{#each headers as header, i}
+					<div class="flex gap-2">
+						<input
+							bind:value={header.key}
+							placeholder="Header name (e.g., Authorization)"
+							class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+						/>
+						<div class="relative flex-1">
+							<input
+								bind:value={header.value}
+								type={showHeaderValues[i] ? "text" : "password"}
+								placeholder="Value"
+								class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 pr-10 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+							/>
+							{#if isSensitiveHeader(header.key)}
+								<button
+									type="button"
+									onclick={() => toggleHeaderVisibility(i)}
+									class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+									title={showHeaderValues[i] ? "Hide value" : "Show value"}
+								>
+									{#if showHeaderValues[i]}
+										<IconEyeOff class="size-4" />
+									{:else}
+										<IconEye class="size-4" />
+									{/if}
+								</button>
+							{/if}
+						</div>
+						<button
+							type="button"
+							onclick={() => removeHeader(i)}
+							class="rounded-lg bg-red-100 p-2 text-red-600 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+							title="Remove header"
+						>
+							<IconTrash class="size-4" />
+						</button>
+					</div>
+				{/each}
+			{/if}
+
+			<button
+				type="button"
+				onclick={addHeader}
+				class="flex items-center gap-1.5 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+			>
+				<IconAdd class="size-4" />
+				Add Header
+			</button>
+
+			<p class="text-xs text-gray-500 dark:text-gray-400">
+				Common examples:<br />
+				• Bearer token:
+				<code class="rounded bg-gray-100 px-1 dark:bg-gray-700"
+					>Authorization: Bearer YOUR_TOKEN</code
+				><br />
+				• API key:
+				<code class="rounded bg-gray-100 px-1 dark:bg-gray-700">X-API-Key: YOUR_KEY</code>
+			</p>
+		</div>
+	</details>
+
+	<!-- Security warning about custom MCP servers -->
+	<div
+		class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-amber-900 dark:border-yellow-900/40 dark:bg-yellow-900/20 dark:text-yellow-100"
+	>
+		<div class="flex items-start gap-3">
+			<IconWarning class="mt-0.5 size-4 flex-none text-amber-600 dark:text-yellow-300" />
+			<div class="text-sm leading-5">
+				<p class="font-medium">Be careful with custom MCP servers.</p>
+				<p class="mt-1 text-[13px] text-amber-800 dark:text-yellow-100/90">
+					They receive your requests (including conversation context and any headers you add) and
+					can run powerful tools on your behalf. Only add servers you trust and review their source.
+					Never share confidental informations.
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<!-- Error message -->
+	{#if error}
+		<div
+			class="rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20"
+		>
+			<p class="text-sm text-red-800 dark:text-red-200">{error}</p>
+		</div>
+	{/if}
+
+	<!-- Actions -->
+	<div class="flex justify-end gap-2">
+		<button
+			type="button"
+			onclick={oncancel}
+			class="rounded-lg bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+		>
+			Cancel
+		</button>
+		<button
+			type="button"
+			onclick={handleSubmit}
+			class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
+		>
+			{submitLabel}
+		</button>
+	</div>
+</div>