Skip to content

Commit 12c7976

Browse files
PavelLaptevPavelLaptev
authored
agents-ui-update (#10347)
* feat(ui): map "exit" tool * fix(ui): success icon colors to succ-50 * update modal UI for MCP servers * ui: header update
1 parent 2884b56 commit 12c7976

File tree

8 files changed

+166
-58
lines changed

8 files changed

+166
-58
lines changed

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

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,18 @@
3636

3737
<div class="chat" use:focusable={{ vertical: true }}>
3838
<div class="chat-header" use:focusable>
39-
<div class="flex gap-10 items-center overflow-hidden">
40-
{@render branchIcon()}
41-
<p class="text-15 text-bold truncate">{branchName}</p>
42-
39+
<div class="flex gap-10 justify-between">
40+
<div class="chat-header__title">
41+
{@render branchIcon()}
42+
<p class="text-15 text-bold truncate">{branchName}</p>
43+
</div>
4344
<div class="flex gap-4 items-center">
44-
{@render workspaceActions()}
45+
{@render contextActions()}
4546
</div>
4647
</div>
4748

48-
<div class="flex gap-4 items-center">
49-
{@render contextActions()}
49+
<div class="chat-header__actions">
50+
{@render workspaceActions()}
5051
</div>
5152
</div>
5253

@@ -86,13 +87,29 @@
8687
8788
.chat-header {
8889
display: flex;
89-
justify-content: space-between;
90+
flex-direction: column;
9091
width: 100%;
9192
padding: 16px;
92-
gap: 20px;
93+
gap: 8px;
9394
border-bottom: 1px solid var(--clr-border-3);
9495
}
9596
97+
.chat-header__title {
98+
display: flex;
99+
flex: 1;
100+
align-items: center;
101+
margin-top: -2px;
102+
overflow: hidden;
103+
gap: 10px;
104+
}
105+
106+
.chat-header__actions {
107+
display: flex;
108+
align-items: center;
109+
110+
gap: 4px;
111+
}
112+
96113
.chat-container {
97114
display: flex;
98115
position: relative;

‎apps/desktop/src/components/codegen/CodegenMcpConfigModal.svelte‎

Lines changed: 84 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<script lang="ts">
2-
import { Link, Modal, ScrollableContainer, Toggle } from '@gitbutler/ui';
2+
import emptyFolderSvg from '$lib/assets/empty-state/empty-folder.svg?raw';
3+
import mcpLogoSvg from '$lib/assets/unsized-logos/mcp.svg?raw';
4+
import {
5+
Link,
6+
Modal,
7+
ScrollableContainer,
8+
Toggle,
9+
SectionCard,
10+
EmptyStatePlaceholder
11+
} from '@gitbutler/ui';
312
import type { McpConfig, McpServer } from '$lib/codegen/types';
413
514
type Props = {
@@ -17,60 +26,100 @@
1726
}
1827
</script>
1928

20-
<Modal bind:this={modal} title="Configure your MCP servers">
29+
<Modal
30+
bind:this={modal}
31+
width={480}
32+
title={Object.entries(mcpConfig.mcpServers).length > 0 ? 'MCP Server Configuration' : undefined}
33+
>
2134
<ScrollableContainer>
22-
<div class="flex flex-col gap-12">
23-
<div>
24-
<p class="text-13">
25-
Choose which MCP Servers should be available in this session. To install more MCP servers,
26-
please refer to the
35+
<div class="flex flex-col gap-8">
36+
{#if Object.entries(mcpConfig.mcpServers).length === 0}
37+
<EmptyStatePlaceholder image={emptyFolderSvg} width={300} topBottomPadding={38}>
38+
{#snippet title()}
39+
No MCP servers available
40+
{/snippet}
41+
{#snippet caption()}
42+
For installing additional MCP servers,<br />check the
43+
<Link href="https://docs.anthropic.com/en/docs/claude-code/mcp#installing-mcp-servers"
44+
>Claude Code documentation</Link
45+
>
46+
{/snippet}
47+
</EmptyStatePlaceholder>
48+
{:else}
49+
<p class="text-12 text-body clr-text-2 m-bottom-10">
50+
Select the MCP Servers for this session. For installing additional MCP servers, check the
2751
<Link href="https://docs.anthropic.com/en/docs/claude-code/mcp#installing-mcp-servers"
2852
>Claude Code documentation</Link
2953
>
3054
</p>
31-
</div>
32-
{#if Object.entries(mcpConfig.mcpServers).length === 0}
33-
<p class="text-13">You currently have no MCP Servers available to this project.</p>
34-
{:else}
35-
{#each Object.entries(mcpConfig.mcpServers) as [name, server]}
36-
{@render mcpServer(name, server)}
37-
{/each}
55+
<div class="stack-v">
56+
{#each Object.entries(mcpConfig.mcpServers) as [name, server], index}
57+
{@render mcpServer(
58+
name,
59+
server,
60+
index === 0,
61+
index === Object.entries(mcpConfig.mcpServers).length - 1
62+
)}
63+
{/each}
64+
</div>
3865
{/if}
3966
</div>
4067
</ScrollableContainer>
4168
</Modal>
4269

43-
{#snippet mcpServer(name: string, server: McpServer)}
44-
<div class="mcp-server">
70+
{#snippet mcpServer(name: string, server: McpServer, isFirst: boolean, isLast: boolean)}
71+
<SectionCard orientation="row" labelFor={name} roundedTop={isFirst} roundedBottom={isLast}>
72+
{#snippet iconSide()}
73+
<div class="mcp-server__icon">
74+
{@html mcpLogoSvg}
75+
</div>
76+
{/snippet}
4577
<div class="mcp-server__body">
46-
<p class="text-14 text-bold">{name}</p>
47-
{#if server.command}
48-
<p class="text-13">{server.command} {server.args?.join(' ')}</p>
49-
{/if}
50-
{#if server.url}
51-
<p class="text-13">{server.url}</p>
52-
{/if}
53-
</div>
54-
<div class="mcp-server__actions">
55-
<Toggle checked={!disabledServers.includes(name)} onclick={() => toggleServer(name)} />
78+
<p class="text-14 text-bold">
79+
{name}
80+
</p>
81+
82+
<p class="mcp-server__caption truncate">
83+
{#if server.command}
84+
<span>{server.command} {server.args?.join(' ')}</span>
85+
{/if}
86+
{#if server.url}
87+
<span>{server.url}</span>
88+
{/if}
89+
</p>
5690
</div>
57-
</div>
91+
{#snippet actions()}
92+
<Toggle
93+
id={name}
94+
checked={!disabledServers.includes(name)}
95+
onclick={() => toggleServer(name)}
96+
/>
97+
{/snippet}
98+
</SectionCard>
5899
{/snippet}
59100

60101
<style lang="postcss">
61-
.mcp-server {
102+
.mcp-server__icon {
62103
display: flex;
63-
padding: 12px;
64-
65-
border: 1px solid var(--clr-border-2);
104+
flex-shrink: 0;
105+
align-items: center;
106+
justify-content: center;
107+
width: 32px;
108+
height: 32px;
109+
padding: 6px;
66110
border-radius: var(--radius-m);
111+
background-color: var(--clr-bg-2);
67112
}
68113
.mcp-server__body {
69114
display: flex;
70-
71-
flex-grow: 1;
72-
73115
flex-direction: column;
74-
gap: 8px;
116+
width: 100%;
117+
overflow: hidden;
118+
gap: 2px;
119+
}
120+
.mcp-server__caption {
121+
color: var(--clr-text-2);
122+
font-size: 11px;
123+
font-family: var(--fontfamily-mono);
75124
}
76125
</style>

‎apps/desktop/src/components/codegen/CodegenPage.svelte‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -515,32 +515,51 @@
515515
{@const lineColor = getColorFromBranchType(
516516
pushStatusToColor(branchDetailsData.pushStatus)
517517
)}
518+
{@const enabledMcpServers = mcpConfig.current.data
519+
? Object.keys(mcpConfig.current.data.mcpServers).length -
520+
uiState.lane(selectedBranch.stackId).disabledMcpServers.current.length
521+
: 0}
518522

519523
<CodegenChatLayout branchName={selectedBranch.head}>
520524
{#snippet branchIcon()}
521525
<BranchHeaderIcon {iconName} color={lineColor} />
522526
{/snippet}
523527
{#snippet workspaceActions()}
524-
<Button kind="outline" size="tag" icon="workbench-small" onclick={showInWorkspace}
525-
>Show in workspace</Button
528+
<Button
529+
kind="outline"
530+
size="tag"
531+
icon="workbench-small"
532+
reversedDirection
533+
onclick={showInWorkspace}>Show in workspace</Button
526534
>
527535
<Button
528536
kind="outline"
529537
icon="open-editor-small"
530538
size="tag"
531-
tooltip="Open in editor
532-
"
539+
tooltip="Open in editor"
533540
onclick={openInEditor}
534-
/>
541+
reversedDirection
542+
>
543+
Open in {$userSettings.defaultCodeEditor.displayName}
544+
</Button>
535545
{/snippet}
536546
{#snippet contextActions()}
537-
<Button kind="outline" size="tag" onclick={() => mcpConfigModal?.open()}>MCP</Button>
547+
<Button
548+
kind="outline"
549+
icon="mcp"
550+
reversedDirection
551+
onclick={() => mcpConfigModal?.open()}
552+
>MCP
553+
554+
{#snippet badge()}
555+
<Badge kind="soft">{enabledMcpServers}</Badge>
556+
{/snippet}
557+
</Button>
538558
<Button
539559
disabled={!hasRulesToClear || formattedMessages.length === 0}
540560
kind="outline"
541-
size="tag"
561+
style="warning"
542562
icon="clear-small"
543-
reversedDirection
544563
onclick={clearContextAndRules}
545564
>
546565
Clear context

‎apps/desktop/src/components/codegen/CodegenStatusIcon.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
--icon-inner-color: color-mix(in srgb, var(--clr-text-1) 80%, transparent);
3737
3838
&.completed {
39-
--icon-frame-color: color-mix(in srgb, var(--clr-scale-succ-50) 50%, transparent);
40-
--icon-inner-color: var(--clr-scale-succ-40);
39+
--icon-frame-color: var(--clr-scale-succ-50);
40+
--icon-inner-color: var(--clr-scale-succ-50);
4141
}
4242
}
4343

‎apps/desktop/src/lib/assets/unsized-logos/mcp.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎apps/desktop/src/lib/utils/codegenTools.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export function getToolIcon(toolName: string): IconName {
3030
if (name.includes('batch') || name.includes('script')) {
3131
return 'text';
3232
}
33-
if (name.includes('glob') || name.includes('pattern')) {
34-
return 'filter-applied-small';
33+
if (name.includes('exit')) {
34+
return 'signout';
3535
}
3636

3737
// Default icon for unknown tool types

‎packages/ui/src/lib/components/Button.svelte‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
// Snippets
4242
children?: Snippet;
4343
custom?: Snippet;
44+
badge?: Snippet;
4445
}
4546
</script>
4647

@@ -89,7 +90,8 @@
8990
oncontextmenu,
9091
onkeydown,
9192
children,
92-
custom
93+
custom,
94+
badge
9395
}: Props = $props();
9496
9597
async function handleAction(e: MouseEvent) {
@@ -167,6 +169,12 @@
167169
{displayHotkey}
168170
</span>
169171
{/if}
172+
173+
{#if badge}
174+
<span class="btn-badge">
175+
{@render badge()}
176+
</span>
177+
{/if}
170178
</span>
171179
{/if}
172180

@@ -271,6 +279,12 @@
271279
transition: opacity var(--transition-fast);
272280
}
273281
282+
.btn-badge {
283+
display: inline-flex;
284+
margin-right: -2px;
285+
margin-left: 2px;
286+
}
287+
274288
/* Theme Variables - All themes use the same pattern */
275289
:where(&.neutral) {
276290
--theme-outline-text: var(--clr-btn-ntrl-outline-text);

‎packages/ui/src/lib/data/icons.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,5 +247,6 @@
247247
"plug": "M10.8955 4.84961H14.5C14.9139 4.84981 15.2498 5.1857 15.25 5.59961C15.25 6.0137 14.914 6.34941 14.5 6.34961L10.8955 6.34961L10.8955 9.65039L14.5 9.65039C14.914 9.65059 15.25 9.9863 15.25 10.4004C15.2498 10.8143 14.9139 11.1502 14.5 11.1504H10.8955V14H9.39551V12.9502L6.48242 12.9502C4.81006 12.95 3.46974 11.5796 3.46973 9.90918V8.75H0.0712891L0.0712891 7.25H3.46973V6.09082C3.46973 4.42036 4.81006 3.05001 6.48242 3.0498H9.39551V2L10.8955 2V4.84961ZM6.48242 4.5498C5.65599 4.55001 4.96973 5.23117 4.96973 6.09082V9.90918C4.96974 10.7688 5.656 11.45 6.48242 11.4502L9.39551 11.4502L9.39551 4.5498L6.48242 4.5498ZM7.37109 7.26172C7.85228 7.26172 8.24293 7.65168 8.24316 8.13281C8.24316 8.61415 7.85243 9.00488 7.37109 9.00488C6.88996 9.00464 6.5 8.614 6.5 8.13281C6.50024 7.65183 6.89011 7.26196 7.37109 7.26172Z",
248248
"thinking": "M7.15234 0.75C9.51718 0.750045 11.1274 1.69173 12.208 2.88672C13.2646 4.05534 13.7897 5.4377 14.0801 6.30078C14.4241 7.32333 14.8157 8.38659 15.0664 9.05469C15.3729 9.87119 14.7715 10.75 13.8936 10.75H13.1123L13.1123 11.7998C13.1123 12.7663 12.3288 13.5498 11.3623 13.5498H10.5693V15.5H9.06934V12.0498H11.3623C11.5004 12.0498 11.6123 11.9379 11.6123 11.7998L11.6123 9.25L13.54 9.25C13.2916 8.58143 12.9581 7.66791 12.6592 6.7793C12.3843 5.96236 11.9378 4.82389 11.0957 3.89258C10.2776 2.98779 9.06152 2.25004 7.15234 2.25C4.68423 2.25 2.25022 4.20823 2.25 7.09961C2.25 8.30419 2.73997 9.42497 3.26758 10.2744C3.52799 10.6937 3.78894 11.0328 3.9834 11.2656C4.08023 11.3815 4.15996 11.4701 4.21387 11.5283C4.24076 11.5573 4.26155 11.5785 4.27441 11.5918C4.28084 11.5984 4.28462 11.6039 4.28711 11.6064L4.28809 11.6074H4.28906L4.51074 11.8271L4.51074 15.5L3.01074 15.5L3.01074 12.4307C2.95884 12.3722 2.89725 12.3056 2.83203 12.2275C2.60259 11.9529 2.29795 11.5561 1.99316 11.0654C1.39039 10.0949 0.75 8.69488 0.75 7.09961C0.750219 3.27142 3.9685 0.75 7.15234 0.75ZM7.93262 4.99512C8.11653 5.04545 8.291 5.11769 8.45312 5.20996L9.27051 4.39355L10.1191 5.24219L9.30176 6.05859C9.39406 6.21994 9.46691 6.3931 9.51758 6.57617L10.6768 6.57617V7.77637L9.52051 7.77637C9.47079 7.95965 9.399 8.13317 9.30762 8.29492L10.127 9.11426L9.70215 9.53809L9.27832 9.96289L8.46191 9.14648C8.29707 9.24147 8.12021 9.31677 7.93262 9.36816L7.93262 10.5205H6.73242L6.73242 9.36816C6.5473 9.31743 6.37197 9.24461 6.20898 9.15137L5.39844 9.96289L4.5498 9.11426L5.36133 8.30176C5.26824 8.13816 5.19586 7.96212 5.14551 7.77637H4V6.57617H5.14844C5.19975 6.39064 5.27318 6.21494 5.36719 6.05176L4.55762 5.24219L4.98145 4.81738L5.40625 4.39355L6.21875 5.20605C6.37891 5.11559 6.55109 5.04475 6.73242 4.99512V3.84375L7.93262 3.84375V4.99512ZM7.33203 6.1123C6.74191 6.11261 6.26279 6.59147 6.2627 7.18164C6.2627 7.77189 6.74185 8.25067 7.33203 8.25098C7.92247 8.25098 8.40137 7.77208 8.40137 7.18164C8.40127 6.59128 7.92241 6.1123 7.33203 6.1123Z",
249249
"edit-with-permissions": "M16.0615 10.5128L10.875 15.6984H7.43945V14.9484L7.43848 12.5724V12.2618L12.624 7.07629L16.0615 10.5128ZM8.93945 12.8829V14.1974L10.2549 14.1984L13.4893 10.962L12.1738 9.64661L8.93945 12.8829ZM4.8877 1.25012C6.52875 1.25064 7.85938 2.5816 7.85938 4.22278V5.03333C8.38933 5.33409 8.74707 5.9029 8.74707 6.55579V9.00012C8.74692 9.96649 7.96347 10.7501 6.99707 10.7501H2.77539C1.80912 10.75 1.02554 9.9664 1.02539 9.00012V6.55579C1.02539 5.90229 1.38428 5.3329 1.91504 5.03235V4.22278C1.91504 2.58128 3.2462 1.25012 4.8877 1.25012ZM2.77539 6.30579C2.63745 6.30594 2.52539 6.41781 2.52539 6.55579V9.00012C2.52554 9.13797 2.63754 9.24997 2.77539 9.25012H6.99707C7.13505 9.25012 7.24692 9.13806 7.24707 9.00012V6.55579C7.24707 6.41772 7.13514 6.30579 6.99707 6.30579H2.77539ZM4.8877 2.75012C4.07463 2.75012 3.41504 3.40971 3.41504 4.22278V4.80579H6.35938V4.22278C6.35938 3.41003 5.70032 2.75064 4.8877 2.75012Z",
250-
"allow-all": "M6.83496 1.50879C10.1582 1.67749 12.8225 4.34181 12.9912 7.66504L13 8C13 11.5899 10.0899 14.5 6.5 14.5C2.91015 14.5 3.00395e-07 11.5899 0 8L0.00878906 7.66504C0.183124 4.23086 3.0225 1.5 6.5 1.5L6.83496 1.50879ZM10.335 1.55566C13.4217 1.95162 15.8311 4.51035 15.9912 7.66504L16 8C16 11.3068 13.5303 14.0344 10.335 14.4443C11.5637 13.7115 12.5645 12.6382 13.208 11.3535C14.0107 10.4665 14.5 9.29052 14.5 8C14.5 6.70922 14.011 5.53258 13.208 4.64551C12.5645 3.36118 11.5635 2.28833 10.335 1.55566ZM6.5 3C3.73858 3 1.5 5.23858 1.5 8C1.5 10.7614 3.73858 13 6.5 13C9.26142 13 11.5 10.7614 11.5 8C11.5 5.23858 9.26142 3 6.5 3ZM9.26074 6.00098L9.81836 6.50098L7.10547 9.5166C6.41043 10.2887 5.19912 10.2885 4.50391 9.5166L2.94238 7.78223L3.5 7.28027L4.05762 6.7793L5.61914 8.51367C5.71846 8.62297 5.89114 8.62331 5.99023 8.51367L8.70312 5.49902L9.26074 6.00098Z"
250+
"allow-all": "M6.83496 1.50879C10.1582 1.67749 12.8225 4.34181 12.9912 7.66504L13 8C13 11.5899 10.0899 14.5 6.5 14.5C2.91015 14.5 3.00395e-07 11.5899 0 8L0.00878906 7.66504C0.183124 4.23086 3.0225 1.5 6.5 1.5L6.83496 1.50879ZM10.335 1.55566C13.4217 1.95162 15.8311 4.51035 15.9912 7.66504L16 8C16 11.3068 13.5303 14.0344 10.335 14.4443C11.5637 13.7115 12.5645 12.6382 13.208 11.3535C14.0107 10.4665 14.5 9.29052 14.5 8C14.5 6.70922 14.011 5.53258 13.208 4.64551C12.5645 3.36118 11.5635 2.28833 10.335 1.55566ZM6.5 3C3.73858 3 1.5 5.23858 1.5 8C1.5 10.7614 3.73858 13 6.5 13C9.26142 13 11.5 10.7614 11.5 8C11.5 5.23858 9.26142 3 6.5 3ZM9.26074 6.00098L9.81836 6.50098L7.10547 9.5166C6.41043 10.2887 5.19912 10.2885 4.50391 9.5166L2.94238 7.78223L3.5 7.28027L4.05762 6.7793L5.61914 8.51367C5.71846 8.62297 5.89114 8.62331 5.99023 8.51367L8.70312 5.49902L9.26074 6.00098Z",
251+
"mcp": "M5.83203 1.94922C7.01205 0.769515 8.92451 0.769451 10.1045 1.94922C10.7455 2.59021 11.0357 3.44735 10.9805 4.28613C11.819 4.23074 12.6764 4.52044 13.3174 5.16113C14.4974 6.34111 14.4982 8.25546 13.3184 9.43555L9.56445 13.1895L10.6396 14.2646L9.5791 15.3252L7.44336 13.1895L12.2568 8.375C12.8508 7.78081 12.8508 6.8169 12.2568 6.22266C11.6647 5.63092 10.706 5.62826 10.1113 6.21582C10.1092 6.21794 10.1076 6.22054 10.1055 6.22266L6.625 9.70312L5.56445 8.64258V8.6416L9.04395 5.16113L9.14941 5.04687C9.63675 4.44912 9.60104 3.56686 9.04395 3.00977C8.44975 2.41578 7.48681 2.41585 6.89258 3.00977L2.6084 7.29395L1.54785 6.2334L5.83203 1.94922ZM8.49805 4.61621L4.75 8.36426C4.15596 8.95849 4.15596 9.92237 4.75 10.5166C5.34422 11.1108 6.30807 11.1107 6.90234 10.5166L10.6504 6.76855L11.7109 7.8291L7.96289 11.5781C6.7828 12.7576 4.86934 12.757 3.68945 11.5771C2.50963 10.3971 2.50963 8.48373 3.68945 7.30371L7.4375 3.55566L8.49805 4.61621Z"
251252
}

0 commit comments

Comments
 (0)