Skip to content

fix(chat-header): unify top-right cluster + soften blocked status tone #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackwener merged 1 commit into from
Jun 25, 2026
Merged

fix(chat-header): unify top-right cluster + soften blocked status tone #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/desktop/src/main/__tests__/session-status-presentation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ describe('presentSessionStatus', () => {
}
});

it('blocked is destructive', () => {
assert.equal(presentSessionStatus('blocked').tone, 'destructive');
it('blocked is warning (recoverable, not a hard failure)', () => {
assert.equal(presentSessionStatus('blocked').tone, 'warning');
});

it('done is success', () => {
Expand Down
6 changes: 3 additions & 3 deletions apps/desktop/src/renderer/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2847,15 +2847,15 @@ function AppShell() {
)}
<div className="maka-workspace-top-actions" role="toolbar" aria-label="工作区辅助操作">
<UiButton
className="maka-workspace-feedback-action"
className="maka-workspace-icon-action"
variant="quiet"
size="sm"
size="icon-sm"
type="button"
onClick={() => openSettingsSection('about')}
aria-label="问题反馈"
title="问题反馈 · 打开关于与环境信息"
>
<MessageCircleQuestion size={15} strokeWidth={1.7} aria-hidden="true" />
<span>问题反馈</span>
</UiButton>
<UiButton
className="maka-workspace-icon-action"
Expand Down
10 changes: 9 additions & 1 deletion apps/desktop/src/renderer/session-status-presentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,15 @@ const STATUS_PRESENTATION: Record<SessionStatus, SessionStatusPresentation> = {
active: { label: '可继续', tone: 'neutral', interactive: true },
running: { label: '进行中', tone: 'accent', interactive: true },
waiting_for_user: { label: '等你确认', tone: 'warning', interactive: true },
blocked: { label: '已阻塞', tone: 'destructive', interactive: true },
// `blocked` was destructive (red) but most blocked states are
// recoverable (permission_required, auth retry, missing connection
// selection) — the chat header pill ended up sitting beside monochrome
// quiet-icon utility buttons, where the bright red read as a hard
// error in a row that did not deserve one. 'warning' (warm yellow)
// honestly conveys "you need to do something" without screaming
// failure. Real hard failures surface through ChatHeaderAlertBadge,
// which still uses destructive.
blocked: { label: '已阻塞', tone: 'warning', interactive: true },
review: { label: '待审核', tone: 'info', interactive: true },
done: { label: '已完成', tone: 'success', interactive: true },
archived: { label: '已归档', tone: 'muted', interactive: false },
Expand Down
15 changes: 1 addition & 14 deletions apps/desktop/src/renderer/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,26 +424,13 @@ button:active {
display: none;
}

.maka-workspace-feedback-action,
.maka-workspace-icon-action {
width: 24px;
height: 24px;
border-radius: 6px;
color: var(--foreground-65);
}

.maka-workspace-feedback-action {
gap: 4px;
padding-inline: 6px;
font-size: 11px;
font-weight: 500;
color: var(--foreground-55);
}

.maka-workspace-icon-action {
width: 24px;
}

.maka-workspace-feedback-action:hover,
.maka-workspace-icon-action:hover {
color: var(--foreground);
background: var(--foreground-5);
Expand Down
13 changes: 11 additions & 2 deletions packages/ui/src/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ function Count(props: { value: number }) {
return <small>{props.value}</small>;
}

interface SkillEntry {
export interface SkillEntry {
id: string;
name: string;
description: string;
Expand Down Expand Up @@ -3452,10 +3452,19 @@ const STATUS_LABEL_BY_STATUS = {
aborted: '已中止',
} as const;

// `blocked` was 'destructive' (red), which read as a hard error in the
// chat header even when the session was just waiting on permission or a
// connection retry. The chat top-right cluster sits visually alongside
// monochrome quiet-icon buttons, so the bright red pill clashed. Most
// blocked sessions are recoverable (permission_required, auth retry,
// missing connection), so 'warning' (warm yellow) is the honest tone —
// "you need to do something" rather than "this failed". The destructive
// red is reserved for hard failures (e.g. permanent connection / auth
// rejection), which surface through ChatHeaderAlertBadge instead.
const STATUS_TONE_BY_STATUS = {
running: 'accent',
waiting_for_user: 'warning',
blocked: 'destructive',
blocked: 'warning',
review: 'info',
done: 'success',
archived: 'muted',
Expand Down