Skip to content
This repository was archived by the owner on Feb 19, 2026. It is now read-only.

Commit a8bf1ad

Browse files
adamdotdevinadamdotdevin
committed
wip: desktop work
1 parent 0ac943d commit a8bf1ad

File tree

7 files changed

+91
-70
lines changed

7 files changed

+91
-70
lines changed

‎packages/desktop/src/context/sync.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
124124
const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
125125
const sanitizePart = (part: Part) => {
126126
if (part.type === "tool") {
127-
if (part.state.status === "completed") {
127+
if (part.state.status === "completed" || part.state.status === "error") {
128128
for (const key in part.state.metadata) {
129129
if (typeof part.state.metadata[key] === "string") {
130130
part.state.metadata[key] = sanitize(part.state.metadata[key] as string)
@@ -135,6 +135,9 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
135135
part.state.input[key] = sanitize(part.state.input[key] as string)
136136
}
137137
}
138+
if ("error" in part.state) {
139+
part.state.error = sanitize(part.state.error as string)
140+
}
138141
}
139142
}
140143
return part

‎packages/desktop/src/pages/index.tsx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ export default function Page() {
5353
const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
5454

5555
createEffect(() => {
56-
if (!local.session.activeMessage()) return
57-
if (!messageScrollElement) return
58-
const element = messageScrollElement.querySelector(`[data-message="${local.session.activeMessage()?.id}"]`)
59-
element?.scrollIntoView({ block: "start", behavior: "instant" })
56+
// Set first message as active if none selected
57+
const userMessages = local.session.userMessages()
58+
if (userMessages.length > 0 && !local.session.activeMessage()) {
59+
local.session.setActiveMessage(userMessages[0].id)
60+
}
6061
})
6162

6263
const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
@@ -567,28 +568,29 @@ export default function Page() {
567568
</ul>
568569
</Show>
569570
<div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
570-
<div class="flex flex-col items-start gap-50 pb-50">
571-
<For each={local.session.userMessages()}>
572-
{(message) => {
573-
const [initialized, setInitialized] = createSignal(!!message.summary?.title)
574-
const [expanded, setExpanded] = createSignal(false)
575-
const parts = createMemo(() => sync.data.part[message.id])
576-
const title = createMemo(() => message.summary?.title)
577-
const summary = createMemo(() => message.summary?.body)
578-
const assistantMessages = createMemo(() => {
579-
return sync.data.message[activeSession().id]?.filter(
580-
(m) => m.role === "assistant" && m.parentID == message.id,
581-
) as AssistantMessageType[]
582-
})
583-
const working = createMemo(() => !summary())
584-
createEffect(() => {
585-
setTimeout(() => setInitialized(!!title()), 10_000)
586-
})
587-
588-
return (
571+
<For each={local.session.userMessages()}>
572+
{(message) => {
573+
const isActive = createMemo(() => local.session.activeMessage()?.id === message.id)
574+
const [initialized, setInitialized] = createSignal(!!message.summary?.title)
575+
const [expanded, setExpanded] = createSignal(false)
576+
const parts = createMemo(() => sync.data.part[message.id])
577+
const title = createMemo(() => message.summary?.title)
578+
const summary = createMemo(() => message.summary?.body)
579+
const assistantMessages = createMemo(() => {
580+
return sync.data.message[activeSession().id]?.filter(
581+
(m) => m.role === "assistant" && m.parentID == message.id,
582+
) as AssistantMessageType[]
583+
})
584+
const working = createMemo(() => !summary())
585+
createEffect(() => {
586+
setTimeout(() => setInitialized(!!title()), 10_000)
587+
})
588+
589+
return (
590+
<Show when={isActive()}>
589591
<div
590592
data-message={message.id}
591-
class="flex flex-col items-start self-stretch gap-8 min-h-screen"
593+
class="flex flex-col items-start self-stretch gap-8 pb-50"
592594
>
593595
{/* Title */}
594596
<div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10">
@@ -774,10 +776,10 @@ export default function Page() {
774776
</Switch>
775777
</div>
776778
</div>
777-
)
778-
}}
779-
</For>
780-
</div>
779+
</Show>
780+
)
781+
}}
782+
</For>
781783
</div>
782784
</div>
783785
</div>

‎packages/ui/script/colors.txt‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
--background-weak: var(--smoke-light-3);
33
--background-strong: var(--smoke-light-1);
44
--background-stronger: #FCFCFC;
5-
--base: var(--smoke-light-alpha-2);
65
--surface-base: var(--smoke-light-alpha-2);
6+
--base: var(--smoke-light-alpha-2);
77
--surface-base-hover: #0500000F;
88
--surface-base-active: var(--smoke-light-alpha-3);
99
--surface-base-interactive-active: var(--cobalt-light-alpha-3);
@@ -17,6 +17,7 @@
1717
--surface-float-base: var(--smoke-dark-1);
1818
--surface-float-base-hover: var(--smoke-dark-2);
1919
--surface-raised-base-hover: var(--smoke-light-alpha-2);
20+
--surface-raised-base-active: var(--smoke-light-alpha-3);
2021
--surface-raised-strong: var(--smoke-light-1);
2122
--surface-raised-strong-hover: var(--white);
2223
--surface-raised-stronger: var(--white);
@@ -43,8 +44,8 @@
4344
--surface-info-base: var(--lilac-light-3);
4445
--surface-info-weak: var(--lilac-light-2);
4546
--surface-info-strong: var(--lilac-light-9);
46-
--surface-diff-hidden-base: var(--blue-light-3);
4747
--surface-diff-skip-base: var(--smoke-light-2);
48+
--surface-diff-hidden-base: var(--blue-light-3);
4849
--surface-diff-unchanged-base: #FFFFFF00;
4950
--surface-diff-hidden-weak: var(--blue-light-2);
5051
--surface-diff-hidden-weaker: var(--blue-light-1);
@@ -74,19 +75,22 @@
7475
--text-on-brand-base: var(--smoke-light-alpha-11);
7576
--text-on-interactive-base: var(--smoke-light-1);
7677
--text-on-interactive-weak: var(--smoke-dark-alpha-11);
77-
--text-on-success-base: var(--smoke-dark-alpha-11);
78+
--text-on-success-base: var(--apple-light-10);
79+
--text-on-critical-base: var(--ember-light-10);
80+
--text-on-critical-weak: var(--ember-light-8);
81+
--text-on-critical-strong: var(--ember-light-12);
7882
--text-on-warning-base: var(--smoke-dark-alpha-11);
7983
--text-on-info-base: var(--smoke-dark-alpha-11);
8084
--text-diff-add-base: var(--mint-light-11);
81-
--text-diff-delete-base: var(--ember-light-11);
85+
--text-diff-delete-base: var(--ember-light-10);
8286
--text-diff-delete-strong: var(--ember-light-12);
8387
--text-diff-add-strong: var(--mint-light-12);
8488
--text-on-info-weak: var(--smoke-dark-alpha-9);
8589
--text-on-info-strong: var(--smoke-dark-alpha-12);
8690
--text-on-warning-weak: var(--smoke-dark-alpha-9);
8791
--text-on-warning-strong: var(--smoke-dark-alpha-12);
88-
--text-on-success-weak: var(--smoke-dark-alpha-9);
89-
--text-on-success-strong: var(--smoke-dark-alpha-12);
92+
--text-on-success-weak: var(--apple-light-6);
93+
--text-on-success-strong: var(--apple-light-12);
9094
--text-on-brand-weak: var(--smoke-light-alpha-9);
9195
--text-on-brand-weaker: var(--smoke-light-alpha-8);
9296
--text-on-brand-strong: var(--smoke-light-alpha-12);
@@ -134,19 +138,19 @@
134138
--icon-selected: var(--smoke-light-12);
135139
--icon-disabled: var(--smoke-light-8);
136140
--icon-focus: var(--smoke-light-12);
137-
--icon-weak-base: var(--smoke-light-7);
138141
--icon-invert-base: #FFFFFF;
142+
--icon-weak-base: var(--smoke-light-7);
139143
--icon-weak-hover: var(--smoke-light-8);
140144
--icon-weak-active: var(--smoke-light-9);
141145
--icon-weak-selected: var(--smoke-light-10);
142146
--icon-weak-disabled: var(--smoke-light-6);
143147
--icon-weak-focus: var(--smoke-light-9);
144148
--icon-strong-base: var(--smoke-light-12);
145-
--icon-strong-hover: var(--smoke-light-12);
146-
--icon-strong-active: var(--smoke-light-12);
147-
--icon-strong-selected: var(--smoke-light-12);
149+
--icon-strong-hover: #151313;
150+
--icon-strong-active: #020202;
151+
--icon-strong-selected: #020202;
148152
--icon-strong-disabled: var(--smoke-light-8);
149-
--icon-strong-focus: var(--smoke-light-12);
153+
--icon-strong-focus: #020202;
150154
--icon-brand-base: var(--smoke-light-12);
151155
--icon-interactive-base: var(--cobalt-light-9);
152156
--icon-success-base: var(--apple-light-7);
@@ -155,9 +159,9 @@
155159
--icon-warning-base: var(--amber-light-7);
156160
--icon-warning-hover: var(--amber-light-8);
157161
--icon-warning-active: var(--amber-light-11);
158-
--icon-critical-base: var(--ember-light-7);
159-
--icon-critical-hover: var(--ember-light-8);
160-
--icon-critical-active: var(--ember-light-11);
162+
--icon-critical-base: var(--ember-light-10);
163+
--icon-critical-hover: var(--ember-light-11);
164+
--icon-critical-active: var(--ember-light-12);
161165
--icon-info-base: var(--lilac-light-7);
162166
--icon-info-hover: var(--lilac-light-8);
163167
--icon-info-active: var(--lilac-light-11);
@@ -184,9 +188,8 @@
184188
--icon-diff-add-base: var(--mint-light-11);
185189
--icon-diff-add-hover: var(--mint-light-12);
186190
--icon-diff-add-active: var(--mint-light-12);
187-
--icon-diff-delete-base: var(--ember-light-9);
188-
--icon-diff-delete-hover: var(--ember-light-10);
189-
--icon-diff-delete-active: var(--ember-light-11);
191+
--icon-diff-delete-base: var(--ember-light-10);
192+
--icon-diff-delete-hover: var(--ember-light-11);
190193
--syntax-comment: #8A8A8A;
191194
--syntax-string: #D68C27;
192195
--syntax-keyword: #3B7DD8;
@@ -222,3 +225,5 @@
222225
--border-weaker-selected: var(--cobalt-light-alpha-4);
223226
--border-weaker-disabled: var(--smoke-light-alpha-2);
224227
--border-weaker-focus: var(--smoke-light-alpha-6);
228+
--button-ghost-hover: var(--smoke-light-alpha-2);
229+
--button-ghost-hover2: var(--smoke-light-alpha-3);

‎packages/ui/src/components/message-part.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
gap: 8px;
3434

3535
[data-slot="tool-error-icon"] {
36-
color: var(--icon-critical-active);
36+
color: var(--icon-critical-base);
3737
margin-top: 4px;
3838
}
3939

@@ -50,13 +50,13 @@
5050
font-weight: var(--font-weight-medium);
5151
line-height: var(--line-height-large);
5252
letter-spacing: var(--letter-spacing-normal);
53-
color: var(--ember-light-11);
54-
text-transform: capitalize;
53+
color: var(--text-on-critical-base);
5554
white-space: nowrap;
5655
}
5756

58-
/* [data-slot="tool-error-message"] { */
59-
/* } */
57+
[data-slot="tool-error-message"] {
58+
color: var(--text-on-critical-weak);
59+
}
6060
}
6161

6262
[data-component="tool-output"] {

‎packages/ui/src/components/message-part.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
153153
<div data-component="tool-error">
154154
<Icon name="circle-ban-sign" size="small" data-slot="tool-error-icon" />
155155
<Switch>
156-
<Match when={title}>
156+
<Match when={title && title.length < 30}>
157157
<div data-slot="tool-error-content">
158158
<div data-slot="tool-error-title">{title}</div>
159159
<span data-slot="tool-error-message">{rest.join(": ")}</span>

‎packages/ui/src/styles/tailwind/colors.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
--color-background-weak: var(--background-weak);
88
--color-background-strong: var(--background-strong);
99
--color-background-stronger: var(--background-stronger);
10-
--color-base: var(--base);
1110
--color-surface-base: var(--surface-base);
11+
--color-base: var(--base);
1212
--color-surface-base-hover: var(--surface-base-hover);
1313
--color-surface-base-active: var(--surface-base-active);
1414
--color-surface-base-interactive-active: var(--surface-base-interactive-active);
@@ -22,6 +22,7 @@
2222
--color-surface-float-base: var(--surface-float-base);
2323
--color-surface-float-base-hover: var(--surface-float-base-hover);
2424
--color-surface-raised-base-hover: var(--surface-raised-base-hover);
25+
--color-surface-raised-base-active: var(--surface-raised-base-active);
2526
--color-surface-raised-strong: var(--surface-raised-strong);
2627
--color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
2728
--color-surface-raised-stronger: var(--surface-raised-stronger);
@@ -48,8 +49,8 @@
4849
--color-surface-info-base: var(--surface-info-base);
4950
--color-surface-info-weak: var(--surface-info-weak);
5051
--color-surface-info-strong: var(--surface-info-strong);
51-
--color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
5252
--color-surface-diff-skip-base: var(--surface-diff-skip-base);
53+
--color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
5354
--color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
5455
--color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
5556
--color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
@@ -80,6 +81,9 @@
8081
--color-text-on-interactive-base: var(--text-on-interactive-base);
8182
--color-text-on-interactive-weak: var(--text-on-interactive-weak);
8283
--color-text-on-success-base: var(--text-on-success-base);
84+
--color-text-on-critical-base: var(--text-on-critical-base);
85+
--color-text-on-critical-weak: var(--text-on-critical-weak);
86+
--color-text-on-critical-strong: var(--text-on-critical-strong);
8387
--color-text-on-warning-base: var(--text-on-warning-base);
8488
--color-text-on-info-base: var(--text-on-info-base);
8589
--color-text-diff-add-base: var(--text-diff-add-base);
@@ -139,8 +143,8 @@
139143
--color-icon-selected: var(--icon-selected);
140144
--color-icon-disabled: var(--icon-disabled);
141145
--color-icon-focus: var(--icon-focus);
142-
--color-icon-weak-base: var(--icon-weak-base);
143146
--color-icon-invert-base: var(--icon-invert-base);
147+
--color-icon-weak-base: var(--icon-weak-base);
144148
--color-icon-weak-hover: var(--icon-weak-hover);
145149
--color-icon-weak-active: var(--icon-weak-active);
146150
--color-icon-weak-selected: var(--icon-weak-selected);
@@ -191,7 +195,6 @@
191195
--color-icon-diff-add-active: var(--icon-diff-add-active);
192196
--color-icon-diff-delete-base: var(--icon-diff-delete-base);
193197
--color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
194-
--color-icon-diff-delete-active: var(--icon-diff-delete-active);
195198
--color-syntax-comment: var(--syntax-comment);
196199
--color-syntax-string: var(--syntax-string);
197200
--color-syntax-keyword: var(--syntax-keyword);
@@ -227,4 +230,6 @@
227230
--color-border-weaker-selected: var(--border-weaker-selected);
228231
--color-border-weaker-disabled: var(--border-weaker-disabled);
229232
--color-border-weaker-focus: var(--border-weaker-focus);
233+
--color-button-ghost-hover: var(--button-ghost-hover);
234+
--color-button-ghost-hover2: var(--button-ghost-hover2);
230235
}

0 commit comments

Comments
 (0)