Skip to content

fix(ui): close Astryx review debt (elevation, rhythm, primitives) #2593

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 2 commits into from
Aug 9, 2026
Merged

fix(ui): close Astryx review debt (elevation, rhythm, primitives) #2593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fce1ad5
fix(ui): close Astryx review debt for elevation, rhythm, and primitives
jackwener Aug 9, 2026
38e73ea
fix(ui): repair browser Toolbar flex and Kbd chrome after review
jackwener Aug 9, 2026
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
144 changes: 77 additions & 67 deletions apps/desktop/src/renderer/browser-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
useUiLocale,
} from '@maka/ui';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import { Toolbar } from '@astryxdesign/core/Toolbar';
import { Tooltip } from '@astryxdesign/core/Tooltip';
import { getBrowserCopy, type BrowserCopy } from './locales/browser-copy';

Expand Down Expand Up @@ -145,73 +146,82 @@ export function BrowserPanel(props: { sessionId: string; hidden: boolean }) {

return (
<div className="maka-browser-panel" role="region" aria-label={copy.panelAria}>
<div className="maka-browser-toolbar">
<Tooltip content={copy.back}>
<IconButton
label={copy.backAria}
icon={<ChevronLeft size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.canGoBack}
onClick={() => void window.maka.browser.back(sessionId)}
/>
</Tooltip>
<Tooltip content={copy.forward}>
<IconButton
label={copy.forwardAria}
icon={<ChevronRight size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.canGoForward}
onClick={() => void window.maka.browser.forward(sessionId)}
/>
</Tooltip>
<Tooltip content={state.loading ? copy.stop : copy.refresh}>
<IconButton
label={state.loading ? copy.stopAria : copy.refreshAria}
icon={state.loading ? <X size={ICON_SIZE.chrome} aria-hidden /> : <RotateCw size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.hasPage && !state.loading}
onClick={() =>
state.loading ? void window.maka.browser.stop(sessionId) : void window.maka.browser.reload(sessionId)
}
/>
</Tooltip>
<div className="maka-browser-address-field">
<TextInput
type="text"
label={copy.addressAria}
isLabelHidden
width="100%"
placeholder={copy.addressPlaceholder}
value={address}
onChange={setAddress}
onFocus={() => {
editingRef.current = true;
}}
onBlur={() => {
editingRef.current = false;
setAddress(state.url);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.currentTarget.blur();
go();
}
}}
/>
</div>
<Tooltip content={copy.close}>
<IconButton
label={copy.closeAria}
icon={<X size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
onClick={() => void window.maka.browser.close(sessionId)}
/>
</Tooltip>
</div>
<Toolbar
className="maka-browser-toolbar"
label={copy.panelAria}
size="sm"
startContent={(
<div className="maka-browser-toolbar-start">
<Tooltip content={copy.back}>
<IconButton
label={copy.backAria}
icon={<ChevronLeft size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.canGoBack}
onClick={() => void window.maka.browser.back(sessionId)}
/>
</Tooltip>
<Tooltip content={copy.forward}>
<IconButton
label={copy.forwardAria}
icon={<ChevronRight size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.canGoForward}
onClick={() => void window.maka.browser.forward(sessionId)}
/>
</Tooltip>
<Tooltip content={state.loading ? copy.stop : copy.refresh}>
<IconButton
label={state.loading ? copy.stopAria : copy.refreshAria}
icon={state.loading ? <X size={ICON_SIZE.chrome} aria-hidden /> : <RotateCw size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
isDisabled={!state.hasPage && !state.loading}
onClick={() =>
state.loading ? void window.maka.browser.stop(sessionId) : void window.maka.browser.reload(sessionId)
}
/>
</Tooltip>
<div className="maka-browser-address-field">
<TextInput
type="text"
label={copy.addressAria}
isLabelHidden
width="100%"
placeholder={copy.addressPlaceholder}
value={address}
onChange={setAddress}
onFocus={() => {
editingRef.current = true;
}}
onBlur={() => {
editingRef.current = false;
setAddress(state.url);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.currentTarget.blur();
go();
}
}}
/>
</div>
</div>
)}
endContent={(
<Tooltip content={copy.close}>
<IconButton
label={copy.closeAria}
icon={<X size={ICON_SIZE.chrome} aria-hidden />}
variant="ghost"
size="sm"
onClick={() => void window.maka.browser.close(sessionId)}
/>
</Tooltip>
)}
/>
<div className="maka-browser-strip" ref={stripRef}>
{!state.hasPage && (
<EmptyState
Expand Down
3 changes: 2 additions & 1 deletion apps/desktop/src/renderer/keyboard-help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { useState } from 'react';
import { ICON_SIZE, Keyboard } from '@maka/ui/icons';
import { useUiLocale } from '@maka/ui';
import { Heading } from '@astryxdesign/core/Heading';
import { Kbd } from '@astryxdesign/core/Kbd';
import { useHotkeys } from '@astryxdesign/core/hooks';
import {
Expand Down Expand Up @@ -92,7 +93,7 @@ export function KeyboardHelpModal(props: {
<div className="maka-help-body">
{copy.sections.map((section) => (
<section key={section.heading} className="maka-help-section">
<h3>{section.heading}</h3>
<Heading level={3}>{section.heading}</Heading>
<dl>
{section.rows.map((row) => (
<div key={row.description}>
Expand Down
16 changes: 10 additions & 6 deletions apps/desktop/src/renderer/session-workbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import { Button } from '@astryxdesign/core/Button';
import { Card } from '@astryxdesign/core/Card';
import { ContextMenu } from '@astryxdesign/core/ContextMenu';
import { Item } from '@astryxdesign/core/Item';
import { Kbd } from '@astryxdesign/core/Kbd';
import { Section } from '@astryxdesign/core/Section';
import { Spinner } from '@astryxdesign/core/Spinner';
import { Toolbar } from '@astryxdesign/core/Toolbar';
Expand Down Expand Up @@ -563,36 +564,37 @@ function WorkbarLauncher(props: {
label: copy.sideChat,
description: copy.launcher.sideChat,
icon: <MessageCircleQuestion aria-hidden />,
shortcut: isMac ? '⌥⌘S' : 'Alt+Ctrl+S',
// Astryx Kbd tokens (+ separated); mod = Cmd on Mac / Ctrl elsewhere.
shortcut: isMac ? 'mod+alt+s' : 'ctrl+alt+s',
disabled: !props.sideChatAvailable,
},
{
kind: 'review',
label: copy.review,
description: copy.launcher.review,
icon: <GitBranch aria-hidden />,
shortcut: '⌃⇧G',
shortcut: 'ctrl+shift+g',
},
{
kind: 'terminal',
label: copy.terminal,
description: copy.launcher.terminal,
icon: <Terminal aria-hidden />,
shortcut: isMac ? '⌃`' : 'Ctrl+`',
shortcut: 'ctrl+`',
},
{
kind: 'browser',
label: copy.browser,
description: copy.launcher.browser,
icon: <Globe aria-hidden />,
shortcut: isMac ? '⌘T' : 'Ctrl+T',
shortcut: 'mod+t',
},
{
kind: 'files',
label: copy.files,
description: copy.launcher.files,
icon: <FolderOpen aria-hidden />,
shortcut: isMac ? '⌘P' : 'Ctrl+P',
shortcut: 'mod+p',
},
{
kind: 'tasks',
Expand Down Expand Up @@ -687,7 +689,9 @@ function WorkbarLauncher(props: {
aria-description={action.description}
endContent={
action.shortcut ? (
<kbd className="maka-workbar-launcher-shortcut">{action.shortcut}</kbd>
<span className="maka-workbar-launcher-shortcut">
<Kbd keys={action.shortcut} />
</span>
) : undefined
}
isDisabled={action.disabled}
Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/src/renderer/styles/agent-graph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
overflow: auto;
border: var(--border-width-hairline) solid var(--border);
border-radius: var(--radius-surface);
background: var(--background-elevated);
box-shadow: 0 8px 24px oklch(from var(--foreground) l c h / 0.05);
/* In-flow reading plate: raised fill + line only (DESIGN.md One Means). */
background: var(--surface-raised);
color: var(--foreground);
}

Expand Down
15 changes: 8 additions & 7 deletions apps/desktop/src/renderer/styles/chat-detail.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,13 +332,9 @@
height: var(--icon-chrome);
}

/* Astryx Kbd owns keycap chrome; only mute the cluster. */
.maka-workbar-launcher-shortcut {
padding: 2px var(--space-2);
border: 0;
border-radius: var(--radius-full);
background: var(--card-bg);
color: var(--muted-foreground);
font: var(--maka-text-supporting);
white-space: nowrap;
}

Expand Down Expand Up @@ -918,11 +914,16 @@

.maka-browser-toolbar {
flex: 0 0 auto;
/* Band chrome only — Astryx Toolbar owns the row; start slot stretches. */
border-bottom: var(--border-width-hairline) solid var(--border);
}

.maka-browser-toolbar-start {
display: flex;
min-width: 0;
flex: 1 1 auto;
align-items: center;
gap: var(--space-1);
padding: var(--space-1-5) var(--space-2);
border-bottom: var(--border-width-hairline) solid var(--border);
}

.maka-browser-address-field {
Expand Down
3 changes: 2 additions & 1 deletion apps/desktop/src/renderer/styles/chat-header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@

.maka-session-context__inner {
min-width: 0;
min-height: 40px;
/* Control rhythm 36 (lg) — band holds sm/md controls without off-ladder 40. */
min-height: 36px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
align-items: center;
Expand Down
10 changes: 5 additions & 5 deletions apps/desktop/src/renderer/styles/deep-research.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,12 @@
padding: var(--space-3) var(--space-4);
border: var(--border-width-hairline) solid var(--border);
border-radius: var(--radius-surface);
background: oklch(from var(--focus-ring) l c h / 0.035);
background: var(--info-wash);
color: var(--foreground);
}

.maka-deep-research-run-panel[data-status="completed"] {
background: oklch(from var(--success) l c h / 0.035);
background: var(--success-wash);
}

.maka-deep-research-run-summary,
Expand Down Expand Up @@ -141,7 +141,7 @@
align-items: center;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-pill);
background: oklch(from var(--focus-ring) l c h / 0.10);
background: var(--info-wash);
font-variant-numeric: tabular-nums;
}

Expand All @@ -163,11 +163,11 @@
}

.maka-deep-research-handoff-button:hover {
background: oklch(from var(--focus-ring) l c h / 0.08);
background: var(--info-wash);
}

.maka-deep-research-handoff-button:active {
background: oklch(from var(--focus-ring) l c h / 0.14);
background: var(--info-wash-border);
}

.maka-deep-research-handoff-button:focus-visible {
Expand Down
Loading
Loading