updates styles (#10652)

* updates styles

* fix summary section overflow

* fix(ui): remove duplicated max-width

Author: PavelLaptev

apps/desktop/src/components/BranchHeaderIcon.svelte

@@ -6,12 +6,13 @@
 		iconName: keyof typeof iconsJson;
 		color: string;
 		small?: boolean;
+		large?: boolean;
 	}
 
-	const { iconName, color, small }: Props = $props();
+	const { iconName, color, small, large }: Props = $props();
 </script>
 
-<div class="stack__status--icon" style:--bg-color={color} class:small>
+<div class="stack__status--icon" style:--bg-color={color} class:small class:large>
 	<Icon name={iconName} />
 </div>
 
@@ -21,18 +22,25 @@
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--radius-m);
 		background-color: var(--bg-color);
 		color: #fff;
 
-		&:not(.small) {
+		&:not(.small):not(.large) {
 			width: 20px;
 			height: 20px;
+			border-radius: var(--radius-m);
 		}
 
 		&.small {
 			width: 18px;
 			height: 18px;
+			border-radius: var(--radius-m);
+		}
+
+		&.large {
+			width: var(--size-button);
+			height: var(--size-button);
+			border-radius: var(--radius-ml);
 		}
 	}
 </style>

apps/desktop/src/components/codegen/CodegenChatLayout.svelte

@@ -37,17 +37,19 @@
 <div class="chat" use:focusable={{ vertical: true }}>
 	<div class="chat-header" use:focusable>
 		<div class="flex gap-10 justify-between">
+			{@render branchIcon()}
+
 			<div class="chat-header__title">
-				{@render branchIcon()}
-				<p class="text-15 text-bold truncate">{branchName}</p>
-			</div>
-			<div class="flex gap-4 items-center">
-				{@render contextActions()}
+				<h3 class="text-15 text-bold truncate">{branchName}</h3>
+
+				<div class="chat-header__title-actions">
+					{@render workspaceActions()}
+				</div>
 			</div>
 		</div>
 
-		<div class="chat-header__actions">
-			{@render workspaceActions()}
+		<div class="flex gap-8">
+			{@render contextActions()}
 		</div>
 	</div>
 
@@ -87,23 +89,21 @@
 
 	.chat-header {
 		display: flex;
-		flex-direction: column;
+		justify-content: space-between;
 		width: 100%;
 		padding: 16px;
 		gap: 8px;
-		border-bottom: 1px solid var(--clr-border-3);
+		border-bottom: 1px solid var(--clr-border-2);
 	}
 
 	.chat-header__title {
 		display: flex;
-		flex: 1;
-		align-items: center;
-		margin-top: -2px;
+		flex-direction: column;
 		overflow: hidden;
-		gap: 10px;
+		gap: 8px;
 	}
 
-	.chat-header__actions {
+	.chat-header__title-actions {
 		display: flex;
 		align-items: center;
 		gap: 4px;

apps/desktop/src/components/codegen/CodegenClaudeMessage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CodegenAssistantMessage from '$components/codegen/CodegenAssistantMessage.svelte';
+	import CodegenServiceMessage from '$components/codegen/CodegenServiceMessage.svelte';
 	import CodegenToolCall from '$components/codegen/CodegenToolCall.svelte';
 	import CodegenToolCalls from '$components/codegen/CodegenToolCalls.svelte';
 	import CodegenUserMessage from '$components/codegen/CodegenUserMessage.svelte';
@@ -21,11 +22,11 @@
 	<CodegenUserMessage content={message.message} avatarUrl={userAvatarUrl} />
 {:else if message.type === 'claude'}
 	{#if 'subtype' in message && message.subtype === 'compaction'}
-		<CodegenAssistantMessage content="The conversation has been compacted.">
+		<CodegenServiceMessage style="neutral" face="compacted" reverseElementsOrder>
 			{#snippet extraContent()}
 				{@render compactionSummary(message.message)}
 			{/snippet}
-		</CodegenAssistantMessage>
+		</CodegenServiceMessage>
 	{:else}
 		<CodegenAssistantMessage content={message.message}>
 			{#snippet extraContent()}
@@ -51,7 +52,6 @@
 {#snippet compactionSummary(summary: string)}
 	<div class="compaction-summary__wrapper">
 		<div class="compaction-summary" class:expanded>
-			<!-- Header for multiple tool calls -->
 			<button
 				type="button"
 				class="compaction-summary__header"
@@ -60,10 +60,10 @@
 				<div class="compaction-summary__arrow" class:expanded>
 					<Icon name="chevron-right" />
 				</div>
-				<span class="text-13 text-semibold">Compaction summary</span>
+				<p class="text-13 text-italic clr-text-2">Conversation compacted to preserve context</p>
 			</button>
 			{#if expanded}
-				<div class="compaction-summary__content">
+				<div class="text-13 compaction-summary__content">
 					<Markdown content={summary} />
 				</div>
 			{/if}
@@ -73,14 +73,11 @@
 
 <style lang="postcss">
 	.compaction-summary__wrapper {
-		container-name: assistant-message;
-		container-type: inline-size;
+		max-width: var(--message-max-width);
 	}
 
 	.compaction-summary {
 		width: fit-content;
-		max-width: var(--message-max-width);
-		max-width: 100%;
 		overflow: hidden;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
@@ -94,14 +91,14 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
-		padding: 8px 12px 8px 8px;
+		padding: 10px 12px 10px 8px;
 		gap: 8px;
-		border: none;
+		background-color: var(--clr-bg-2);
 		cursor: pointer;
 		transition: background-color var(--transition-fast);
 
 		&:hover {
-			background-color: var(--clr-bg-1-muted);
+			background-color: var(--clr-bg-2-muted);
 
 			.compaction-summary__arrow {
 				color: var(--clr-text-2);
@@ -112,9 +109,7 @@
 	.compaction-summary__arrow {
 		display: flex;
 		color: var(--clr-text-3);
-		transition:
-,
-			transform var(--transition-medium);
+		transition: transform var(--transition-medium);
 
 		&.expanded {
 			transform: rotate(90deg);