Bug Fixes and Formatting Update

src/lib/components/tui/TuiProgress.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
-	import { getButtonStyle } from './utils';
+	import Icon from '@iconify/svelte';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
 	import type { TerminalLine } from './types';
 
 	export let line: TerminalLine;
+	export let inline: boolean = false;
 
 	$: progress = Math.min(100, Math.max(0, line.progress ?? 0));
 	$: label = line.progressLabel || `${progress}%`;
+	$: contentSegments = parseColorText(line.content);
+	$: labelSegments = parseColorText(label);
 </script>
 
-<div class="tui-progress" style="--progress-color: {getButtonStyle(line.style)}">
+<div class="tui-progress" class:inline={inline} style="--progress-color: {getButtonStyle(line.style)}">
 	{#if line.content}
-		<div class="progress-label">{line.content}</div>
+		<div class="progress-label">
+			{#each contentSegments 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}
+		</div>
 	{/if}
 	<div class="progress-bar">
 		<div class="progress-fill" style="width: {progress}%">
@@ -22,7 +36,17 @@
 			{/each}
 		</div>
 	</div>
-	<div class="progress-value">{label}</div>
+	<div class="progress-value">
+		{#each labelSegments as segment}
+			{#if segment.icon}
+				<Icon icon={segment.icon} width="12" class="inline-icon" />
+			{:else if getSegmentStyle(segment)}
+				<span style={getSegmentStyle(segment)}>{segment.text}</span>
+			{:else}
+				{segment.text}
+			{/if}
+		{/each}
+	</div>
 </div>
 
 <style>
@@ -31,6 +55,31 @@
 		font-size: 0.85rem;
 	}
 
+	/* Inline progress styles */
+	.tui-progress.inline {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+		min-width: 120px;
+	}
+
+	.tui-progress.inline .progress-label {
+		margin-bottom: 0;
+		white-space: nowrap;
+	}
+
+	.tui-progress.inline .progress-bar {
+		flex: 1;
+		min-width: 80px;
+		height: 0.8rem;
+	}
+
+	.tui-progress.inline .progress-value {
+		margin-top: 0;
+		white-space: nowrap;
+	}
+
 	.progress-label {
 		color: var(--terminal-text);
 		margin-bottom: 0.25rem;
@@ -99,4 +148,10 @@
 		margin-top: 0.25rem;
 		font-weight: 600;
 	}
+
+	:global(.inline-icon) {
+		display: inline-block;
+		vertical-align: middle;
+		margin: 0 0.15em;
+	}
 </style>