Bug Fixes and Formatting Update

src/lib/components/tui/TuiLink.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { getButtonStyle } from './utils';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
 	import type { TerminalLine } from './types';
 
 	export let line: TerminalLine;
@@ -8,6 +8,9 @@
 
 	// Determine if this is an external link
 	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
+	
+	// Parse color formatting in content
+	$: segments = parseColorText(line.content);
 </script>
 
 <span class="tui-link" style="--link-color: {getButtonStyle(line.style)}">
@@ -15,7 +18,15 @@
 		<Icon icon={line.icon} width="14" class="link-icon" />
 	{/if}
 	<button class="link-text" on:click={onClick}>
-		{line.content}
+		{#each segments as segment}
+			{#if segment.icon}
+				<Icon icon={segment.icon} width="14" class="inline-icon" />
+			{:else if getSegmentStyle(segment)}
+				<span style={getSegmentStyle(segment)}>{segment.text}</span>
+			{:else}
+				{segment.text}
+			{/if}
+		{/each}
 	</button>
 	{#if isExternal}
 		<Icon icon="mdi:open-in-new" width="12" class="link-external" />
@@ -62,4 +73,10 @@
 	.tui-link:hover :global(.link-external) {
 		opacity: 0.8;
 	}
+
+	:global(.inline-icon) {
+		display: inline-block;
+		vertical-align: middle;
+		margin: 0 0.15em;
+	}
 </style>