Skip to content

Commit 658ef86

Browse files
cliffhallclaude
cliffhall
and
claude
committed
Phase 1: Style refinements and component tweaks from Storybook review
Theme & styling: - Add custom "inspector" color palette with dark navy primary - Change primaryShade to { light: 7, dark: 8 } - Add Input theme override to apply --inspector-input-background globally - Add --inspector-input-background token (white in light, dark-9 in dark) - Override --mantine-color-body in dark mode via cssVariablesResolver in both main.tsx and Storybook preview.tsx - Add dark-mode CSS overrides for Select dropdown and option hover - Add dark-mode CSS override for Accordion control hover - Rename CSS variable --inspector-status-failed → --inspector-status-error Component changes: - CopyButton: increase icon font size to 24px, use --inspector-text-primary for high-contrast color (black/white per theme) - TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select clear button not disappearing by passing null instead of undefined - TaskListPanel: add onClearCompleted callback, render "Clear" button next to Completed section header - HistoryListPanel: move "Clear" button from toolbar to History section header, rename from "Clear All" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2d4fca4 commit 658ef86

24 files changed

Lines changed: 148 additions & 51 deletions

File tree

‎clients/web/.storybook/preview.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Preview } from '@storybook/react-vite'
2-
import { MantineProvider, useMantineColorScheme } from '@mantine/core'
2+
import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
33
import { Notifications } from '@mantine/notifications'
44
import '@mantine/core/styles.css'
55
import '@mantine/notifications/styles.css'
@@ -24,6 +24,14 @@ function ColorSchemeWrapper({
2424
return <>{children}</>
2525
}
2626

27+
const resolver: CSSVariablesResolver = () => ({
28+
variables: {},
29+
light: {},
30+
dark: {
31+
'--mantine-color-body': 'var(--mantine-color-dark-9)',
32+
},
33+
})
34+
2735
const preview: Preview = {
2836
globalTypes: {
2937
colorScheme: {
@@ -46,7 +54,7 @@ const preview: Preview = {
4654
(Story, context) => {
4755
const isFullscreen = context.parameters?.layout === 'fullscreen'
4856
return (
49-
<MantineProvider theme={theme} defaultColorScheme="light">
57+
<MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
5058
<ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
5159
<Notifications position="top-right" />
5260
{isFullscreen ? (

‎clients/web/src/App.css‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
--inspector-surface-card: var(--mantine-color-gray-0);
2727
--inspector-surface-code: var(--mantine-color-white);
2828

29+
/* ── Inputs ────────────────────────────────────────────── */
30+
--inspector-input-background: var(--mantine-color-white);
31+
2932
/* ── Borders ───────────────────────────────────────────── */
3033
--inspector-border-default: var(--mantine-color-default-border);
3134
--inspector-border-subtle: var(--mantine-color-gray-3);
@@ -71,7 +74,8 @@
7174
[data-mantine-color-scheme="dark"] {
7275
--inspector-surface-card: var(--mantine-color-gray-9);
7376
--inspector-surface-code: var(--mantine-color-dark-9);
74-
--inspector-border-subtle: var(--mantine-color-dark-4);
77+
--inspector-border-subtle: var(--mantine-color-gray-4);
78+
--inspector-input-background: var(--mantine-color-dark-9);
7579
}
7680

7781
/* ── Animations ──────────────────────────────────────────── */
@@ -112,7 +116,33 @@
112116
}
113117

114118
[data-mantine-color-scheme="dark"] .list-item:hover {
115-
background-color: var(--mantine-color-dark-5);
119+
background-color: var(--mantine-primary-color-light);
120+
}
121+
122+
/* ── Select dropdown / option (dark mode) ──────────────────────── */
123+
124+
[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
125+
background-color: var(--mantine-color-gray-8);
126+
}
127+
128+
[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
129+
background-color: var(--mantine-primary-color-light);
130+
}
131+
132+
[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
133+
background-color: var(--mantine-primary-color-light);
134+
}
135+
136+
/* ── Segmented control label (dark mode) ──────────────────────── */
137+
138+
[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
139+
background-color: var(--mantine-primary-color-light);
140+
}
141+
142+
/* ── Accordion button hover ─────────────────────────────── */
143+
144+
[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
145+
background-color: var(--mantine-primary-color-filled-hover);
116146
}
117147

118148
/* ── Grid alignment ─────────────────────────────────────── */

‎clients/web/src/components/elements/CopyButton/CopyButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export function CopyButton({ value }: CopyButtonProps) {
1515
<Tooltip label={copied ? "Copied" : "Copy"}>
1616
<ActionIcon
1717
variant="subtle"
18-
color={copied ? "green" : "gray"}
18+
color={copied ? "green" : "var(--inspector-text-primary)"}
1919
onClick={copy}
20+
fz={24}
2021
>
2122
{copied ? "\u2713" : "\u2398"}
2223
</ActionIcon>

‎clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const UpdateLabel = Text.withProps({
1919

2020
const RefreshButton = Button.withProps({
2121
size: "sm",
22-
variant: "light",
22+
variant: "subtle",
2323
});
2424

2525
export function ListChangedIndicator({

‎clients/web/src/components/elements/ListToggle/ListToggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function ListToggle({
2323
}
2424

2525
return (
26-
<Button size="sm" onClick={onToggle}>
26+
<Button size="sm" variant="subtle" onClick={onToggle}>
2727
<Icon size={20} />
2828
</Button>
2929
);

‎clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface HistoryRequestsPanelProps {
2222
}
2323

2424
const ToolbarButton = Button.withProps({
25-
variant: "light",
25+
variant: "subtle",
2626
size: "sm",
2727
});
2828

@@ -96,7 +96,6 @@ export function HistoryListPanel({
9696
<Title order={4}>Requests</Title>
9797
<Group gap="xs">
9898
<ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
99-
<ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
10099
{hasResults && (
101100
<ListToggle
102101
compact={compact}
@@ -128,9 +127,12 @@ export function HistoryListPanel({
128127

129128
{filteredEntries.length > 0 && (
130129
<>
131-
<Title order={5}>
132-
{formatHistoryTitle(filteredEntries.length)}
133-
</Title>
130+
<Group justify="space-between">
131+
<Title order={5}>
132+
{formatHistoryTitle(filteredEntries.length)}
133+
</Title>
134+
<ToolbarButton onClick={onClearAll}>Clear</ToolbarButton>
135+
</Group>
134136
{filteredEntries.map((entry) => (
135137
<HistoryEntry
136138
key={entryKey(entry)}

‎clients/web/src/components/groups/LogControls/LogControls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function LogControls({
9191
<Stack gap="xs">
9292
{LOG_LEVELS.map((level) => {
9393
const style = LEVEL_COLORS[level];
94-
const active = !!visibleLevels[level];
94+
const active = visibleLevels[level];
9595
return (
9696
<UnstyledButton
9797
key={level}

‎clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const PanelContainer = Paper.withProps({
3131
});
3232

3333
const ToolbarButton = Button.withProps({
34-
variant: "light",
34+
variant: "subtle",
3535
size: "sm",
3636
});
3737

‎clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
77

88
const CopyAllButton = Button.withProps({
9-
variant: "light",
9+
variant: "subtle",
1010
size: "sm",
1111
});
1212

‎clients/web/src/components/groups/ResourceControls/ResourceControls.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,16 +93,16 @@ export function ResourceControls({
9393
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
9494
</Group>
9595
<Group gap="xs" wrap="nowrap">
96-
<ListToggle
97-
compact={!allExpanded}
98-
onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
99-
/>
10096
<TextInput
10197
flex={1}
10298
placeholder="Search..."
10399
value={searchText}
104100
onChange={(e) => setSearchText(e.currentTarget.value)}
105101
/>
102+
<ListToggle
103+
compact={!allExpanded}
104+
onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
105+
/>
106106
</Group>
107107
<Accordion multiple value={openSections} onChange={setOpenSections}>
108108
<Accordion.Item value="resources">

0 commit comments

Comments
 (0)